glyphdust 0.2.0 → 0.3.0

package/dist/index.js

@@ -32,6 +32,38 @@ function fillScatterCluster(out, count, offsetX, offsetY, random) {
     out[i * 3 + 2] = (random() - 0.5) * 0.2;
   }
 }
+function segmentsToRunLines(segments, defaultFont) {
+  const lines = [[]];
+  for (const seg of segments) {
+    const font = seg.font ?? defaultFont;
+    const parts = seg.text.split("\n");
+    parts.forEach((part, i) => {
+      if (i > 0) lines.push([]);
+      if (part.length > 0) lines[lines.length - 1].push({ text: part, font });
+    });
+  }
+  return lines;
+}
+function drawSegmentedLines(ctx, runLines, cw, ch, lineHeight, align, leftPad) {
+  ctx.fillStyle = "#000";
+  ctx.textBaseline = "middle";
+  ctx.textAlign = "left";
+  const blockH = lineHeight * (runLines.length - 1);
+  runLines.forEach((runs, i) => {
+    const y = ch / 2 - blockH / 2 + i * lineHeight;
+    let total = 0;
+    for (const r of runs) {
+      ctx.font = r.font;
+      total += ctx.measureText(r.text).width;
+    }
+    let x = align === "left" ? leftPad : cw / 2 - total / 2;
+    for (const r of runs) {
+      ctx.font = r.font;
+      ctx.fillText(r.text, x, y);
+      x += ctx.measureText(r.text).width;
+    }
+  });
+}
 function buildTextTargets(count, lines, opts) {
   const out = new Float32Array(count * 3);
   const random = opts.random ?? Math.random;
@@ -40,17 +72,22 @@ function buildTextTargets(count, lines, opts) {
   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);
-  });
+  ctx.clearRect(0, 0, cw, ch);
+  if (opts.segments && opts.segments.length > 0) {
+    const runLines = segmentsToRunLines(opts.segments, opts.font);
+    drawSegmentedLines(ctx, runLines, cw, ch, lh, align, cw * 0.04);
+  } else {
+    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 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;
@@ -84,15 +121,20 @@ function buildDenseTextTargets(count, lines, opts) {
   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);
-  });
+  if (opts.segments && opts.segments.length > 0) {
+    const runLines = segmentsToRunLines(opts.segments, opts.font);
+    drawSegmentedLines(ctx, runLines, cw, ch, lh, "center", cw * 0.04);
+  } else {
+    ctx.fillStyle = "#000";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.font = opts.font;
+    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;
@@ -160,6 +202,8 @@ function buildVertexShader(keyframeCount) {
   uniform vec3 uPointer;
   uniform float uPointerActive;
   uniform float uSize;
+  uniform float uSizeScale;
+  uniform float uDrift;
   uniform float uPixelRatio;
 
 ${attributeDecls}
@@ -195,7 +239,7 @@ ${mixChain}
 
     // \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);
+    float drift = (1.0 - uReduced) * (1.0 - uSettle * 0.9) * (1.0 - uForm) * uDrift;
     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;
@@ -223,9 +267,11 @@ ${mixChain}
     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;
+    // \u9AD8 dpr \u74B0\u5883\u3067\u306F\u5C0F\u7C92\u30FB\u4E0A\u9650\u4F4E\u3081\u306E\u65B9\u304C\u30A8\u30C3\u30B8\u304C\u7DE0\u307E\u308A\u9AD8\u7CBE\u7D30\u306B\u898B\u3048\u308B
+    // \uFF08\u30B3\u30FC\u30DD\u30EC\u30FC\u30C8\u30B5\u30A4\u30C8\u5B9F\u88C5\u3067\u5B9F\u8A3C\u30020.62 \u3068 clamp 4\u301C5 \u304C\u6700\u3082\u300C\u971E\u307E\u306A\u3044\u300D\uFF09\u3002
+    float s = uSize * sizeVar * 0.62 * uSizeScale;
     gl_PointSize = s * uPixelRatio * (1.0 / -mvPosition.z);
-    gl_PointSize = clamp(gl_PointSize, 1.0, mix(7.0, 9.0, uForm) * uPixelRatio);
+    gl_PointSize = clamp(gl_PointSize, 1.0, mix(4.0, 5.0, uForm) * uPixelRatio);
   }
 `
   );
@@ -235,6 +281,7 @@ var FRAGMENT_SHADER = (
   `
   uniform vec3 uColorInk;
   uniform vec3 uColorAccent;
+  uniform float uSparkle;
 
   varying float vSeed;
   varying float vAccent;
@@ -256,7 +303,7 @@ var FRAGMENT_SHADER = (
 
     // \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));
+    col = mix(col, uColorAccent, spark * mix(0.45, 0.15, vSettle) * uSparkle);
 
     // \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);
@@ -390,6 +437,21 @@ function computeScreenRect(targets, viewportW, viewportH, visibleWorldW) {
   };
 }
 var DEFAULT_TRIGGER_HEIGHT = 2;
+function triangle(x) {
+  const t = x % 2;
+  return t <= 1 ? t : 2 - t;
+}
+function computeAutoplayProgress(elapsedSec, cfg) {
+  const duration = cfg.duration && cfg.duration > 0 ? cfg.duration : 4;
+  const delay = cfg.delay && cfg.delay > 0 ? cfg.delay : 0;
+  const t = elapsedSec - delay;
+  if (t <= 0) return 0;
+  const raw = t / duration;
+  if (cfg.loop) {
+    return cfg.pingpong ? triangle(raw) : raw % 1;
+  }
+  return clamp01(raw);
+}
 function clamp01(x) {
   return x < 0 ? 0 : x > 1 ? 1 : x;
 }
@@ -475,6 +537,7 @@ function buildKeyframeTargets(kf, count, ctx) {
   if (kf.dense) {
     return buildDenseTextTargets(count, lines, {
       font: kf.font ?? DEFAULT_DENSE_FONT,
+      segments: kf.segments,
       worldW: kf.worldW ?? ctx.visW * (ctx.mobile ? 0.86 : 0.62),
       offsetX: kf.offsetX ?? 0,
       offsetY: kf.offsetY ?? 0,
@@ -486,6 +549,7 @@ function buildKeyframeTargets(kf, count, ctx) {
   }
   return buildTextTargets(count, lines, {
     font: kf.font ?? DEFAULT_TEXT_FONT,
+    segments: kf.segments,
     worldW: kf.worldW ?? ctx.visW * 0.7,
     lineHeight: 178,
     offsetX: kf.offsetX ?? 0,
@@ -501,6 +565,7 @@ function GlyphPoints(props) {
     keyframes,
     count,
     colors,
+    style,
     cameraZ,
     cameraFov,
     pointer: pointerEnabled,
@@ -584,6 +649,9 @@ function GlyphPoints(props) {
       uPointer: { value: new THREE.Vector3(0, 0, 0) },
       uPointerActive: { value: 0 },
       uSize: { value: 1 },
+      uSizeScale: { value: style.size },
+      uDrift: { value: style.drift },
+      uSparkle: { value: style.sparkle },
       uPixelRatio: { value: 1 },
       uColorInk: { value: colors.ink.clone() },
       uColorAccent: { value: colors.accent.clone() }
@@ -781,9 +849,19 @@ function GlyphPoints(props) {
     const mat = matRef.current;
     if (!mat) return;
     const u = mat.uniforms;
-    u.uPixelRatio.value = Math.min(window.devicePixelRatio || 1, 2);
+    u.uPixelRatio.value = Math.min(window.devicePixelRatio || 1, 3);
     u.uSize.value = Math.min(size.height / 18, 26);
   }, [size]);
+  useEffect(() => {
+    const mat = matRef.current;
+    if (!mat) return;
+    const u = mat.uniforms;
+    u.uSizeScale.value = style.size;
+    u.uDrift.value = style.drift;
+    u.uSparkle.value = style.sparkle;
+    mat.blending = style.blend === "additive" ? THREE.AdditiveBlending : THREE.NormalBlending;
+    mat.needsUpdate = true;
+  }, [style.size, style.drift, style.sparkle, style.blend]);
   useFrame((state, delta) => {
     const p = pointsRef.current;
     const mat = matRef.current;
@@ -791,7 +869,7 @@ function GlyphPoints(props) {
     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);
+    stage.current = raw;
     const s = stage.current;
     let settle = 0;
     let burst = 0;
@@ -808,6 +886,11 @@ function GlyphPoints(props) {
     if (lastIsText && n >= 2) {
       form = smooth(times[n - 2] ?? 0, times[n - 1] ?? 1, s);
     }
+    const firstIsText = timeline.isText[0] === true;
+    if (firstIsText && n >= 2) {
+      const formStart = 1 - smooth(times[0] ?? 0, times[1] ?? 1, s);
+      form = Math.max(form, formStart);
+    }
     const guard = THREE.MathUtils.clamp(Math.max(settle, form), 0, 1);
     guardRef.current = guard;
     const swapped = raw >= timeline.swapAt ? 1 : 0;
@@ -858,7 +941,7 @@ function GlyphPoints(props) {
       uniforms,
       transparent: true,
       depthWrite: false,
-      blending: THREE.NormalBlending,
+      blending: style.blend === "additive" ? THREE.AdditiveBlending : THREE.NormalBlending,
       vertexShader,
       fragmentShader: FRAGMENT_SHADER
     }
@@ -872,6 +955,12 @@ var DEFAULT_COUNT_MOBILE = 5200;
 var DEFAULT_CAMERA_Z = 7;
 var DEFAULT_CAMERA_FOV = 42;
 var DEFAULT_DPR = [1, 1.75];
+var PRESETS = {
+  default: { size: 1, blend: "normal", drift: 1, sparkle: 1 },
+  minimal: { size: 0.92, blend: "normal", drift: 0.35, sparkle: 0 },
+  lively: { size: 1.05, blend: "normal", drift: 1.4, sparkle: 1.4 },
+  glow: { size: 1.1, blend: "additive", drift: 1.1, sparkle: 1.5 }
+};
 function clamp012(x) {
   return x < 0 ? 0 : x > 1 ? 1 : x;
 }
@@ -890,6 +979,8 @@ function GlyphDust(props) {
   const {
     keyframes,
     driver = { type: "scroll" },
+    preset = "default",
+    style,
     colors,
     count,
     dpr = DEFAULT_DPR,
@@ -913,15 +1004,62 @@ function GlyphDust(props) {
   const resolveRef = useRef(null);
   const manualRef = useRef(0);
   if (driver.type === "manual") manualRef.current = clamp012(driver.progress);
+  const autoplay = driver.type === "autoplay" ? driver : null;
+  const playingRef = useRef(false);
+  const startMsRef = useRef(null);
+  const lastAutoRef = useRef(0);
+  useEffect(() => {
+    if (!autoplay) return;
+    if (autoplay.playOnView === false) {
+      playingRef.current = true;
+      return;
+    }
+    const el = wrapperRef.current;
+    if (el === null || typeof IntersectionObserver === "undefined") {
+      playingRef.current = true;
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (e.isIntersecting && !playingRef.current) {
+            playingRef.current = true;
+            startMsRef.current = null;
+          }
+        }
+      },
+      { threshold: 0.25 }
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [autoplay?.playOnView]);
   const getProgress = useCallback(() => {
     if (driver.type === "manual") return manualRef.current;
+    if (driver.type === "autoplay") {
+      if (!playingRef.current || typeof performance === "undefined") {
+        return lastAutoRef.current;
+      }
+      if (startMsRef.current === null) startMsRef.current = performance.now();
+      const elapsed = (performance.now() - startMsRef.current) / 1e3;
+      lastAutoRef.current = computeAutoplayProgress(elapsed, driver);
+      return lastAutoRef.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]);
+  }, [driver]);
+  const resolvedStyle = useMemo(() => {
+    const base = PRESETS[preset] ?? PRESETS.default;
+    return {
+      size: style?.size ?? base.size,
+      blend: style?.blend ?? base.blend,
+      drift: style?.drift ?? base.drift,
+      sparkle: style?.sparkle ?? base.sparkle
+    };
+  }, [preset, style?.size, style?.blend, style?.drift, style?.sparkle]);
   const resolvedColors = useMemo(
     () => ({
       ink: new THREE.Color(colors?.ink ?? DEFAULT_INK),
@@ -958,6 +1096,7 @@ function GlyphDust(props) {
             keyframes,
             count: particleCount,
             colors: resolvedColors,
+            style: resolvedStyle,
             cameraZ,
             cameraFov,
             pointer: pointerEnabled,
@@ -991,10 +1130,11 @@ function GlyphDust(props) {
       }
     ) : null
   ] });
-  if (driver.type === "manual") {
+  if (driver.type === "manual" || driver.type === "autoplay") {
     return /* @__PURE__ */ jsx(
       "div",
       {
+        ref: wrapperRef,
         className,
         style: { position: "relative", width: "100%", height: "100%" },
         children: scene
@@ -1026,8 +1166,8 @@ function GlyphDust(props) {
 }
 
 // src/index.ts
-var VERSION = "0.1.0";
+var VERSION = "0.3.0";
 
-export { DEFAULT_TRIGGER_HEIGHT, FRAGMENT_SHADER, GLYPH_POSITION_ATTRIBUTE_PREFIX, GlyphDust, VERSION, buildDenseTextTargets, buildGlyphFromDOM, buildTextTargets, buildVertexShader, computeScreenRect, createScrollProgress, glyphPositionAttribute, prefersReducedMotion, useReducedMotion, useScrollProgress, viewSizeAtZ0 };
+export { DEFAULT_TRIGGER_HEIGHT, FRAGMENT_SHADER, GLYPH_POSITION_ATTRIBUTE_PREFIX, GlyphDust, VERSION, buildDenseTextTargets, buildGlyphFromDOM, buildTextTargets, buildVertexShader, computeAutoplayProgress, computeScreenRect, createScrollProgress, glyphPositionAttribute, prefersReducedMotion, useReducedMotion, useScrollProgress, viewSizeAtZ0 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map