glyphdust 0.2.0 → 0.2.1

package/dist/index.d.cts

@@ -137,7 +137,7 @@ declare function buildVertexShader(keyframeCount: number): string;
  * フラグメントシェーダ。キーフレーム数に依存しないため定数。
  * 円形ソフト点 + アクセント色 + きらめき + 奥行き濃淡。
  */
-declare const FRAGMENT_SHADER = "\n  uniform vec3 uColorInk;\n  uniform vec3 uColorAccent;\n\n  varying float vSeed;\n  varying float vAccent;\n  varying float vDepth;\n  varying float vForm;\n  varying float vAlpha;\n  varying float vSettle;\n\n  void main() {\n    // \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\n    vec2 uv = gl_PointCoord - 0.5;\n    float r = length(uv);\n    float alpha = 1.0 - smoothstep(0.12, 0.5, r);\n    if (alpha < 0.02) discard;\n\n    // \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\n    float accentAmt = vAccent * mix(0.85, 0.55, vForm);\n    vec3 col = mix(uColorInk, uColorAccent, accentAmt);\n\n    // \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\n    float spark = step(0.94, vSeed);\n    col = mix(col, uColorAccent, spark * mix(0.45, 0.15, vSettle));\n\n    // \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\n    float floorFade = mix(0.45, 0.78, vSettle);\n    float depthFade = clamp(1.0 - (vDepth - 3.0) * 0.10, floorFade, 1.0);\n\n    // \u6574\u5217\u6642\u306F\u4E0D\u900F\u660E\u5BC4\u308A\u306B\u3057\u3066\u30A8\u30C3\u30B8\u3092\u7DE0\u3081\u308B\u3002\n    float a = alpha * depthFade * vAlpha;\n    a = mix(a, clamp(a * 1.3, 0.0, 1.0), vSettle);\n\n    gl_FragColor = vec4(col, a);\n  }\n";
+declare const FRAGMENT_SHADER = "\n  uniform vec3 uColorInk;\n  uniform vec3 uColorAccent;\n  uniform float uSparkle;\n\n  varying float vSeed;\n  varying float vAccent;\n  varying float vDepth;\n  varying float vForm;\n  varying float vAlpha;\n  varying float vSettle;\n\n  void main() {\n    // \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\n    vec2 uv = gl_PointCoord - 0.5;\n    float r = length(uv);\n    float alpha = 1.0 - smoothstep(0.12, 0.5, r);\n    if (alpha < 0.02) discard;\n\n    // \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\n    float accentAmt = vAccent * mix(0.85, 0.55, vForm);\n    vec3 col = mix(uColorInk, uColorAccent, accentAmt);\n\n    // \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\n    float spark = step(0.94, vSeed);\n    col = mix(col, uColorAccent, spark * mix(0.45, 0.15, vSettle) * uSparkle);\n\n    // \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\n    float floorFade = mix(0.45, 0.78, vSettle);\n    float depthFade = clamp(1.0 - (vDepth - 3.0) * 0.10, floorFade, 1.0);\n\n    // \u6574\u5217\u6642\u306F\u4E0D\u900F\u660E\u5BC4\u308A\u306B\u3057\u3066\u30A8\u30C3\u30B8\u3092\u7DE0\u3081\u308B\u3002\n    float a = alpha * depthFade * vAlpha;\n    a = mix(a, clamp(a * 1.3, 0.0, 1.0), vSettle);\n\n    gl_FragColor = vec4(col, a);\n  }\n";
 
 /**
  * dom-overlay.ts — 実 DOM 文字との重ね合わせ／受け渡しのための幾何ユーティリティ。
@@ -248,8 +248,31 @@ interface ManualDriverConfig {
     /** 0..1 の進捗。 */
     progress: number;
 }
+/**
+ * 自動再生ドライバ設定。スクロール不要で、時間ベースに進捗 0→1 を進める。
+ * 「普通にテキストとして、どんな箱にも置いて勝手に動かす」用途の標準。
+ * 既定では画面内に入った瞬間に再生開始（`playOnView`）。
+ */
+interface AutoplayDriverConfig {
+    type: "autoplay";
+    /** 0→1 にかける秒数。既定 4。 */
+    duration?: number;
+    /** 再生開始までの遅延秒。既定 0。 */
+    delay?: number;
+    /** ループ再生。既定 false（1 回で 1.0 に張り付く）。 */
+    loop?: boolean;
+    /** ループ時に 0→1→0 を往復する（loop 必須）。既定 false。 */
+    pingpong?: boolean;
+    /** 画面内に入ってから再生開始（IntersectionObserver）。既定 true。 */
+    playOnView?: boolean;
+}
 /** ドライバ設定の合併型。 */
-type DriverConfig = ScrollDriverConfig | ManualDriverConfig;
+type DriverConfig = ScrollDriverConfig | ManualDriverConfig | AutoplayDriverConfig;
+/**
+ * 自動再生ドライバの進捗を、経過秒から純粋に算出する。
+ * `loop`/`pingpong`/`delay` を解決し 0..1 を返す。SSR セーフ（時計は呼び出し側が渡す）。
+ */
+declare function computeAutoplayProgress(elapsedSec: number, cfg: Pick<AutoplayDriverConfig, "duration" | "delay" | "loop" | "pingpong">): number;
 /**
  * 要素の sticky スクロール進捗 0→1 を返すゲッターを作る。
  * 進捗 = `-rect.top / (rect.height - innerHeight)`（要素上端が viewport 上端を通過し切るまでで 0→1）。
@@ -340,6 +363,32 @@ interface GlyphCamera {
     /** 縦 fov（度）。既定 42。 */
     fov?: number;
 }
+/**
+ * 粒子の見た目・モーションの質感。
+ * すべて省略可。{@link GlyphPreset} の上に個別上書きできる（プリセット＋上書き）。
+ */
+interface GlyphStyle {
+    /** 点サイズ倍率。既定 1。大きいほど太い粒（可読性↓・密度感↑）。 */
+    size?: number;
+    /**
+     * 合成モード。
+     *  - `"normal"`（既定）… 明背景で可読性が高い。
+     *  - `"additive"` … 重なりで発光する。暗背景のアンビエント/グロー向け。
+     */
+    blend?: "normal" | "additive";
+    /** アイドル/飛散時の漂い量 0..1。既定 1。0 で静止（端正）。 */
+    drift?: number;
+    /** きらめく粒の強さ 0..1。既定 1。0 で無効（ミニマル）。 */
+    sparkle?: number;
+}
+/**
+ * 質感プリセット。`style` で部分上書きできる。
+ *  - `"default"` … 現行の標準（バランス型）。
+ *  - `"minimal"` … 漂い・きらめき控えめで端正。明背景の本文向け。
+ *  - `"lively"`  … 漂い・きらめき強めで躍動的。
+ *  - `"glow"`    … additive 合成の発光。暗背景のヒーロー/アンビエント向け。
+ */
+type GlyphPreset = "default" | "minimal" | "lively" | "glow";
 /** インタラクション設定。 */
 interface GlyphInteraction {
     /** ポインタ追従（近傍反発）。既定 true。 */
@@ -353,6 +402,10 @@ interface GlyphDustProps {
     keyframes: Keyframe[];
     /** 進捗ドライバ。既定 `{ type: "scroll" }`。 */
     driver?: DriverConfig;
+    /** 質感プリセット。既定 `"default"`。`style` で部分上書き可。 */
+    preset?: GlyphPreset;
+    /** 粒子の見た目・モーションの個別上書き（プリセットより優先）。 */
+    style?: GlyphStyle;
     /** 配色。 */
     colors?: GlyphColors;
     /** デバイス別粒子数。 */
@@ -380,10 +433,9 @@ declare function GlyphDust(props: GlyphDustProps): react.JSX.Element;
  * glyphdust — scroll-driven text → particles → glyph → real-text resolve
  * for react-three-fiber.
  *
- * 公開 API はこのファイルから re-export する（Task-007）。
- * 雛形段階のプレースホルダ。実装は Phase 1 (Task-002〜) で追加する。
+ * 公開 API はこのファイルから re-export する。
  */
 /** ライブラリのバージョン（package.json と一致させる）。 */
-declare const VERSION = "0.1.0";
+declare const VERSION = "0.2.1";
 
-export { DEFAULT_TRIGGER_HEIGHT, type DenseTextTargetOptions, type DomGlyphOptions, type DriverConfig, FRAGMENT_SHADER, GLYPH_POSITION_ATTRIBUTE_PREFIX, type GlyphCamera, type GlyphColors, type GlyphCount, GlyphDust, type GlyphDustProps, type GlyphInteraction, type GlyphScreenRect, type Keyframe, type ManualDriverConfig, type Random, type ScatterKeyframe, type ScrollDriverConfig, type TextKeyframe, type TextTargetOptions, VERSION, type ViewSize, buildDenseTextTargets, buildGlyphFromDOM, buildTextTargets, buildVertexShader, computeScreenRect, createScrollProgress, glyphPositionAttribute, prefersReducedMotion, useReducedMotion, useScrollProgress, viewSizeAtZ0 };
+export { type AutoplayDriverConfig, DEFAULT_TRIGGER_HEIGHT, type DenseTextTargetOptions, type DomGlyphOptions, type DriverConfig, FRAGMENT_SHADER, GLYPH_POSITION_ATTRIBUTE_PREFIX, type GlyphCamera, type GlyphColors, type GlyphCount, GlyphDust, type GlyphDustProps, type GlyphInteraction, type GlyphPreset, type GlyphScreenRect, type GlyphStyle, type Keyframe, type ManualDriverConfig, type Random, type ScatterKeyframe, type ScrollDriverConfig, type TextKeyframe, type TextTargetOptions, VERSION, type ViewSize, buildDenseTextTargets, buildGlyphFromDOM, buildTextTargets, buildVertexShader, computeAutoplayProgress, computeScreenRect, createScrollProgress, glyphPositionAttribute, prefersReducedMotion, useReducedMotion, useScrollProgress, viewSizeAtZ0 };

package/dist/index.d.ts

@@ -137,7 +137,7 @@ declare function buildVertexShader(keyframeCount: number): string;
  * フラグメントシェーダ。キーフレーム数に依存しないため定数。
  * 円形ソフト点 + アクセント色 + きらめき + 奥行き濃淡。
  */
-declare const FRAGMENT_SHADER = "\n  uniform vec3 uColorInk;\n  uniform vec3 uColorAccent;\n\n  varying float vSeed;\n  varying float vAccent;\n  varying float vDepth;\n  varying float vForm;\n  varying float vAlpha;\n  varying float vSettle;\n\n  void main() {\n    // \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\n    vec2 uv = gl_PointCoord - 0.5;\n    float r = length(uv);\n    float alpha = 1.0 - smoothstep(0.12, 0.5, r);\n    if (alpha < 0.02) discard;\n\n    // \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\n    float accentAmt = vAccent * mix(0.85, 0.55, vForm);\n    vec3 col = mix(uColorInk, uColorAccent, accentAmt);\n\n    // \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\n    float spark = step(0.94, vSeed);\n    col = mix(col, uColorAccent, spark * mix(0.45, 0.15, vSettle));\n\n    // \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\n    float floorFade = mix(0.45, 0.78, vSettle);\n    float depthFade = clamp(1.0 - (vDepth - 3.0) * 0.10, floorFade, 1.0);\n\n    // \u6574\u5217\u6642\u306F\u4E0D\u900F\u660E\u5BC4\u308A\u306B\u3057\u3066\u30A8\u30C3\u30B8\u3092\u7DE0\u3081\u308B\u3002\n    float a = alpha * depthFade * vAlpha;\n    a = mix(a, clamp(a * 1.3, 0.0, 1.0), vSettle);\n\n    gl_FragColor = vec4(col, a);\n  }\n";
+declare const FRAGMENT_SHADER = "\n  uniform vec3 uColorInk;\n  uniform vec3 uColorAccent;\n  uniform float uSparkle;\n\n  varying float vSeed;\n  varying float vAccent;\n  varying float vDepth;\n  varying float vForm;\n  varying float vAlpha;\n  varying float vSettle;\n\n  void main() {\n    // \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\n    vec2 uv = gl_PointCoord - 0.5;\n    float r = length(uv);\n    float alpha = 1.0 - smoothstep(0.12, 0.5, r);\n    if (alpha < 0.02) discard;\n\n    // \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\n    float accentAmt = vAccent * mix(0.85, 0.55, vForm);\n    vec3 col = mix(uColorInk, uColorAccent, accentAmt);\n\n    // \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\n    float spark = step(0.94, vSeed);\n    col = mix(col, uColorAccent, spark * mix(0.45, 0.15, vSettle) * uSparkle);\n\n    // \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\n    float floorFade = mix(0.45, 0.78, vSettle);\n    float depthFade = clamp(1.0 - (vDepth - 3.0) * 0.10, floorFade, 1.0);\n\n    // \u6574\u5217\u6642\u306F\u4E0D\u900F\u660E\u5BC4\u308A\u306B\u3057\u3066\u30A8\u30C3\u30B8\u3092\u7DE0\u3081\u308B\u3002\n    float a = alpha * depthFade * vAlpha;\n    a = mix(a, clamp(a * 1.3, 0.0, 1.0), vSettle);\n\n    gl_FragColor = vec4(col, a);\n  }\n";
 
 /**
  * dom-overlay.ts — 実 DOM 文字との重ね合わせ／受け渡しのための幾何ユーティリティ。
@@ -248,8 +248,31 @@ interface ManualDriverConfig {
     /** 0..1 の進捗。 */
     progress: number;
 }
+/**
+ * 自動再生ドライバ設定。スクロール不要で、時間ベースに進捗 0→1 を進める。
+ * 「普通にテキストとして、どんな箱にも置いて勝手に動かす」用途の標準。
+ * 既定では画面内に入った瞬間に再生開始（`playOnView`）。
+ */
+interface AutoplayDriverConfig {
+    type: "autoplay";
+    /** 0→1 にかける秒数。既定 4。 */
+    duration?: number;
+    /** 再生開始までの遅延秒。既定 0。 */
+    delay?: number;
+    /** ループ再生。既定 false（1 回で 1.0 に張り付く）。 */
+    loop?: boolean;
+    /** ループ時に 0→1→0 を往復する（loop 必須）。既定 false。 */
+    pingpong?: boolean;
+    /** 画面内に入ってから再生開始（IntersectionObserver）。既定 true。 */
+    playOnView?: boolean;
+}
 /** ドライバ設定の合併型。 */
-type DriverConfig = ScrollDriverConfig | ManualDriverConfig;
+type DriverConfig = ScrollDriverConfig | ManualDriverConfig | AutoplayDriverConfig;
+/**
+ * 自動再生ドライバの進捗を、経過秒から純粋に算出する。
+ * `loop`/`pingpong`/`delay` を解決し 0..1 を返す。SSR セーフ（時計は呼び出し側が渡す）。
+ */
+declare function computeAutoplayProgress(elapsedSec: number, cfg: Pick<AutoplayDriverConfig, "duration" | "delay" | "loop" | "pingpong">): number;
 /**
  * 要素の sticky スクロール進捗 0→1 を返すゲッターを作る。
  * 進捗 = `-rect.top / (rect.height - innerHeight)`（要素上端が viewport 上端を通過し切るまでで 0→1）。
@@ -340,6 +363,32 @@ interface GlyphCamera {
     /** 縦 fov（度）。既定 42。 */
     fov?: number;
 }
+/**
+ * 粒子の見た目・モーションの質感。
+ * すべて省略可。{@link GlyphPreset} の上に個別上書きできる（プリセット＋上書き）。
+ */
+interface GlyphStyle {
+    /** 点サイズ倍率。既定 1。大きいほど太い粒（可読性↓・密度感↑）。 */
+    size?: number;
+    /**
+     * 合成モード。
+     *  - `"normal"`（既定）… 明背景で可読性が高い。
+     *  - `"additive"` … 重なりで発光する。暗背景のアンビエント/グロー向け。
+     */
+    blend?: "normal" | "additive";
+    /** アイドル/飛散時の漂い量 0..1。既定 1。0 で静止（端正）。 */
+    drift?: number;
+    /** きらめく粒の強さ 0..1。既定 1。0 で無効（ミニマル）。 */
+    sparkle?: number;
+}
+/**
+ * 質感プリセット。`style` で部分上書きできる。
+ *  - `"default"` … 現行の標準（バランス型）。
+ *  - `"minimal"` … 漂い・きらめき控えめで端正。明背景の本文向け。
+ *  - `"lively"`  … 漂い・きらめき強めで躍動的。
+ *  - `"glow"`    … additive 合成の発光。暗背景のヒーロー/アンビエント向け。
+ */
+type GlyphPreset = "default" | "minimal" | "lively" | "glow";
 /** インタラクション設定。 */
 interface GlyphInteraction {
     /** ポインタ追従（近傍反発）。既定 true。 */
@@ -353,6 +402,10 @@ interface GlyphDustProps {
     keyframes: Keyframe[];
     /** 進捗ドライバ。既定 `{ type: "scroll" }`。 */
     driver?: DriverConfig;
+    /** 質感プリセット。既定 `"default"`。`style` で部分上書き可。 */
+    preset?: GlyphPreset;
+    /** 粒子の見た目・モーションの個別上書き（プリセットより優先）。 */
+    style?: GlyphStyle;
     /** 配色。 */
     colors?: GlyphColors;
     /** デバイス別粒子数。 */
@@ -380,10 +433,9 @@ declare function GlyphDust(props: GlyphDustProps): react.JSX.Element;
  * glyphdust — scroll-driven text → particles → glyph → real-text resolve
  * for react-three-fiber.
  *
- * 公開 API はこのファイルから re-export する（Task-007）。
- * 雛形段階のプレースホルダ。実装は Phase 1 (Task-002〜) で追加する。
+ * 公開 API はこのファイルから re-export する。
  */
 /** ライブラリのバージョン（package.json と一致させる）。 */
-declare const VERSION = "0.1.0";
+declare const VERSION = "0.2.1";
 
-export { DEFAULT_TRIGGER_HEIGHT, type DenseTextTargetOptions, type DomGlyphOptions, type DriverConfig, FRAGMENT_SHADER, GLYPH_POSITION_ATTRIBUTE_PREFIX, type GlyphCamera, type GlyphColors, type GlyphCount, GlyphDust, type GlyphDustProps, type GlyphInteraction, type GlyphScreenRect, type Keyframe, type ManualDriverConfig, type Random, type ScatterKeyframe, type ScrollDriverConfig, type TextKeyframe, type TextTargetOptions, VERSION, type ViewSize, buildDenseTextTargets, buildGlyphFromDOM, buildTextTargets, buildVertexShader, computeScreenRect, createScrollProgress, glyphPositionAttribute, prefersReducedMotion, useReducedMotion, useScrollProgress, viewSizeAtZ0 };
+export { type AutoplayDriverConfig, DEFAULT_TRIGGER_HEIGHT, type DenseTextTargetOptions, type DomGlyphOptions, type DriverConfig, FRAGMENT_SHADER, GLYPH_POSITION_ATTRIBUTE_PREFIX, type GlyphCamera, type GlyphColors, type GlyphCount, GlyphDust, type GlyphDustProps, type GlyphInteraction, type GlyphPreset, type GlyphScreenRect, type GlyphStyle, type Keyframe, type ManualDriverConfig, type Random, type ScatterKeyframe, type ScrollDriverConfig, type TextKeyframe, type TextTargetOptions, VERSION, type ViewSize, buildDenseTextTargets, buildGlyphFromDOM, buildTextTargets, buildVertexShader, computeAutoplayProgress, computeScreenRect, createScrollProgress, glyphPositionAttribute, prefersReducedMotion, useReducedMotion, useScrollProgress, viewSizeAtZ0 };

package/dist/index.js

@@ -160,6 +160,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 +197,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 +225,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 +239,7 @@ var FRAGMENT_SHADER = (
   `
   uniform vec3 uColorInk;
   uniform vec3 uColorAccent;
+  uniform float uSparkle;
 
   varying float vSeed;
   varying float vAccent;
@@ -256,7 +261,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 +395,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;
 }
@@ -501,6 +521,7 @@ function GlyphPoints(props) {
     keyframes,
     count,
     colors,
+    style,
     cameraZ,
     cameraFov,
     pointer: pointerEnabled,
@@ -584,6 +605,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 +805,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 +825,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 +842,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 +897,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 +911,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 +935,8 @@ function GlyphDust(props) {
   const {
     keyframes,
     driver = { type: "scroll" },
+    preset = "default",
+    style,
     colors,
     count,
     dpr = DEFAULT_DPR,
@@ -913,15 +960,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 +1052,7 @@ function GlyphDust(props) {
             keyframes,
             count: particleCount,
             colors: resolvedColors,
+            style: resolvedStyle,
             cameraZ,
             cameraFov,
             pointer: pointerEnabled,
@@ -991,10 +1086,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 +1122,8 @@ function GlyphDust(props) {
 }
 
 // src/index.ts
-var VERSION = "0.1.0";
+var VERSION = "0.2.1";
 
-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