glyphdust 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +64 -0
- package/README.md +82 -6
- package/dist/index.cjs +169 -28
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +222 -144
- package/dist/index.d.ts +222 -144
- package/dist/index.js +169 -29
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,216 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { RefObject, ReactNode } from 'react';
|
|
3
3
|
|
|
4
|
+
/**
|
|
5
|
+
* drivers.ts — 進捗 0→1 の供給源。
|
|
6
|
+
*
|
|
7
|
+
* - scroll … sticky トリガー領域のスクロール量から進捗を算出(標準)。
|
|
8
|
+
* - manual … 呼び出し側が `progress` を注入(時間・GSAP・任意)。
|
|
9
|
+
*
|
|
10
|
+
* 進捗ゲッターは「毎フレーム呼ばれる純粋な関数」として表現する(useFrame から polling)。
|
|
11
|
+
* SSR セーフ(`window` 不在時は 0 を返す)。
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
/** sticky トリガー領域の既定高さ(×100vh)。 */
|
|
15
|
+
declare const DEFAULT_TRIGGER_HEIGHT = 2;
|
|
16
|
+
/** スクロール連動ドライバ設定。 */
|
|
17
|
+
interface ScrollDriverConfig {
|
|
18
|
+
type: "scroll";
|
|
19
|
+
/**
|
|
20
|
+
* sticky トリガー領域の高さ(×100vh)。大きいほど演出がゆっくり進む。既定 {@link DEFAULT_TRIGGER_HEIGHT}。
|
|
21
|
+
* (ラッパー要素の高さ生成に使う。進捗式自体は要素実寸から算出するため値に依存しない。)
|
|
22
|
+
*/
|
|
23
|
+
triggerHeight?: number;
|
|
24
|
+
}
|
|
25
|
+
/** 手動ドライバ設定(progress を外部制御)。 */
|
|
26
|
+
interface ManualDriverConfig {
|
|
27
|
+
type: "manual";
|
|
28
|
+
/** 0..1 の進捗。 */
|
|
29
|
+
progress: number;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* 自動再生ドライバ設定。スクロール不要で、時間ベースに進捗 0→1 を進める。
|
|
33
|
+
* 「普通にテキストとして、どんな箱にも置いて勝手に動かす」用途の標準。
|
|
34
|
+
* 既定では画面内に入った瞬間に再生開始(`playOnView`)。
|
|
35
|
+
*/
|
|
36
|
+
interface AutoplayDriverConfig {
|
|
37
|
+
type: "autoplay";
|
|
38
|
+
/** 0→1 にかける秒数。既定 4。 */
|
|
39
|
+
duration?: number;
|
|
40
|
+
/** 再生開始までの遅延秒。既定 0。 */
|
|
41
|
+
delay?: number;
|
|
42
|
+
/** ループ再生。既定 false(1 回で 1.0 に張り付く)。 */
|
|
43
|
+
loop?: boolean;
|
|
44
|
+
/** ループ時に 0→1→0 を往復する(loop 必須)。既定 false。 */
|
|
45
|
+
pingpong?: boolean;
|
|
46
|
+
/** 画面内に入ってから再生開始(IntersectionObserver)。既定 true。 */
|
|
47
|
+
playOnView?: boolean;
|
|
48
|
+
}
|
|
49
|
+
/** ドライバ設定の合併型。 */
|
|
50
|
+
type DriverConfig = ScrollDriverConfig | ManualDriverConfig | AutoplayDriverConfig;
|
|
51
|
+
/**
|
|
52
|
+
* 自動再生ドライバの進捗を、経過秒から純粋に算出する。
|
|
53
|
+
* `loop`/`pingpong`/`delay` を解決し 0..1 を返す。SSR セーフ(時計は呼び出し側が渡す)。
|
|
54
|
+
*/
|
|
55
|
+
declare function computeAutoplayProgress(elapsedSec: number, cfg: Pick<AutoplayDriverConfig, "duration" | "delay" | "loop" | "pingpong">): number;
|
|
56
|
+
/**
|
|
57
|
+
* 要素の sticky スクロール進捗 0→1 を返すゲッターを作る。
|
|
58
|
+
* 進捗 = `-rect.top / (rect.height - innerHeight)`(要素上端が viewport 上端を通過し切るまでで 0→1)。
|
|
59
|
+
* SSR / 要素 null 時は 0。
|
|
60
|
+
*/
|
|
61
|
+
declare function createScrollProgress(element: HTMLElement | null): () => number;
|
|
62
|
+
/**
|
|
63
|
+
* sticky トリガー要素の ref からスクロール進捗ゲッターを返す React フック。
|
|
64
|
+
* 返り値は ref を遅延参照する安定した関数(useFrame からそのまま polling できる)。
|
|
65
|
+
*/
|
|
66
|
+
declare function useScrollProgress(ref: RefObject<HTMLElement | null>): () => number;
|
|
67
|
+
|
|
68
|
+
/**
|
|
69
|
+
* types.ts — glyphdust の公開型。
|
|
70
|
+
*/
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* 文字塊の一部(ラン)。{@link TextKeyframe.segments} で使う。
|
|
74
|
+
* 区間ごとに別の `font` を当て、1 つの字形の中で書体を混在させる。
|
|
75
|
+
*/
|
|
76
|
+
interface TextSegment {
|
|
77
|
+
/** この区間のテキスト。`\n` で行分割(次の区間は次行へ続く)。 */
|
|
78
|
+
text: string;
|
|
79
|
+
/** この区間の Canvas2D `font` 文字列。未指定なら親キーフレームの `font`(さらに無ければ既定)。 */
|
|
80
|
+
font?: string;
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* テキストキーフレーム。文字を粒子字形にする。
|
|
84
|
+
* 改行は `\n` で明示する(`"次のユーザーは、\n人じゃない。"`)。
|
|
85
|
+
*/
|
|
86
|
+
interface TextKeyframe {
|
|
87
|
+
type: "text";
|
|
88
|
+
/** 描画テキスト。`\n` で行分割。 */
|
|
89
|
+
text: string;
|
|
90
|
+
/**
|
|
91
|
+
* 区間ごとに書体を変えて 1 つの字形を組む(書体混在)。
|
|
92
|
+
* 指定すると粒子のスタンプは `segments` から生成され、各区間はインラインに流れる
|
|
93
|
+
* (区間内の `\n` で改行)。`text` は引き続きアクセシブルな文言・`resolveToDom` の
|
|
94
|
+
* 解決先テキストとして使われる(`segments` の連結と一致させるのが望ましい)。
|
|
95
|
+
* `domSelector` 併用時は無効(DOM 側のレイアウトを使う)。`dense` とは併用しない。
|
|
96
|
+
*/
|
|
97
|
+
segments?: TextSegment[];
|
|
98
|
+
/** Canvas2D の `font` 文字列。未指定なら密度に応じた既定。`segments` の既定書体にもなる。 */
|
|
99
|
+
font?: string;
|
|
100
|
+
/** 字形を収める可視ワールド幅。未指定なら可視幅からの既定比率。 */
|
|
101
|
+
worldW?: number;
|
|
102
|
+
/** ワールド x オフセット(右が +)。 */
|
|
103
|
+
offsetX?: number;
|
|
104
|
+
/** ワールド y オフセット(上が +)。 */
|
|
105
|
+
offsetY?: number;
|
|
106
|
+
/**
|
|
107
|
+
* 実 DOM 要素のセレクタ。指定すると、その要素の矩形・フォントに
|
|
108
|
+
* ピクセル単位で重なる字形を生成する(クロスフェード中に文字が動かない)。
|
|
109
|
+
*/
|
|
110
|
+
domSelector?: string;
|
|
111
|
+
/**
|
|
112
|
+
* フィナーレでこの字形を実 DOM 文字へ解決(粒子を消し実テキストへクロスフェード)。
|
|
113
|
+
* 通常は最終キーフレームに付ける。
|
|
114
|
+
*/
|
|
115
|
+
resolveToDom?: boolean;
|
|
116
|
+
/** 高密度・均一サンプリング(穴の目立たないワードマーク向け)。 */
|
|
117
|
+
dense?: boolean;
|
|
118
|
+
}
|
|
119
|
+
/** 飛散キーフレーム。粒子をランダム雲へ拡散する。 */
|
|
120
|
+
interface ScatterKeyframe {
|
|
121
|
+
type: "scatter";
|
|
122
|
+
/** 拡散半径の倍率。既定 1。 */
|
|
123
|
+
spread?: number;
|
|
124
|
+
}
|
|
125
|
+
/** キーフレーム(テキスト or 飛散)。 */
|
|
126
|
+
type Keyframe = TextKeyframe | ScatterKeyframe;
|
|
127
|
+
/** 配色。 */
|
|
128
|
+
interface GlyphColors {
|
|
129
|
+
/** 主体色(多数の粒)。既定 `#1b2330`。 */
|
|
130
|
+
ink?: string;
|
|
131
|
+
/** アクセント色(少数の粒)。既定 `#0055ff`。 */
|
|
132
|
+
accent?: string;
|
|
133
|
+
/** アクセント色になる粒の割合 0..1。既定 0.18。 */
|
|
134
|
+
accentRatio?: number;
|
|
135
|
+
}
|
|
136
|
+
/** デバイス別の粒子数。 */
|
|
137
|
+
interface GlyphCount {
|
|
138
|
+
/** デスクトップの粒子数。既定 11000。 */
|
|
139
|
+
desktop?: number;
|
|
140
|
+
/** モバイル(<=768px)の粒子数。既定 5200。 */
|
|
141
|
+
mobile?: number;
|
|
142
|
+
}
|
|
143
|
+
/** カメラ設定。 */
|
|
144
|
+
interface GlyphCamera {
|
|
145
|
+
/** z 位置。既定 7。 */
|
|
146
|
+
z?: number;
|
|
147
|
+
/** 縦 fov(度)。既定 42。 */
|
|
148
|
+
fov?: number;
|
|
149
|
+
}
|
|
150
|
+
/**
|
|
151
|
+
* 粒子の見た目・モーションの質感。
|
|
152
|
+
* すべて省略可。{@link GlyphPreset} の上に個別上書きできる(プリセット+上書き)。
|
|
153
|
+
*/
|
|
154
|
+
interface GlyphStyle {
|
|
155
|
+
/** 点サイズ倍率。既定 1。大きいほど太い粒(可読性↓・密度感↑)。 */
|
|
156
|
+
size?: number;
|
|
157
|
+
/**
|
|
158
|
+
* 合成モード。
|
|
159
|
+
* - `"normal"`(既定)… 明背景で可読性が高い。
|
|
160
|
+
* - `"additive"` … 重なりで発光する。暗背景のアンビエント/グロー向け。
|
|
161
|
+
*/
|
|
162
|
+
blend?: "normal" | "additive";
|
|
163
|
+
/** アイドル/飛散時の漂い量 0..1。既定 1。0 で静止(端正)。 */
|
|
164
|
+
drift?: number;
|
|
165
|
+
/** きらめく粒の強さ 0..1。既定 1。0 で無効(ミニマル)。 */
|
|
166
|
+
sparkle?: number;
|
|
167
|
+
}
|
|
168
|
+
/**
|
|
169
|
+
* 質感プリセット。`style` で部分上書きできる。
|
|
170
|
+
* - `"default"` … 現行の標準(バランス型)。
|
|
171
|
+
* - `"minimal"` … 漂い・きらめき控えめで端正。明背景の本文向け。
|
|
172
|
+
* - `"lively"` … 漂い・きらめき強めで躍動的。
|
|
173
|
+
* - `"glow"` … additive 合成の発光。暗背景のヒーロー/アンビエント向け。
|
|
174
|
+
*/
|
|
175
|
+
type GlyphPreset = "default" | "minimal" | "lively" | "glow";
|
|
176
|
+
/** インタラクション設定。 */
|
|
177
|
+
interface GlyphInteraction {
|
|
178
|
+
/** ポインタ追従(近傍反発)。既定 true。 */
|
|
179
|
+
pointer?: boolean;
|
|
180
|
+
/** ドラッグ回転(慣性つき)。既定 true。 */
|
|
181
|
+
drag?: boolean;
|
|
182
|
+
}
|
|
183
|
+
/** {@link GlyphDust} の props。 */
|
|
184
|
+
interface GlyphDustProps {
|
|
185
|
+
/** キーフレーム列(最低 1、通常 text → scatter → text)。 */
|
|
186
|
+
keyframes: Keyframe[];
|
|
187
|
+
/** 進捗ドライバ。既定 `{ type: "scroll" }`。 */
|
|
188
|
+
driver?: DriverConfig;
|
|
189
|
+
/** 質感プリセット。既定 `"default"`。`style` で部分上書き可。 */
|
|
190
|
+
preset?: GlyphPreset;
|
|
191
|
+
/** 粒子の見た目・モーションの個別上書き(プリセットより優先)。 */
|
|
192
|
+
style?: GlyphStyle;
|
|
193
|
+
/** 配色。 */
|
|
194
|
+
colors?: GlyphColors;
|
|
195
|
+
/** デバイス別粒子数。 */
|
|
196
|
+
count?: GlyphCount;
|
|
197
|
+
/** r3f Canvas の dpr 範囲。既定 `[1, 1.75]`。 */
|
|
198
|
+
dpr?: [number, number];
|
|
199
|
+
/** インタラクション設定。 */
|
|
200
|
+
interaction?: GlyphInteraction;
|
|
201
|
+
/** カメラ設定。 */
|
|
202
|
+
camera?: GlyphCamera;
|
|
203
|
+
/**
|
|
204
|
+
* 各キーフレームの正規化時刻 0..1(補間境界)。
|
|
205
|
+
* 未指定なら等間隔。長さは keyframes と一致させる。
|
|
206
|
+
*/
|
|
207
|
+
timing?: number[];
|
|
208
|
+
/** reduced-motion / WebGL 不可時に描画するフォールバック(真っ白防止)。 */
|
|
209
|
+
fallback?: ReactNode;
|
|
210
|
+
/** ラッパーに付けるクラス名。 */
|
|
211
|
+
className?: string;
|
|
212
|
+
}
|
|
213
|
+
|
|
4
214
|
/**
|
|
5
215
|
* sampling.ts — 文字 → 粒子ターゲット座標の生成。
|
|
6
216
|
*
|
|
@@ -14,12 +224,18 @@ import { RefObject, ReactNode } from 'react';
|
|
|
14
224
|
*
|
|
15
225
|
* いずれも SSR セーフ(`document` 不在時は原点クラスタ or 空配列を返し、例外を投げない)。
|
|
16
226
|
*/
|
|
227
|
+
|
|
17
228
|
/** 0..1 を返す乱数生成器。テスト時に決定論的な関数を注入できる。 */
|
|
18
229
|
type Random = () => number;
|
|
19
230
|
/** {@link buildTextTargets} のオプション。 */
|
|
20
231
|
interface TextTargetOptions {
|
|
21
232
|
/** Canvas2D の `font` 文字列(例 `"600 64px 'Noto Sans JP', sans-serif"`)。 */
|
|
22
233
|
font: string;
|
|
234
|
+
/**
|
|
235
|
+
* 書体混在の区間列。指定すると `lines` の代わりに各区間を `font` 付きで
|
|
236
|
+
* インライン描画する(区間内 `\n` で改行)。区間の `font` 省略時は上の `font`。
|
|
237
|
+
*/
|
|
238
|
+
segments?: TextSegment[] | undefined;
|
|
23
239
|
/** 字形を収める可視ワールド幅。canvas 幅 `cw` 全体がこの幅にマップされる。 */
|
|
24
240
|
worldW: number;
|
|
25
241
|
/** 行送り(px, canvas 座標)。複数行のとき行間に使う。 */
|
|
@@ -45,6 +261,8 @@ interface TextTargetOptions {
|
|
|
45
261
|
interface DenseTextTargetOptions {
|
|
46
262
|
/** Canvas2D の `font` 文字列。 */
|
|
47
263
|
font: string;
|
|
264
|
+
/** 書体混在の区間列({@link TextTargetOptions.segments} と同じ)。 */
|
|
265
|
+
segments?: TextSegment[] | undefined;
|
|
48
266
|
/** 字形を収める可視ワールド幅。 */
|
|
49
267
|
worldW: number;
|
|
50
268
|
/** ワールド y オフセット(上が +)。既定 0。 */
|
|
@@ -137,7 +355,7 @@ declare function buildVertexShader(keyframeCount: number): string;
|
|
|
137
355
|
* フラグメントシェーダ。キーフレーム数に依存しないため定数。
|
|
138
356
|
* 円形ソフト点 + アクセント色 + きらめき + 奥行き濃淡。
|
|
139
357
|
*/
|
|
140
|
-
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";
|
|
358
|
+
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";
|
|
141
359
|
|
|
142
360
|
/**
|
|
143
361
|
* dom-overlay.ts — 実 DOM 文字との重ね合わせ/受け渡しのための幾何ユーティリティ。
|
|
@@ -221,47 +439,6 @@ interface GlyphScreenRect {
|
|
|
221
439
|
*/
|
|
222
440
|
declare function computeScreenRect(targets: Float32Array, viewportW: number, viewportH: number, visibleWorldW: number): GlyphScreenRect | null;
|
|
223
441
|
|
|
224
|
-
/**
|
|
225
|
-
* drivers.ts — 進捗 0→1 の供給源。
|
|
226
|
-
*
|
|
227
|
-
* - scroll … sticky トリガー領域のスクロール量から進捗を算出(標準)。
|
|
228
|
-
* - manual … 呼び出し側が `progress` を注入(時間・GSAP・任意)。
|
|
229
|
-
*
|
|
230
|
-
* 進捗ゲッターは「毎フレーム呼ばれる純粋な関数」として表現する(useFrame から polling)。
|
|
231
|
-
* SSR セーフ(`window` 不在時は 0 を返す)。
|
|
232
|
-
*/
|
|
233
|
-
|
|
234
|
-
/** sticky トリガー領域の既定高さ(×100vh)。 */
|
|
235
|
-
declare const DEFAULT_TRIGGER_HEIGHT = 2;
|
|
236
|
-
/** スクロール連動ドライバ設定。 */
|
|
237
|
-
interface ScrollDriverConfig {
|
|
238
|
-
type: "scroll";
|
|
239
|
-
/**
|
|
240
|
-
* sticky トリガー領域の高さ(×100vh)。大きいほど演出がゆっくり進む。既定 {@link DEFAULT_TRIGGER_HEIGHT}。
|
|
241
|
-
* (ラッパー要素の高さ生成に使う。進捗式自体は要素実寸から算出するため値に依存しない。)
|
|
242
|
-
*/
|
|
243
|
-
triggerHeight?: number;
|
|
244
|
-
}
|
|
245
|
-
/** 手動ドライバ設定(progress を外部制御)。 */
|
|
246
|
-
interface ManualDriverConfig {
|
|
247
|
-
type: "manual";
|
|
248
|
-
/** 0..1 の進捗。 */
|
|
249
|
-
progress: number;
|
|
250
|
-
}
|
|
251
|
-
/** ドライバ設定の合併型。 */
|
|
252
|
-
type DriverConfig = ScrollDriverConfig | ManualDriverConfig;
|
|
253
|
-
/**
|
|
254
|
-
* 要素の sticky スクロール進捗 0→1 を返すゲッターを作る。
|
|
255
|
-
* 進捗 = `-rect.top / (rect.height - innerHeight)`(要素上端が viewport 上端を通過し切るまでで 0→1)。
|
|
256
|
-
* SSR / 要素 null 時は 0。
|
|
257
|
-
*/
|
|
258
|
-
declare function createScrollProgress(element: HTMLElement | null): () => number;
|
|
259
|
-
/**
|
|
260
|
-
* sticky トリガー要素の ref からスクロール進捗ゲッターを返す React フック。
|
|
261
|
-
* 返り値は ref を遅延参照する安定した関数(useFrame からそのまま polling できる)。
|
|
262
|
-
*/
|
|
263
|
-
declare function useScrollProgress(ref: RefObject<HTMLElement | null>): () => number;
|
|
264
|
-
|
|
265
442
|
/**
|
|
266
443
|
* useReducedMotion.ts — `prefers-reduced-motion: reduce` の購読。
|
|
267
444
|
*
|
|
@@ -276,114 +453,15 @@ declare function prefersReducedMotion(): boolean;
|
|
|
276
453
|
*/
|
|
277
454
|
declare function useReducedMotion(): boolean;
|
|
278
455
|
|
|
279
|
-
/**
|
|
280
|
-
* types.ts — glyphdust の公開型。
|
|
281
|
-
*/
|
|
282
|
-
|
|
283
|
-
/**
|
|
284
|
-
* テキストキーフレーム。文字を粒子字形にする。
|
|
285
|
-
* 改行は `\n` で明示する(`"次のユーザーは、\n人じゃない。"`)。
|
|
286
|
-
*/
|
|
287
|
-
interface TextKeyframe {
|
|
288
|
-
type: "text";
|
|
289
|
-
/** 描画テキスト。`\n` で行分割。 */
|
|
290
|
-
text: string;
|
|
291
|
-
/** Canvas2D の `font` 文字列。未指定なら密度に応じた既定。 */
|
|
292
|
-
font?: string;
|
|
293
|
-
/** 字形を収める可視ワールド幅。未指定なら可視幅からの既定比率。 */
|
|
294
|
-
worldW?: number;
|
|
295
|
-
/** ワールド x オフセット(右が +)。 */
|
|
296
|
-
offsetX?: number;
|
|
297
|
-
/** ワールド y オフセット(上が +)。 */
|
|
298
|
-
offsetY?: number;
|
|
299
|
-
/**
|
|
300
|
-
* 実 DOM 要素のセレクタ。指定すると、その要素の矩形・フォントに
|
|
301
|
-
* ピクセル単位で重なる字形を生成する(クロスフェード中に文字が動かない)。
|
|
302
|
-
*/
|
|
303
|
-
domSelector?: string;
|
|
304
|
-
/**
|
|
305
|
-
* フィナーレでこの字形を実 DOM 文字へ解決(粒子を消し実テキストへクロスフェード)。
|
|
306
|
-
* 通常は最終キーフレームに付ける。
|
|
307
|
-
*/
|
|
308
|
-
resolveToDom?: boolean;
|
|
309
|
-
/** 高密度・均一サンプリング(穴の目立たないワードマーク向け)。 */
|
|
310
|
-
dense?: boolean;
|
|
311
|
-
}
|
|
312
|
-
/** 飛散キーフレーム。粒子をランダム雲へ拡散する。 */
|
|
313
|
-
interface ScatterKeyframe {
|
|
314
|
-
type: "scatter";
|
|
315
|
-
/** 拡散半径の倍率。既定 1。 */
|
|
316
|
-
spread?: number;
|
|
317
|
-
}
|
|
318
|
-
/** キーフレーム(テキスト or 飛散)。 */
|
|
319
|
-
type Keyframe = TextKeyframe | ScatterKeyframe;
|
|
320
|
-
/** 配色。 */
|
|
321
|
-
interface GlyphColors {
|
|
322
|
-
/** 主体色(多数の粒)。既定 `#1b2330`。 */
|
|
323
|
-
ink?: string;
|
|
324
|
-
/** アクセント色(少数の粒)。既定 `#0055ff`。 */
|
|
325
|
-
accent?: string;
|
|
326
|
-
/** アクセント色になる粒の割合 0..1。既定 0.18。 */
|
|
327
|
-
accentRatio?: number;
|
|
328
|
-
}
|
|
329
|
-
/** デバイス別の粒子数。 */
|
|
330
|
-
interface GlyphCount {
|
|
331
|
-
/** デスクトップの粒子数。既定 11000。 */
|
|
332
|
-
desktop?: number;
|
|
333
|
-
/** モバイル(<=768px)の粒子数。既定 5200。 */
|
|
334
|
-
mobile?: number;
|
|
335
|
-
}
|
|
336
|
-
/** カメラ設定。 */
|
|
337
|
-
interface GlyphCamera {
|
|
338
|
-
/** z 位置。既定 7。 */
|
|
339
|
-
z?: number;
|
|
340
|
-
/** 縦 fov(度)。既定 42。 */
|
|
341
|
-
fov?: number;
|
|
342
|
-
}
|
|
343
|
-
/** インタラクション設定。 */
|
|
344
|
-
interface GlyphInteraction {
|
|
345
|
-
/** ポインタ追従(近傍反発)。既定 true。 */
|
|
346
|
-
pointer?: boolean;
|
|
347
|
-
/** ドラッグ回転(慣性つき)。既定 true。 */
|
|
348
|
-
drag?: boolean;
|
|
349
|
-
}
|
|
350
|
-
/** {@link GlyphDust} の props。 */
|
|
351
|
-
interface GlyphDustProps {
|
|
352
|
-
/** キーフレーム列(最低 1、通常 text → scatter → text)。 */
|
|
353
|
-
keyframes: Keyframe[];
|
|
354
|
-
/** 進捗ドライバ。既定 `{ type: "scroll" }`。 */
|
|
355
|
-
driver?: DriverConfig;
|
|
356
|
-
/** 配色。 */
|
|
357
|
-
colors?: GlyphColors;
|
|
358
|
-
/** デバイス別粒子数。 */
|
|
359
|
-
count?: GlyphCount;
|
|
360
|
-
/** r3f Canvas の dpr 範囲。既定 `[1, 1.75]`。 */
|
|
361
|
-
dpr?: [number, number];
|
|
362
|
-
/** インタラクション設定。 */
|
|
363
|
-
interaction?: GlyphInteraction;
|
|
364
|
-
/** カメラ設定。 */
|
|
365
|
-
camera?: GlyphCamera;
|
|
366
|
-
/**
|
|
367
|
-
* 各キーフレームの正規化時刻 0..1(補間境界)。
|
|
368
|
-
* 未指定なら等間隔。長さは keyframes と一致させる。
|
|
369
|
-
*/
|
|
370
|
-
timing?: number[];
|
|
371
|
-
/** reduced-motion / WebGL 不可時に描画するフォールバック(真っ白防止)。 */
|
|
372
|
-
fallback?: ReactNode;
|
|
373
|
-
/** ラッパーに付けるクラス名。 */
|
|
374
|
-
className?: string;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
456
|
declare function GlyphDust(props: GlyphDustProps): react.JSX.Element;
|
|
378
457
|
|
|
379
458
|
/**
|
|
380
459
|
* glyphdust — scroll-driven text → particles → glyph → real-text resolve
|
|
381
460
|
* for react-three-fiber.
|
|
382
461
|
*
|
|
383
|
-
* 公開 API はこのファイルから re-export
|
|
384
|
-
* 雛形段階のプレースホルダ。実装は Phase 1 (Task-002〜) で追加する。
|
|
462
|
+
* 公開 API はこのファイルから re-export する。
|
|
385
463
|
*/
|
|
386
464
|
/** ライブラリのバージョン(package.json と一致させる)。 */
|
|
387
|
-
declare const VERSION = "0.
|
|
465
|
+
declare const VERSION = "0.3.0";
|
|
388
466
|
|
|
389
|
-
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 };
|
|
467
|
+
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 TextSegment, type TextTargetOptions, VERSION, type ViewSize, buildDenseTextTargets, buildGlyphFromDOM, buildTextTargets, buildVertexShader, computeAutoplayProgress, computeScreenRect, createScrollProgress, glyphPositionAttribute, prefersReducedMotion, useReducedMotion, useScrollProgress, viewSizeAtZ0 };
|