glyphdust 0.1.0

package/dist/index.js

@@ -0,0 +1,929 @@
+import { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import { Canvas, useThree, useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+// src/sampling.ts
+var ALPHA_THRESHOLD = 128;
+var HASH_MULTIPLIER = 2654435761;
+function createSamplingContext(cw, ch) {
+  if (typeof document === "undefined") return null;
+  const canvas = document.createElement("canvas");
+  canvas.width = cw;
+  canvas.height = ch;
+  return canvas.getContext("2d", { willReadFrequently: true });
+}
+function collectFilledPixels(ctx, cw, ch, step) {
+  const { data } = ctx.getImageData(0, 0, cw, ch);
+  const pts = [];
+  for (let y = 0; y < ch; y += step) {
+    for (let x = 0; x < cw; x += step) {
+      if (data[(y * cw + x) * 4 + 3] > ALPHA_THRESHOLD) pts.push(x, y);
+    }
+  }
+  return pts;
+}
+function fillScatterCluster(out, count, offsetX, offsetY, random) {
+  for (let i = 0; i < count; i++) {
+    const r = Math.cbrt(random()) * 1.4;
+    const th = random() * Math.PI * 2;
+    out[i * 3] = Math.cos(th) * r + offsetX;
+    out[i * 3 + 1] = Math.sin(th) * r * 0.4 + offsetY;
+    out[i * 3 + 2] = (random() - 0.5) * 0.2;
+  }
+}
+function buildTextTargets(count, lines, opts) {
+  const out = new Float32Array(count * 3);
+  const random = opts.random ?? Math.random;
+  const cw = opts.cw ?? 1280;
+  const ch = opts.ch ?? 480;
+  const ctx = createSamplingContext(cw, ch);
+  if (!ctx) return out;
+  const align = opts.align ?? "center";
+  ctx.clearRect(0, 0, cw, ch);
+  ctx.fillStyle = "#000";
+  ctx.textAlign = align === "left" ? "left" : "center";
+  ctx.textBaseline = "middle";
+  ctx.font = opts.font;
+  const drawX = align === "left" ? cw * 0.04 : cw / 2;
+  const lh = opts.lineHeight;
+  const blockH = lh * (lines.length - 1);
+  lines.forEach((line, i) => {
+    ctx.fillText(line, drawX, ch / 2 - blockH / 2 + i * lh);
+  });
+  const step = opts.step ?? 2;
+  const pts = collectFilledPixels(ctx, cw, ch, step);
+  const filled = pts.length / 2;
+  const offsetX = opts.offsetX ?? 0;
+  const offsetY = opts.offsetY ?? 0;
+  if (filled === 0) {
+    fillScatterCluster(out, count, offsetX, offsetY, random);
+    return out;
+  }
+  const scale = opts.worldW / cw;
+  const thickness = opts.thickness ?? 0.18;
+  for (let i = 0; i < count; i++) {
+    const idx = (Math.floor(i / count * filled) + i * HASH_MULTIPLIER % filled) % filled;
+    const px = pts[idx * 2];
+    const py = pts[idx * 2 + 1];
+    const wx = (px - cw / 2) * scale + offsetX;
+    const wy = -(py - ch / 2) * scale + offsetY;
+    const jx = (random() - 0.5) * scale * step;
+    const jy = (random() - 0.5) * scale * step;
+    out[i * 3] = wx + jx;
+    out[i * 3 + 1] = wy + jy;
+    out[i * 3 + 2] = (random() - 0.5) * thickness;
+  }
+  return out;
+}
+function buildDenseTextTargets(count, lines, opts) {
+  const out = new Float32Array(count * 3);
+  const random = opts.random ?? Math.random;
+  const cw = opts.cw ?? 1280;
+  const ch = opts.ch ?? 400;
+  const ctx = createSamplingContext(cw, ch);
+  if (!ctx) return out;
+  ctx.clearRect(0, 0, cw, ch);
+  ctx.fillStyle = "#000";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.font = opts.font;
+  const lh = ch * (opts.lineHeightRatio ?? 0.46);
+  const blockH = lh * (lines.length - 1);
+  lines.forEach((line, i) => {
+    ctx.fillText(line, cw / 2, ch / 2 - blockH / 2 + i * lh);
+  });
+  const step = opts.step ?? 1;
+  const pts = collectFilledPixels(ctx, cw, ch, step);
+  const filled = pts.length / 2;
+  const offsetX = opts.offsetX ?? 0;
+  const offsetY = opts.offsetY ?? 0;
+  if (filled === 0) {
+    fillScatterCluster(out, count, offsetX, offsetY, random);
+    return out;
+  }
+  const scale = opts.worldW / cw;
+  const thickness = opts.thickness ?? 0.08;
+  const order = new Uint32Array(filled);
+  for (let i = 0; i < filled; i++) order[i] = i;
+  for (let i = filled - 1; i > 0; i--) {
+    const j = random() * (i + 1) | 0;
+    const t = order[i];
+    order[i] = order[j];
+    order[j] = t;
+  }
+  const jitter = scale * step * 0.5;
+  for (let i = 0; i < count; i++) {
+    const idx = order[i % filled];
+    const px = pts[idx * 2];
+    const py = pts[idx * 2 + 1];
+    const wx = (px - cw / 2) * scale + offsetX;
+    const wy = -(py - ch / 2) * scale + offsetY;
+    out[i * 3] = wx + (random() - 0.5) * jitter;
+    out[i * 3 + 1] = wy + (random() - 0.5) * jitter;
+    out[i * 3 + 2] = (random() - 0.5) * thickness;
+  }
+  return out;
+}
+
+// src/shaders.ts
+var GLYPH_POSITION_ATTRIBUTE_PREFIX = "aPos";
+function glyphPositionAttribute(index) {
+  return `${GLYPH_POSITION_ATTRIBUTE_PREFIX}${index}`;
+}
+function buildVertexShader(keyframeCount) {
+  if (!Number.isInteger(keyframeCount) || keyframeCount < 1) {
+    throw new Error(
+      `buildVertexShader: keyframeCount must be an integer >= 1 (got ${keyframeCount})`
+    );
+  }
+  const attributeDecls = Array.from(
+    { length: keyframeCount },
+    (_, i) => `  attribute vec3 ${glyphPositionAttribute(i)};`
+  ).join("\n");
+  const mixChain = Array.from(
+    { length: keyframeCount - 1 },
+    (_, k) => `    pos = mix(pos, ${glyphPositionAttribute(k + 1)}, smoothRange(uTimes[${k}], uTimes[${k + 1}], uStage));`
+  ).join("\n");
+  return (
+    /* glsl */
+    `
+  uniform float uTime;
+  uniform float uStage;
+  uniform float uTimes[${keyframeCount}];
+  uniform float uForm;
+  uniform float uSettle;
+  uniform float uBurst;
+  uniform float uSwap;
+  uniform float uResolve;
+  uniform float uReduced;
+  uniform vec3 uPointer;
+  uniform float uPointerActive;
+  uniform float uSize;
+  uniform float uPixelRatio;
+
+${attributeDecls}
+  attribute float aSeed;
+  attribute float aAccent;
+
+  varying float vSeed;
+  varying float vAccent;
+  varying float vDepth;
+  varying float vForm;
+  varying float vAlpha;
+  varying float vSettle;
+
+  float smoothRange(float a, float b, float x) {
+    float t = clamp((x - a) / (b - a), 0.0, 1.0);
+    return t * t * (3.0 - 2.0 * t);
+  }
+
+  void main() {
+    vSeed = aSeed;
+    vAccent = aAccent;
+    vForm = uForm;
+
+    // --- \u30AD\u30FC\u30D5\u30EC\u30FC\u30E0\u9593\u306E\u4F4D\u7F6E\u88DC\u9593\uFF08\u96A3\u63A5\u30DA\u30A2\u306E mix \u9023\u9396\uFF09 ---
+    vec3 pos = ${glyphPositionAttribute(0)};
+${mixChain}
+
+    // \u9077\u79FB\u4E2D\uFF08\u98DB\u6563\u533A\u9593\uFF09\u306B\u5916\u5411\u304D\u30C9\u30EA\u30D5\u30C8\u3092\u8DB3\u3057\u3066\u30C0\u30A4\u30CA\u30DF\u30C3\u30AF\u306B\u3002
+    // \u65B9\u5411\u306F\u539F\u70B9\u304B\u3089\u306E\u5916\u5411\u304D\uFF08\u7279\u5B9A\u30AD\u30FC\u30D5\u30EC\u30FC\u30E0\u306B\u4F9D\u5B58\u3057\u306A\u3044\u4E00\u822C\u5F62\uFF09\u3002
+    float ph = aSeed * 6.2831;
+    vec3 dir = normalize(pos + 0.0001);
+    pos += dir * uBurst * (0.4 + aSeed * 0.6);
+
+    // \u30A2\u30A4\u30C9\u30EB\u306E\u6F02\u3044\uFF08\u6574\u5217\u6642 settle / \u5B57\u5F62\u6642 form \u3067\u5F31\u3081\u308B\uFF09\u3002
+    vSettle = uSettle;
+    float drift = (1.0 - uReduced) * (1.0 - uSettle * 0.9) * (1.0 - uForm);
+    pos.x += sin(uTime * 0.35 + ph) * 0.06 * drift;
+    pos.y += cos(uTime * 0.30 + ph * 1.7) * 0.06 * drift;
+    pos.z += sin(uTime * 0.27 + ph * 2.3) * 0.06 * drift;
+
+    // \u30EF\u30FC\u30EB\u30C9\u7A7A\u9593\u3067\u30DD\u30A4\u30F3\u30BF\u53CD\u767A\uFF08\u56DE\u8EE2\u5F8C\u306E\u898B\u305F\u76EE\u306B\u5408\u308F\u305B modelMatrix \u7D4C\u7531\uFF09\u3002
+    vec4 world = modelMatrix * vec4(pos, 1.0);
+    if (uPointerActive > 0.5) {
+      vec3 diff = world.xyz - uPointer;
+      float dist = length(diff);
+      float radius = 1.3;
+      float force = (1.0 - smoothstep(0.0, radius, dist)) * 0.55;
+      world.xyz += normalize(diff + 0.0001) * force;
+    }
+
+    vec4 mvPosition = viewMatrix * world;
+    vDepth = -mvPosition.z;
+    gl_Position = projectionMatrix * mvPosition;
+
+    // --- \u900F\u660E\u5EA6: \u30B9\u30EF\u30C3\u30D7\u70B9\u307E\u3067\u4E0D\u53EF\u8996\u3001\u30B9\u30EF\u30C3\u30D7\u70B9\u3067\u5373\u30FB\u4E0D\u900F\u660E\uFF08\u30D5\u30A7\u30FC\u30C9\u7121\u3057\uFF09\u3002 ---
+    // DOM \u898B\u51FA\u3057\u3068\u540C\u4F4D\u7F6E\u30FB\u540C\u30B5\u30A4\u30BA\u3067\u4E00\u81F4\u3057\u3066\u3044\u308B\u305F\u3081\u3001\u77AC\u6642\u306E\u5207\u66FF\u304C\u300C\u6587\u5B57\u2192\u7C92\u5B50\u300D\u306B\u898B\u3048\u308B\u3002
+    // \u30D5\u30A3\u30CA\u30FC\u30EC(uResolve)\u3067\u7C92\u5B50\u3092\u7D20\u65E9\u304F\u6D88\u3057\u3001\u5B9F DOM \u6587\u5B57\u3078\u53D7\u3051\u6E21\u3059\u3002
+    vAlpha = uSwap * (1.0 - uResolve);
+
+    // \u70B9\u30B5\u30A4\u30BA\uFF08\u9060\u8FD1 + \u500B\u4F53\u5DEE\uFF09\u3002\u6574\u5217\u6642\u306F\u3084\u3084\u5747\u4E00\u30FB\u5C0F\u3055\u3081\u306B\u3057\u3066\u53EF\u8AAD\u6027\u3092\u4E0A\u3052\u308B\u3002
+    float sizeVar = mix(0.55 + aSeed * 0.9, 0.72 + aSeed * 0.35, uSettle);
+    // \u5B57\u5F62\u53CE\u675F\u6642\u306F\u96A3\u63A5\u7C92\u5B50\u3067\u9699\u9593\u3092\u57CB\u3081\u308B\u305F\u3081\u308F\u305A\u304B\u306B\u5927\u304D\u3081\uFF06\u5747\u4E00\u306B\u3002
+    sizeVar = mix(sizeVar, 0.95 + aSeed * 0.18, uForm);
+    float s = uSize * sizeVar;
+    gl_PointSize = s * uPixelRatio * (1.0 / -mvPosition.z);
+    gl_PointSize = clamp(gl_PointSize, 1.0, mix(7.0, 9.0, uForm) * uPixelRatio);
+    gl_PointSize = 10.0; // DEBUG4
+  }
+`
+  );
+}
+var FRAGMENT_SHADER = (
+  /* glsl */
+  `
+  uniform vec3 uColorInk;
+  uniform vec3 uColorAccent;
+
+  varying float vSeed;
+  varying float vAccent;
+  varying float vDepth;
+  varying float vForm;
+  varying float vAlpha;
+  varying float vSettle;
+
+  void main() {
+    // \u5186\u5F62\u306E\u30BD\u30D5\u30C8\u306A\u70B9\u3002\u4E2D\u5FC3\u3067 1\u3001\u7E01\u3067 0\uFF08smoothstep \u306F edge0<edge1 \u5FC5\u9808\u306A\u306E\u3067\u53CD\u8EE2\u3057\u3066\u4F7F\u3046\uFF09\u3002
+    vec2 uv = gl_PointCoord - 0.5;
+    float r = length(uv);
+    float alpha = 1.0 - smoothstep(0.12, 0.5, r);
+    if (alpha < 0.02) discard;
+
+    // \u4E3B\u4F53\u306F\u30A4\u30F3\u30AF\u3001\u4E00\u90E8\u306E\u7C92\u3060\u3051\u30A2\u30AF\u30BB\u30F3\u30C8\u8272\u3002\u5B57\u5F62\u53CE\u675F\u6642\u306F\u3084\u3084\u63A7\u3048\u3081\u306B\u3002
+    float accentAmt = vAccent * mix(0.85, 0.55, vForm);
+    vec3 col = mix(uColorInk, uColorAccent, accentAmt);
+
+    // \u4E00\u90E8\u306E\u7C92\u306B\u660E\u308B\u3044\u304D\u3089\u3081\u304D\uFF08\u98DB\u6563\u6642\u306B\u6620\u3048\u308B\uFF09\u3002\u6574\u5217\u6642\u306F\u63A7\u3048\u3081\u3002
+    float spark = step(0.94, vSeed);
+    col = mix(col, uColorAccent, spark * mix(0.45, 0.15, vSettle));
+
+    // \u5965\u884C\u304D\u3067\u6FC3\u6DE1\uFF08\u660E\u80CC\u666F\u3067\u306E\u8996\u8A8D\u6027\u78BA\u4FDD\u306E\u305F\u3081\u4E0B\u9650\u3092\u6301\u305F\u305B\u308B\uFF09\u3002
+    float floorFade = mix(0.45, 0.78, vSettle);
+    float depthFade = clamp(1.0 - (vDepth - 3.0) * 0.10, floorFade, 1.0);
+
+    // \u6574\u5217\u6642\u306F\u4E0D\u900F\u660E\u5BC4\u308A\u306B\u3057\u3066\u30A8\u30C3\u30B8\u3092\u7DE0\u3081\u308B\u3002
+    float a = alpha * depthFade * vAlpha;
+    a = mix(a, clamp(a * 1.3, 0.0, 1.0), vSettle);
+
+    gl_FragColor = vec4(col, a);
+  }
+`
+);
+
+// src/dom-overlay.ts
+var ALPHA_THRESHOLD2 = 128;
+function viewSizeAtZ0(viewportW, viewportH, fovDeg, cameraZ) {
+  const worldH = 2 * Math.tan(fovDeg * Math.PI / 360) * cameraZ;
+  const worldW = worldH * (viewportW / viewportH);
+  return { worldH, worldW };
+}
+function buildGlyphFromDOM(count, lines, opts) {
+  if (typeof document === "undefined" || typeof window === "undefined") {
+    return null;
+  }
+  const el = document.querySelector(opts.selector);
+  if (!el) return null;
+  const rect = el.getBoundingClientRect();
+  if (rect.width < 2 || rect.height < 2) return null;
+  const random = opts.random ?? Math.random;
+  const cs = window.getComputedStyle(el);
+  const fontSize = parseFloat(cs.fontSize) || 64;
+  let lineHeight = parseFloat(cs.lineHeight);
+  if (!isFinite(lineHeight) || lineHeight <= 0) lineHeight = fontSize * 1.1;
+  const letterSpacing = parseFloat(cs.letterSpacing) || 0;
+  const fontWeight = cs.fontWeight || "600";
+  const fontFamily = cs.fontFamily || "sans-serif";
+  const padL = parseFloat(cs.paddingLeft) || 0;
+  const padT = parseFloat(cs.paddingTop) || 0;
+  const contentLeft = rect.left + padL;
+  const contentTop = rect.top + padT;
+  const res = opts.resolution ?? 2;
+  const cw = Math.max(2, Math.ceil(rect.width * res));
+  const ch = Math.max(2, Math.ceil(rect.height * res));
+  const canvas = document.createElement("canvas");
+  canvas.width = cw;
+  canvas.height = ch;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  if (!ctx) return null;
+  ctx.clearRect(0, 0, cw, ch);
+  ctx.scale(res, res);
+  ctx.fillStyle = "#000";
+  ctx.textAlign = "left";
+  ctx.textBaseline = "alphabetic";
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  if ("letterSpacing" in ctx) {
+    try {
+      ctx.letterSpacing = `${letterSpacing}px`;
+    } catch {
+    }
+  }
+  const ascent = fontSize * (opts.ascentRatio ?? 0.82);
+  lines.forEach((line, i) => {
+    const lineTop = i * lineHeight;
+    ctx.fillText(line, 0, lineTop + (lineHeight - fontSize) / 2 + ascent);
+  });
+  const { data } = ctx.getImageData(0, 0, cw, ch);
+  const pts = [];
+  const step = opts.step ?? 2;
+  for (let y = 0; y < ch; y += step) {
+    for (let x = 0; x < cw; x += step) {
+      if (data[(y * cw + x) * 4 + 3] > ALPHA_THRESHOLD2) pts.push(x, y);
+    }
+  }
+  const filled = pts.length / 2;
+  if (filled === 0) return null;
+  const vpW = window.innerWidth;
+  const vpH = window.innerHeight;
+  const { worldW, worldH } = viewSizeAtZ0(vpW, vpH, opts.fovDeg, opts.cameraZ);
+  const pxToWorld = worldW / vpW;
+  const thickness = opts.thickness ?? 0.14;
+  const out = new Float32Array(count * 3);
+  for (let i = 0; i < count; i++) {
+    const idx = (Math.floor(i / count * filled) + i * 2654435761 % filled) % filled;
+    const cx = pts[idx * 2] / res;
+    const cy = pts[idx * 2 + 1] / res;
+    const sx = contentLeft + cx;
+    const sy = contentTop + cy;
+    const wx = (sx / vpW - 0.5) * worldW;
+    const wy = -(sy / vpH - 0.5) * worldH;
+    out[i * 3] = wx + (random() - 0.5) * pxToWorld * step;
+    out[i * 3 + 1] = wy + (random() - 0.5) * pxToWorld * step;
+    out[i * 3 + 2] = (random() - 0.5) * thickness;
+  }
+  return out;
+}
+function computeScreenRect(targets, viewportW, viewportH, visibleWorldW) {
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (let i = 0; i < targets.length; i += 3) {
+    const x = targets[i];
+    const y = targets[i + 1];
+    if (x < minX) minX = x;
+    if (x > maxX) maxX = x;
+    if (y < minY) minY = y;
+    if (y > maxY) maxY = y;
+  }
+  if (!isFinite(minX)) return null;
+  const worldW = visibleWorldW;
+  const worldH = visibleWorldW * (viewportH / viewportW);
+  const toScreenX = (wx) => (wx / worldW + 0.5) * viewportW;
+  const toScreenY = (wy) => (0.5 - wy / worldH) * viewportH;
+  const left = toScreenX(minX);
+  const right = toScreenX(maxX);
+  const top = toScreenY(maxY);
+  const bottom = toScreenY(minY);
+  return {
+    left,
+    top,
+    width: right - left,
+    height: bottom - top,
+    cx: (left + right) / 2,
+    cy: (top + bottom) / 2
+  };
+}
+var DEFAULT_TRIGGER_HEIGHT = 2;
+function clamp01(x) {
+  return x < 0 ? 0 : x > 1 ? 1 : x;
+}
+function createScrollProgress(element) {
+  return () => {
+    if (element === null || typeof window === "undefined") return 0;
+    const rect = element.getBoundingClientRect();
+    const total = rect.height - window.innerHeight;
+    if (total <= 0) return 0;
+    return clamp01(-rect.top / total);
+  };
+}
+function useScrollProgress(ref) {
+  return useCallback(() => {
+    const el = ref.current;
+    if (el === null || typeof window === "undefined") return 0;
+    const rect = el.getBoundingClientRect();
+    const total = rect.height - window.innerHeight;
+    if (total <= 0) return 0;
+    return clamp01(-rect.top / total);
+  }, [ref]);
+}
+var QUERY = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia(QUERY).matches;
+}
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mq = window.matchMedia(QUERY);
+    setReduced(mq.matches);
+    const onChange = () => setReduced(mq.matches);
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+var DEFAULT_TEXT_FONT = "700 140px system-ui, 'Hiragino Sans', 'Noto Sans JP', sans-serif";
+var DEFAULT_DENSE_FONT = "900 260px 'Helvetica Neue', Helvetica, Arial, sans-serif";
+function isMobile() {
+  return typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches;
+}
+function smooth(a, b, x) {
+  const t = THREE.MathUtils.clamp((x - a) / (b - a), 0, 1);
+  return t * t * (3 - 2 * t);
+}
+function bump(x, c, prev, next) {
+  const rise = c <= 0 ? 1 : smooth(prev, c, x);
+  const fall = c >= 1 ? 1 : 1 - smooth(c, next, x);
+  return rise * fall;
+}
+function buildScatter(count, spread, random) {
+  const out = new Float32Array(count * 3);
+  for (let i = 0; i < count; i++) {
+    const r = (3 + Math.cbrt(random()) * 2.6) * spread;
+    const theta = random() * Math.PI * 2;
+    const phi = Math.acos(2 * random() - 1);
+    out[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+    out[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta) * 0.8;
+    out[i * 3 + 2] = r * Math.cos(phi) * 0.9;
+  }
+  return out;
+}
+function buildKeyframeTargets(kf, count, ctx) {
+  if (kf.type === "scatter") {
+    return buildScatter(count, kf.spread ?? 1, Math.random);
+  }
+  const lines = kf.text.split("\n");
+  if (kf.domSelector) {
+    const dom = buildGlyphFromDOM(count, lines, {
+      selector: kf.domSelector,
+      fovDeg: ctx.cameraFov,
+      cameraZ: ctx.cameraZ
+    });
+    if (dom) return dom;
+  }
+  if (kf.dense) {
+    return buildDenseTextTargets(count, lines, {
+      font: kf.font ?? DEFAULT_DENSE_FONT,
+      worldW: kf.worldW ?? ctx.visW * (ctx.mobile ? 0.86 : 0.62),
+      offsetX: kf.offsetX ?? 0,
+      offsetY: kf.offsetY ?? 0,
+      thickness: 0.06,
+      cw: 1400,
+      ch: 440,
+      step: 1
+    });
+  }
+  return buildTextTargets(count, lines, {
+    font: kf.font ?? DEFAULT_TEXT_FONT,
+    worldW: kf.worldW ?? ctx.visW * 0.7,
+    lineHeight: 178,
+    offsetX: kf.offsetX ?? 0,
+    offsetY: kf.offsetY ?? 0,
+    thickness: 0.16,
+    cw: 1280,
+    ch: 560,
+    step: 2
+  });
+}
+function GlyphPoints(props) {
+  const {
+    keyframes,
+    count,
+    colors,
+    cameraZ,
+    cameraFov,
+    pointer: pointerEnabled,
+    drag: dragEnabled,
+    getProgress,
+    timing,
+    resolveRef
+  } = props;
+  const pointsRef = useRef(null);
+  const matRef = useRef(null);
+  const { size, gl } = useThree();
+  const pointer = useRef({ x: 0, y: 0, active: 0 });
+  const rot = useRef({ x: 0, y: 0, vx: 0, vy: 0 });
+  const dragState = useRef({ down: false, lx: 0, ly: 0 });
+  const stage = useRef(0);
+  const guardRef = useRef(0);
+  const n = keyframes.length;
+  const times = useMemo(() => {
+    if (timing && timing.length === n) return timing.slice();
+    if (n <= 1) return [0];
+    const lastIsText = keyframes[n - 1]?.type === "text";
+    const end = lastIsText ? 0.85 : 1;
+    return Array.from({ length: n }, (_, i) => i / (n - 1) * end);
+  }, [timing, n, keyframes]);
+  const timeline = useMemo(() => {
+    const isText = keyframes.map((k) => k.type === "text");
+    const isScatter = keyframes.map((k) => k.type === "scatter");
+    const last = keyframes[n - 1];
+    const hasResolve = n >= 1 && last?.type === "text" && last.resolveToDom === true;
+    const resolveText = last?.type === "text" ? last.text.replace(/\n/g, " ") : "";
+    const swapAt = times[1] !== void 0 ? times[1] * 0.15 : 0;
+    return { isText, isScatter, hasResolve, resolveText, swapAt };
+  }, [keyframes, n, times]);
+  const built = useMemo(() => {
+    const geo = new THREE.BufferGeometry();
+    const seed = new Float32Array(count);
+    const accent = new Float32Array(count);
+    for (let i = 0; i < count; i++) {
+      seed[i] = Math.random();
+      accent[i] = Math.random() < colors.accentRatio ? 1 : 0;
+    }
+    const mobile = isMobile();
+    const vpW = typeof window !== "undefined" ? window.innerWidth : 1440;
+    const vpH = typeof window !== "undefined" ? window.innerHeight : 900;
+    const { worldW: visW } = viewSizeAtZ0(vpW, vpH, cameraFov, cameraZ);
+    const buffers = keyframes.map(
+      (kf) => buildKeyframeTargets(kf, count, {
+        visW,
+        mobile,
+        cameraFov,
+        cameraZ
+      })
+    );
+    buffers.forEach((buf, i) => {
+      geo.setAttribute(
+        glyphPositionAttribute(i),
+        new THREE.BufferAttribute(buf, 3)
+      );
+    });
+    geo.setAttribute("aSeed", new THREE.BufferAttribute(seed, 1));
+    geo.setAttribute("aAccent", new THREE.BufferAttribute(accent, 1));
+    const first = buffers[0] ?? new Float32Array(count * 3);
+    geo.setAttribute("position", new THREE.BufferAttribute(first.slice(), 3));
+    geo.computeBoundingSphere();
+    return { geo, buffers, visW, vpW, vpH };
+  }, [keyframes, count, colors.accentRatio, cameraFov, cameraZ]);
+  const vertexShader = useMemo(() => buildVertexShader(Math.max(n, 1)), [n]);
+  const uniforms = useMemo(
+    () => ({
+      uTime: { value: 0 },
+      uStage: { value: 0 },
+      uTimes: { value: times.slice() },
+      uForm: { value: 0 },
+      uSettle: { value: 0 },
+      uBurst: { value: 0 },
+      uSwap: { value: 0 },
+      uResolve: { value: 0 },
+      uReduced: { value: 0 },
+      uPointer: { value: new THREE.Vector3(0, 0, 0) },
+      uPointerActive: { value: 0 },
+      uSize: { value: 1 },
+      uPixelRatio: { value: 1 },
+      uColorInk: { value: colors.ink.clone() },
+      uColorAccent: { value: colors.accent.clone() }
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [vertexShader]
+  );
+  const positionOverlay = () => {
+    const el = resolveRef?.current;
+    if (!el || !timeline.hasResolve) return;
+    const finalBuf = built.buffers[n - 1];
+    if (!finalBuf) return;
+    const vpW = window.innerWidth;
+    const vpH = window.innerHeight;
+    const { worldW: visW } = viewSizeAtZ0(vpW, vpH, cameraFov, cameraZ);
+    const rect = computeScreenRect(finalBuf, vpW, vpH, visW);
+    if (!rect) return;
+    el.style.left = `${rect.left}px`;
+    el.style.top = `${rect.top}px`;
+    el.style.width = `${rect.width}px`;
+    el.style.height = `${rect.height}px`;
+    el.style.fontSize = `${rect.height * 0.92}px`;
+  };
+  const rebuildDomGlyphs = () => {
+    keyframes.forEach((kf, i) => {
+      if (kf.type !== "text" || !kf.domSelector) return;
+      const next = buildGlyphFromDOM(count, kf.text.split("\n"), {
+        selector: kf.domSelector,
+        fovDeg: cameraFov,
+        cameraZ
+      });
+      if (!next) return;
+      const attr = built.geo.getAttribute(glyphPositionAttribute(i));
+      if (!attr) return;
+      attr.array.set(next);
+      attr.needsUpdate = true;
+    });
+    positionOverlay();
+  };
+  useEffect(() => {
+    const raf = requestAnimationFrame(rebuildDomGlyphs);
+    const t1 = window.setTimeout(rebuildDomGlyphs, 120);
+    const t2 = window.setTimeout(rebuildDomGlyphs, 500);
+    const fonts = document.fonts;
+    if (fonts && typeof fonts.ready?.then === "function") {
+      fonts.ready.then(() => rebuildDomGlyphs()).catch(() => {
+      });
+    }
+    const onResize = () => rebuildDomGlyphs();
+    window.addEventListener("resize", onResize, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      window.clearTimeout(t1);
+      window.clearTimeout(t2);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [built]);
+  useEffect(() => {
+    if (!pointerEnabled && !dragEnabled) return;
+    const el = gl.domElement;
+    const toNDC = (clientX, clientY) => {
+      const r = el.getBoundingClientRect();
+      return {
+        x: (clientX - r.left) / r.width * 2 - 1,
+        y: -((clientY - r.top) / r.height * 2 - 1)
+      };
+    };
+    const onMove = (e) => {
+      if (pointerEnabled) {
+        const ndc = toNDC(e.clientX, e.clientY);
+        pointer.current.x = ndc.x;
+        pointer.current.y = ndc.y;
+        pointer.current.active = 1;
+      }
+      if (dragEnabled && dragState.current.down) {
+        const dx = e.clientX - dragState.current.lx;
+        const dy = e.clientY - dragState.current.ly;
+        const grip = 1 - guardRef.current * 0.85;
+        rot.current.vy += dx * 35e-5 * grip;
+        rot.current.vx += dy * 25e-5 * grip;
+        dragState.current.lx = e.clientX;
+        dragState.current.ly = e.clientY;
+      }
+    };
+    const onDown = (e) => {
+      dragState.current.down = true;
+      dragState.current.lx = e.clientX;
+      dragState.current.ly = e.clientY;
+    };
+    const onUp = () => {
+      dragState.current.down = false;
+    };
+    const onLeave = () => {
+      pointer.current.active = 0;
+      dragState.current.down = false;
+    };
+    el.addEventListener("pointermove", onMove, { passive: true });
+    if (dragEnabled) el.addEventListener("pointerdown", onDown, { passive: true });
+    window.addEventListener("pointerup", onUp, { passive: true });
+    el.addEventListener("pointerleave", onLeave, { passive: true });
+    return () => {
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerdown", onDown);
+      window.removeEventListener("pointerup", onUp);
+      el.removeEventListener("pointerleave", onLeave);
+    };
+  }, [gl, pointerEnabled, dragEnabled]);
+  useEffect(() => {
+    const mat = matRef.current;
+    if (!mat) return;
+    const u = mat.uniforms;
+    u.uPixelRatio.value = Math.min(window.devicePixelRatio || 1, 2);
+    u.uSize.value = Math.min(size.height / 18, 26);
+  }, [size]);
+  useFrame((state, delta) => {
+    const p = pointsRef.current;
+    const mat = matRef.current;
+    if (!p || !mat) return;
+    const u = mat.uniforms;
+    const d = Math.min(delta, 0.05);
+    const raw = THREE.MathUtils.clamp(getProgress(), 0, 1);
+    stage.current = THREE.MathUtils.lerp(stage.current, raw, 0.1);
+    const s = stage.current;
+    let settle = 0;
+    let burst = 0;
+    for (let i = 0; i < n; i++) {
+      const c = times[i] ?? 0;
+      const prev = times[i - 1] ?? 0;
+      const next = times[i + 1] ?? 1;
+      const b = bump(s, c, prev, next);
+      if (timeline.isText[i]) settle = Math.max(settle, b);
+      if (timeline.isScatter[i]) burst = Math.max(burst, b);
+    }
+    let form = 0;
+    const lastIsText = timeline.isText[n - 1] === true;
+    if (lastIsText && n >= 2) {
+      form = smooth(times[n - 2] ?? 0, times[n - 1] ?? 1, s);
+    }
+    const guard = THREE.MathUtils.clamp(Math.max(settle, form), 0, 1);
+    guardRef.current = guard;
+    const swapped = raw >= timeline.swapAt ? 1 : 0;
+    const resolve = timeline.hasResolve ? smooth(0.9, 0.98, raw) : 0;
+    u.uTime.value = state.clock.elapsedTime;
+    u.uStage.value = s;
+    u.uForm.value = form;
+    u.uSettle.value = settle;
+    u.uBurst.value = burst * (1 - form);
+    u.uSwap.value = swapped;
+    u.uResolve.value = resolve;
+    u.uPointer.value.set(pointer.current.x * 3.2, pointer.current.y * 2, 0);
+    u.uPointerActive.value = pointer.current.active * (1 - guard);
+    rot.current.x += rot.current.vx;
+    rot.current.y += rot.current.vy;
+    rot.current.vx *= 0.92;
+    rot.current.vy *= 0.92;
+    rot.current.y += d * 0.05 * (1 - guard);
+    const recenter = 0.02 + guard * 0.2;
+    const wrappedY = Math.atan2(
+      Math.sin(rot.current.y),
+      Math.cos(rot.current.y)
+    );
+    rot.current.y = THREE.MathUtils.lerp(
+      rot.current.y,
+      rot.current.y - wrappedY,
+      recenter
+    );
+    rot.current.x = THREE.MathUtils.lerp(rot.current.x, 0, 0.04 + guard * 0.14);
+    p.rotation.x = rot.current.x;
+    p.rotation.y = rot.current.y;
+    const overlay = resolveRef?.current;
+    if (overlay && timeline.hasResolve) overlay.style.opacity = String(resolve);
+  });
+  return /* @__PURE__ */ jsx("points", { ref: pointsRef, geometry: built.geo, frustumCulled: false, children: /* @__PURE__ */ jsx(
+    "shaderMaterial",
+    {
+      ref: matRef,
+      uniforms,
+      transparent: true,
+      depthWrite: false,
+      blending: THREE.NormalBlending,
+      vertexShader,
+      fragmentShader: FRAGMENT_SHADER
+    }
+  ) });
+}
+var DEFAULT_INK = "#1b2330";
+var DEFAULT_ACCENT = "#0055ff";
+var DEFAULT_ACCENT_RATIO = 0.18;
+var DEFAULT_COUNT_DESKTOP = 11e3;
+var DEFAULT_COUNT_MOBILE = 5200;
+var DEFAULT_CAMERA_Z = 7;
+var DEFAULT_CAMERA_FOV = 42;
+var DEFAULT_DPR = [1, 1.75];
+function clamp012(x) {
+  return x < 0 ? 0 : x > 1 ? 1 : x;
+}
+function isWebGLAvailable() {
+  if (typeof window === "undefined") return false;
+  try {
+    const canvas = document.createElement("canvas");
+    return Boolean(
+      window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl"))
+    );
+  } catch {
+    return false;
+  }
+}
+function GlyphDust(props) {
+  const {
+    keyframes,
+    driver = { type: "scroll" },
+    colors,
+    count,
+    dpr = DEFAULT_DPR,
+    interaction,
+    camera,
+    timing,
+    fallback = null,
+    className
+  } = props;
+  const reduced = useReducedMotion();
+  const [webgl, setWebgl] = useState(true);
+  useEffect(() => {
+    setWebgl(isWebGLAvailable());
+  }, []);
+  const [mobile, setMobile] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    setMobile(window.matchMedia("(max-width: 768px)").matches);
+  }, []);
+  const wrapperRef = useRef(null);
+  const resolveRef = useRef(null);
+  const manualRef = useRef(0);
+  if (driver.type === "manual") manualRef.current = clamp012(driver.progress);
+  const getProgress = useCallback(() => {
+    if (driver.type === "manual") return manualRef.current;
+    const el = wrapperRef.current;
+    if (el === null || typeof window === "undefined") return 0;
+    const rect = el.getBoundingClientRect();
+    const total = rect.height - window.innerHeight;
+    if (total <= 0) return 0;
+    return clamp012(-rect.top / total);
+  }, [driver.type]);
+  const resolvedColors = useMemo(
+    () => ({
+      ink: new THREE.Color(colors?.ink ?? DEFAULT_INK),
+      accent: new THREE.Color(colors?.accent ?? DEFAULT_ACCENT),
+      accentRatio: colors?.accentRatio ?? DEFAULT_ACCENT_RATIO
+    }),
+    [colors?.ink, colors?.accent, colors?.accentRatio]
+  );
+  const particleCount = mobile ? count?.mobile ?? DEFAULT_COUNT_MOBILE : count?.desktop ?? DEFAULT_COUNT_DESKTOP;
+  const cameraZ = camera?.z ?? DEFAULT_CAMERA_Z;
+  const cameraFov = camera?.fov ?? DEFAULT_CAMERA_FOV;
+  const pointerEnabled = interaction?.pointer ?? true;
+  const dragEnabled = interaction?.drag ?? true;
+  const finalKf = keyframes[keyframes.length - 1];
+  const hasResolve = finalKf?.type === "text" && finalKf.resolveToDom === true;
+  const resolveText = finalKf?.type === "text" ? finalKf.text.replace(/\n/g, " ") : "";
+  if (reduced || !webgl) {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  }
+  const scene = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Canvas,
+      {
+        dpr,
+        camera: { position: [0, 0, cameraZ], fov: cameraFov },
+        gl: { antialias: true, alpha: true, powerPreference: "high-performance" },
+        frameloop: "always",
+        style: { width: "100%", height: "100%" },
+        children: /* @__PURE__ */ jsx(
+          GlyphPoints,
+          {
+            keyframes,
+            count: particleCount,
+            colors: resolvedColors,
+            cameraZ,
+            cameraFov,
+            pointer: pointerEnabled,
+            drag: dragEnabled,
+            getProgress,
+            timing,
+            resolveRef: hasResolve ? resolveRef : void 0
+          }
+        )
+      }
+    ),
+    hasResolve ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: resolveRef,
+        "aria-hidden": "true",
+        style: {
+          position: "absolute",
+          opacity: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          lineHeight: 1,
+          whiteSpace: "nowrap",
+          fontWeight: 900,
+          color: colors?.ink ?? DEFAULT_INK,
+          pointerEvents: "none"
+        },
+        children: resolveText
+      }
+    ) : null
+  ] });
+  if (driver.type === "manual") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        style: { position: "relative", width: "100%", height: "100%" },
+        children: scene
+      }
+    );
+  }
+  const triggerHeight = driver.triggerHeight ?? DEFAULT_TRIGGER_HEIGHT;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: wrapperRef,
+      className,
+      style: { position: "relative", height: `${triggerHeight * 100}vh` },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "sticky",
+            top: 0,
+            height: "100vh",
+            width: "100%",
+            overflow: "hidden"
+          },
+          children: scene
+        }
+      )
+    }
+  );
+}
+
+// src/index.ts
+var VERSION = "0.1.0";
+
+export { DEFAULT_TRIGGER_HEIGHT, FRAGMENT_SHADER, GLYPH_POSITION_ATTRIBUTE_PREFIX, GlyphDust, VERSION, buildDenseTextTargets, buildGlyphFromDOM, buildTextTargets, buildVertexShader, computeScreenRect, createScrollProgress, glyphPositionAttribute, prefersReducedMotion, useReducedMotion, useScrollProgress, viewSizeAtZ0 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map