use-scroll-animate 6.3.0 → 6.5.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 +33 -2
- package/README.md +2 -2
- package/README_ja.md +2 -2
- package/README_zh.md +2 -2
- package/dist/chunks/{generative-BRUZaIsX.js → generative-2LhxG5BJ.js} +2 -2
- package/dist/chunks/{generative-BRUZaIsX.js.map → generative-2LhxG5BJ.js.map} +1 -1
- package/dist/chunks/{gpu-XHWzeNb5.js → gpu-EjV49FQk.js} +3 -3
- package/dist/chunks/{gpu-XHWzeNb5.js.map → gpu-EjV49FQk.js.map} +1 -1
- package/dist/chunks/{shared-eweTlzxv.js → shared-CkKHWrtJ.js} +2 -2
- package/dist/chunks/{shared-eweTlzxv.js.map → shared-CkKHWrtJ.js.map} +1 -1
- package/dist/components/effects.js +3 -3
- package/dist/components/fx-3d.cjs +236 -0
- package/dist/components/fx-3d.cjs.map +1 -0
- package/dist/components/fx-3d.d.cts +67 -0
- package/dist/components/fx-3d.d.ts +67 -0
- package/dist/components/fx-3d.js +233 -0
- package/dist/components/fx-3d.js.map +1 -0
- package/dist/components/fx-gpu.js +3 -3
- package/dist/components/fx-light.cjs +221 -0
- package/dist/components/fx-light.cjs.map +1 -0
- package/dist/components/fx-light.d.cts +72 -0
- package/dist/components/fx-light.d.ts +72 -0
- package/dist/components/fx-light.js +217 -0
- package/dist/components/fx-light.js.map +1 -0
- package/dist/components/fx-text.js +1 -1
- package/dist/components/fx2.cjs +11 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +52 -1
- package/dist/components/fx2.d.ts +52 -1
- package/dist/components/fx2.js +12 -5
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +1002 -14
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +132 -2
- package/dist/components/widgets.d.ts +132 -2
- package/dist/components/widgets.js +993 -15
- package/dist/components/widgets.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +2 -2
- package/docs/components.md +55 -1
- package/package.json +24 -4
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
import { c as registerEffects } from '../chunks/registry-Bu5NrAyA.js';
|
|
2
|
+
import { c as canvasBackground, h as hexRgb } from '../chunks/generative-2LhxG5BJ.js';
|
|
3
|
+
import { o as overlay } from '../chunks/shared-CkKHWrtJ.js';
|
|
4
|
+
import '../chunks/base-DchG4q_S.js';
|
|
5
|
+
|
|
6
|
+
/** Track the pointer over `el` as 0–1 coordinates (`fn(x, y, inside)`); starts at (`x0`, `y0`). Returns a remover. */
|
|
7
|
+
function trackPointer(el, ctx, fn, x0 = 0.3, y0 = 0.25) {
|
|
8
|
+
fn(x0, y0, false);
|
|
9
|
+
if (ctx.reduced)
|
|
10
|
+
return () => undefined;
|
|
11
|
+
let raf = 0;
|
|
12
|
+
let px = x0;
|
|
13
|
+
let py = y0;
|
|
14
|
+
let inside = false;
|
|
15
|
+
const flush = () => {
|
|
16
|
+
raf = 0;
|
|
17
|
+
fn(px, py, inside);
|
|
18
|
+
};
|
|
19
|
+
const queue = () => {
|
|
20
|
+
if (!raf)
|
|
21
|
+
raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame(flush) : (flush(), 0);
|
|
22
|
+
};
|
|
23
|
+
const move = (e) => {
|
|
24
|
+
const r = el.getBoundingClientRect();
|
|
25
|
+
px = r.width ? Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) : 0.5;
|
|
26
|
+
py = r.height ? Math.min(1, Math.max(0, (e.clientY - r.top) / r.height)) : 0.5;
|
|
27
|
+
inside = true;
|
|
28
|
+
queue();
|
|
29
|
+
};
|
|
30
|
+
const leave = () => {
|
|
31
|
+
inside = false;
|
|
32
|
+
px = x0;
|
|
33
|
+
py = y0;
|
|
34
|
+
queue();
|
|
35
|
+
};
|
|
36
|
+
el.addEventListener('pointermove', move);
|
|
37
|
+
el.addEventListener('pointerleave', leave);
|
|
38
|
+
return () => {
|
|
39
|
+
if (raf && typeof cancelAnimationFrame === 'function')
|
|
40
|
+
cancelAnimationFrame(raf);
|
|
41
|
+
el.removeEventListener('pointermove', move);
|
|
42
|
+
el.removeEventListener('pointerleave', leave);
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
const rgba = (hex, a) => {
|
|
46
|
+
const [r, g, b] = hexRgb(hex);
|
|
47
|
+
return `rgba(${r},${g},${b},${a})`;
|
|
48
|
+
};
|
|
49
|
+
const LIGHT_FX = [
|
|
50
|
+
{
|
|
51
|
+
name: 'light-follow',
|
|
52
|
+
kind: 'hover',
|
|
53
|
+
reduced: 'run',
|
|
54
|
+
description: 'A soft point light with a specular hot spot follows the pointer over the surface (persistent; `color`, `size` px, `intensity` 0–1).',
|
|
55
|
+
defaults: { color: '#ffffff', size: 260, intensity: 0.55 },
|
|
56
|
+
run: (el, o, ctx) => {
|
|
57
|
+
const [ov, rm] = overlay(el, 'mix-blend-mode:soft-light;transition:opacity .3s;z-index:1');
|
|
58
|
+
const [spec, rm2] = overlay(el, 'mix-blend-mode:screen;z-index:1');
|
|
59
|
+
const stop = trackPointer(el, ctx, (x, y, inside) => {
|
|
60
|
+
const p = `${(x * 100).toFixed(1)}% ${(y * 100).toFixed(1)}%`;
|
|
61
|
+
ov.style.background = `radial-gradient(${o.size}px circle at ${p}, ${rgba(o.color, o.intensity)}, transparent 70%), radial-gradient(${o.size * 2.4}px circle at ${p}, transparent 30%, rgba(0,0,0,${(o.intensity * 0.45).toFixed(2)}))`;
|
|
62
|
+
spec.style.background = `radial-gradient(${Math.round(o.size / 5)}px circle at ${p}, ${rgba(o.color, inside ? o.intensity * 0.7 : o.intensity * 0.35)}, transparent 70%)`;
|
|
63
|
+
el.style.setProperty('--usa-lx', x.toFixed(3));
|
|
64
|
+
el.style.setProperty('--usa-ly', y.toFixed(3));
|
|
65
|
+
});
|
|
66
|
+
return () => {
|
|
67
|
+
stop();
|
|
68
|
+
rm();
|
|
69
|
+
rm2();
|
|
70
|
+
};
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
name: 'refraction',
|
|
75
|
+
kind: 'hover',
|
|
76
|
+
reduced: 'run',
|
|
77
|
+
description: 'A glass lens bends and magnifies what is behind it while following the pointer (persistent; `size` px, `blur`, `rim` color). Uses backdrop-filter.',
|
|
78
|
+
defaults: { size: 120, blur: 1.5, zoom: 1.12, rim: '#9be7ff' },
|
|
79
|
+
run: (el, o, ctx) => {
|
|
80
|
+
if (getComputedStyle(el).position === 'static')
|
|
81
|
+
el.style.position = 'relative';
|
|
82
|
+
const lens = document.createElement('span');
|
|
83
|
+
lens.setAttribute('aria-hidden', 'true');
|
|
84
|
+
const s = Number(o.size) || 120;
|
|
85
|
+
lens.style.cssText = `position:absolute;left:0;top:0;width:${s}px;height:${s}px;border-radius:50%;pointer-events:none;z-index:2;` +
|
|
86
|
+
`-webkit-backdrop-filter:blur(${o.blur}px) saturate(1.6) contrast(1.08) brightness(1.08);backdrop-filter:blur(${o.blur}px) saturate(1.6) contrast(1.08) brightness(1.08);` +
|
|
87
|
+
`box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 6px 8px 14px rgba(255,255,255,.45),inset -8px -10px 18px ${rgba(o.rim, 0.45)},0 10px 30px -8px rgba(0,0,0,.35);` +
|
|
88
|
+
`background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 32%),radial-gradient(circle at 70% 78%,${rgba(o.rim, 0.25)},transparent 45%);transform-origin:50% 50%;will-change:transform;transition:opacity .25s`;
|
|
89
|
+
el.appendChild(lens);
|
|
90
|
+
const stop = trackPointer(el, ctx, (x, y, inside) => {
|
|
91
|
+
const w = el.clientWidth;
|
|
92
|
+
const h = el.clientHeight;
|
|
93
|
+
lens.style.transform = `translate(${(x * w - s / 2).toFixed(1)}px,${(y * h - s / 2).toFixed(1)}px) scale(${inside ? o.zoom : 1})`;
|
|
94
|
+
lens.style.opacity = inside || ctx.reduced ? '1' : '.85';
|
|
95
|
+
}, 0.5, 0.5);
|
|
96
|
+
return () => {
|
|
97
|
+
stop();
|
|
98
|
+
lens.remove();
|
|
99
|
+
};
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
name: 'brushed-metal',
|
|
104
|
+
kind: 'card',
|
|
105
|
+
reduced: 'run',
|
|
106
|
+
description: 'Fine brushed-metal lines with an anisotropic sheen that turns with the pointer angle (persistent; `tint`, `lines` px).',
|
|
107
|
+
defaults: { tint: '#cbd5e1', lines: 2 },
|
|
108
|
+
run: (el, o, ctx) => {
|
|
109
|
+
const l = Math.max(1, Number(o.lines) || 2);
|
|
110
|
+
const [grain, rm] = overlay(el, `z-index:0;opacity:.55;mix-blend-mode:overlay;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,rgba(0,0,0,.12) 1px ${l}px,rgba(255,255,255,.06) ${l}px ${l * 2 + 1}px),linear-gradient(180deg,${rgba(o.tint, 0.9)},${rgba(o.tint, 0.55)})`);
|
|
111
|
+
const [sheen, rm2] = overlay(el, 'z-index:1;mix-blend-mode:soft-light');
|
|
112
|
+
const stop = trackPointer(el, ctx, (x, y) => {
|
|
113
|
+
const ang = Math.atan2(y - 0.5, x - 0.5) * (180 / Math.PI) + 90;
|
|
114
|
+
sheen.style.background = `conic-gradient(from ${ang.toFixed(1)}deg at ${(x * 100).toFixed(1)}% ${(y * 100).toFixed(1)}%, rgba(255,255,255,.75), rgba(0,0,0,.35) 25%, rgba(255,255,255,.6) 50%, rgba(0,0,0,.35) 75%, rgba(255,255,255,.75))`;
|
|
115
|
+
});
|
|
116
|
+
return () => {
|
|
117
|
+
stop();
|
|
118
|
+
rm();
|
|
119
|
+
rm2();
|
|
120
|
+
};
|
|
121
|
+
},
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
name: 'pearlescent',
|
|
125
|
+
kind: 'card',
|
|
126
|
+
reduced: 'run',
|
|
127
|
+
description: 'A nacre / holographic film whose hues shift with the pointer position (persistent; `strength` 0–1).',
|
|
128
|
+
defaults: { strength: 0.6 },
|
|
129
|
+
run: (el, o, ctx) => {
|
|
130
|
+
const [film, rm] = overlay(el, `z-index:1;mix-blend-mode:color-dodge;opacity:${o.strength}`);
|
|
131
|
+
const [gloss, rm2] = overlay(el, 'z-index:1;mix-blend-mode:soft-light');
|
|
132
|
+
const stop = trackPointer(el, ctx, (x, y) => {
|
|
133
|
+
const hue = Math.round((x * 0.7 + y * 0.3) * 360);
|
|
134
|
+
film.style.background = `linear-gradient(${Math.round(115 + x * 50)}deg, hsla(${hue},90%,70%,.55), hsla(${hue + 60},90%,75%,.35) 25%, hsla(${hue + 140},85%,70%,.5) 50%, hsla(${hue + 220},90%,75%,.35) 75%, hsla(${hue + 300},90%,70%,.55))`;
|
|
135
|
+
film.style.backgroundSize = '220% 220%';
|
|
136
|
+
film.style.backgroundPosition = `${(x * 100).toFixed(1)}% ${(y * 100).toFixed(1)}%`;
|
|
137
|
+
gloss.style.background = `radial-gradient(80% 60% at ${(x * 100).toFixed(1)}% ${(y * 100).toFixed(1)}%, rgba(255,255,255,.65), transparent 60%)`;
|
|
138
|
+
});
|
|
139
|
+
return () => {
|
|
140
|
+
stop();
|
|
141
|
+
rm();
|
|
142
|
+
rm2();
|
|
143
|
+
};
|
|
144
|
+
},
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
name: 'god-rays',
|
|
148
|
+
kind: 'background',
|
|
149
|
+
reduced: 'run',
|
|
150
|
+
description: 'Volumetric light shafts fan out from a source point and slowly sweep (Canvas 2D, additive; `color`, `rays`, `x` / `y` source 0–1).',
|
|
151
|
+
defaults: { color: '#ffe7a3', background: '#0b1020', rays: 14, x: 0.5, y: -0.1, speed: 1, quality: 1 },
|
|
152
|
+
run: (el, o, ctx) => {
|
|
153
|
+
const stop = canvasBackground(el, ctx, {
|
|
154
|
+
init: () => ({ seeds: Array.from({ length: Math.max(3, o.rays | 0) }, (_, i) => ({ a: (i / o.rays) * 1.6 - 0.8 + Math.random() * 0.08, w: 0.03 + Math.random() * 0.06, p: Math.random() * 6.28 })) }),
|
|
155
|
+
draw: ({ ctx: g, w, h, t, state }) => {
|
|
156
|
+
g.globalCompositeOperation = 'source-over';
|
|
157
|
+
g.fillStyle = o.background;
|
|
158
|
+
g.fillRect(0, 0, w, h);
|
|
159
|
+
const sx = o.x * w;
|
|
160
|
+
const sy = o.y * h;
|
|
161
|
+
const len = Math.hypot(w, h) * 1.2;
|
|
162
|
+
const [r, gg, b] = hexRgb(o.color);
|
|
163
|
+
g.globalCompositeOperation = 'lighter';
|
|
164
|
+
for (const s of state.seeds) {
|
|
165
|
+
const a = Math.PI / 2 + s.a + Math.sin(t * 0.25 * o.speed + s.p) * 0.08;
|
|
166
|
+
const alpha = 0.1 + 0.08 * Math.sin(t * 0.8 * o.speed + s.p * 2);
|
|
167
|
+
const grad = g.createLinearGradient(sx, sy, sx + Math.cos(a) * len, sy + Math.sin(a) * len);
|
|
168
|
+
grad.addColorStop(0, `rgba(${r},${gg},${b},${(alpha * 2).toFixed(3)})`);
|
|
169
|
+
grad.addColorStop(1, `rgba(${r},${gg},${b},0)`);
|
|
170
|
+
g.fillStyle = grad;
|
|
171
|
+
g.beginPath();
|
|
172
|
+
g.moveTo(sx, sy);
|
|
173
|
+
g.lineTo(sx + Math.cos(a - s.w) * len, sy + Math.sin(a - s.w) * len);
|
|
174
|
+
g.lineTo(sx + Math.cos(a + s.w) * len, sy + Math.sin(a + s.w) * len);
|
|
175
|
+
g.closePath();
|
|
176
|
+
g.fill();
|
|
177
|
+
}
|
|
178
|
+
const glow = g.createRadialGradient(sx, sy, 0, sx, sy, Math.max(w, h) * 0.45);
|
|
179
|
+
glow.addColorStop(0, `rgba(${r},${gg},${b},.45)`);
|
|
180
|
+
glow.addColorStop(1, `rgba(${r},${gg},${b},0)`);
|
|
181
|
+
g.fillStyle = glow;
|
|
182
|
+
g.fillRect(0, 0, w, h);
|
|
183
|
+
g.globalCompositeOperation = 'source-over';
|
|
184
|
+
},
|
|
185
|
+
}, o);
|
|
186
|
+
ctx.onCleanup(stop);
|
|
187
|
+
return stop;
|
|
188
|
+
},
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
name: 'pointer-shadow',
|
|
192
|
+
kind: 'hover',
|
|
193
|
+
reduced: 'run',
|
|
194
|
+
description: 'The pointer is the light: the element casts a soft real-time shadow away from it (persistent; `depth` px, `blur`, `color`).',
|
|
195
|
+
defaults: { depth: 22, blur: 18, color: 'rgba(15,23,42,.38)' },
|
|
196
|
+
run: (el, o, ctx) => {
|
|
197
|
+
const prev = el.style.filter;
|
|
198
|
+
const stop = trackPointer(el, ctx, (x, y, inside) => {
|
|
199
|
+
const dx = (0.5 - x) * 2 * o.depth;
|
|
200
|
+
const dy = (0.5 - y) * 2 * o.depth;
|
|
201
|
+
const k = inside ? 1 : 0.6;
|
|
202
|
+
el.style.filter = `drop-shadow(${(dx * k).toFixed(1)}px ${(dy * k + 4).toFixed(1)}px ${o.blur}px ${o.color})`;
|
|
203
|
+
}, 0.35, 0.2);
|
|
204
|
+
return () => {
|
|
205
|
+
stop();
|
|
206
|
+
el.style.filter = prev;
|
|
207
|
+
};
|
|
208
|
+
},
|
|
209
|
+
},
|
|
210
|
+
];
|
|
211
|
+
/** Register the 6.4 light & materials pack (idempotent). */
|
|
212
|
+
function registerLightEffects() {
|
|
213
|
+
registerEffects(LIGHT_FX);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
export { LIGHT_FX, registerLightEffects, trackPointer };
|
|
217
|
+
//# sourceMappingURL=fx-light.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-light.js","sources":["../../src/components/fx2/light.ts"],"sourcesContent":["/**\n * 6.4 — Light & materials (`motionary/components/fx-light`), registered\n * through `registerEffect()`. Persistent effects (use `trigger=\"load\"`)\n * that return a cleanup:\n *\n * - `light-follow` (hover) — a soft point light + specular highlight that\n * follows the pointer over the surface.\n * - `refraction` (hover) — a glass lens that bends and magnifies what is\n * behind it as it follows the pointer (backdrop filter, chromatic rim).\n * - `brushed-metal` (card) — fine brushed lines with an anisotropic sheen\n * that turns with the pointer angle.\n * - `pearlescent` (card) — a nacre / holographic film whose hues shift with\n * the pointer position.\n * - `god-rays` (background) — volumetric light shafts from a source point\n * (Canvas 2D, additive).\n * - `pointer-shadow` (hover) — the pointer is the light: the element casts\n * a soft real-time shadow away from it.\n *\n * Reduced motion: surfaces stay lit from a fixed angle (no tracking),\n * `god-rays` draws one still frame.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\nimport { canvasBackground, hexRgb } from '../effects/generative';\nimport { overlay } from '../effects/shared';\n\n/** Track the pointer over `el` as 0–1 coordinates (`fn(x, y, inside)`); starts at (`x0`, `y0`). Returns a remover. */\nexport function trackPointer(el: HTMLElement, ctx: EffectContext, fn: (x: number, y: number, inside: boolean) => void, x0 = 0.3, y0 = 0.25): () => void {\n fn(x0, y0, false);\n if (ctx.reduced) return () => undefined;\n let raf = 0;\n let px = x0;\n let py = y0;\n let inside = false;\n const flush = () => {\n raf = 0;\n fn(px, py, inside);\n };\n const queue = () => {\n if (!raf) raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame(flush) : (flush(), 0);\n };\n const move = (e: PointerEvent) => {\n const r = el.getBoundingClientRect();\n px = r.width ? Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) : 0.5;\n py = r.height ? Math.min(1, Math.max(0, (e.clientY - r.top) / r.height)) : 0.5;\n inside = true;\n queue();\n };\n const leave = () => {\n inside = false;\n px = x0;\n py = y0;\n queue();\n };\n el.addEventListener('pointermove', move);\n el.addEventListener('pointerleave', leave);\n return () => {\n if (raf && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(raf);\n el.removeEventListener('pointermove', move);\n el.removeEventListener('pointerleave', leave);\n };\n}\n\nconst rgba = (hex: string, a: number) => {\n const [r, g, b] = hexRgb(hex);\n return `rgba(${r},${g},${b},${a})`;\n};\n\nexport const LIGHT_FX: EffectDefinition[] = [\n {\n name: 'light-follow',\n kind: 'hover',\n reduced: 'run',\n description: 'A soft point light with a specular hot spot follows the pointer over the surface (persistent; `color`, `size` px, `intensity` 0–1).',\n defaults: { color: '#ffffff', size: 260, intensity: 0.55 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const [ov, rm] = overlay(el, 'mix-blend-mode:soft-light;transition:opacity .3s;z-index:1');\n const [spec, rm2] = overlay(el, 'mix-blend-mode:screen;z-index:1');\n const stop = trackPointer(el, ctx, (x, y, inside) => {\n const p = `${(x * 100).toFixed(1)}% ${(y * 100).toFixed(1)}%`;\n ov.style.background = `radial-gradient(${o.size}px circle at ${p}, ${rgba(o.color, o.intensity)}, transparent 70%), radial-gradient(${o.size * 2.4}px circle at ${p}, transparent 30%, rgba(0,0,0,${(o.intensity * 0.45).toFixed(2)}))`;\n spec.style.background = `radial-gradient(${Math.round(o.size / 5)}px circle at ${p}, ${rgba(o.color, inside ? o.intensity * 0.7 : o.intensity * 0.35)}, transparent 70%)`;\n el.style.setProperty('--usa-lx', x.toFixed(3));\n el.style.setProperty('--usa-ly', y.toFixed(3));\n });\n return () => {\n stop();\n rm();\n rm2();\n };\n },\n },\n {\n name: 'refraction',\n kind: 'hover',\n reduced: 'run',\n description: 'A glass lens bends and magnifies what is behind it while following the pointer (persistent; `size` px, `blur`, `rim` color). Uses backdrop-filter.',\n defaults: { size: 120, blur: 1.5, zoom: 1.12, rim: '#9be7ff' },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (getComputedStyle(el).position === 'static') el.style.position = 'relative';\n const lens = document.createElement('span');\n lens.setAttribute('aria-hidden', 'true');\n const s = Number(o.size) || 120;\n lens.style.cssText = `position:absolute;left:0;top:0;width:${s}px;height:${s}px;border-radius:50%;pointer-events:none;z-index:2;` +\n `-webkit-backdrop-filter:blur(${o.blur}px) saturate(1.6) contrast(1.08) brightness(1.08);backdrop-filter:blur(${o.blur}px) saturate(1.6) contrast(1.08) brightness(1.08);` +\n `box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 6px 8px 14px rgba(255,255,255,.45),inset -8px -10px 18px ${rgba(o.rim, 0.45)},0 10px 30px -8px rgba(0,0,0,.35);` +\n `background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(255,255,255,0) 32%),radial-gradient(circle at 70% 78%,${rgba(o.rim, 0.25)},transparent 45%);transform-origin:50% 50%;will-change:transform;transition:opacity .25s`;\n el.appendChild(lens);\n const stop = trackPointer(el, ctx, (x, y, inside) => {\n const w = el.clientWidth;\n const h = el.clientHeight;\n lens.style.transform = `translate(${(x * w - s / 2).toFixed(1)}px,${(y * h - s / 2).toFixed(1)}px) scale(${inside ? o.zoom : 1})`;\n lens.style.opacity = inside || ctx.reduced ? '1' : '.85';\n }, 0.5, 0.5);\n return () => {\n stop();\n lens.remove();\n };\n },\n },\n {\n name: 'brushed-metal',\n kind: 'card',\n reduced: 'run',\n description: 'Fine brushed-metal lines with an anisotropic sheen that turns with the pointer angle (persistent; `tint`, `lines` px).',\n defaults: { tint: '#cbd5e1', lines: 2 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const l = Math.max(1, Number(o.lines) || 2);\n const [grain, rm] = overlay(el, `z-index:0;opacity:.55;mix-blend-mode:overlay;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,rgba(0,0,0,.12) 1px ${l}px,rgba(255,255,255,.06) ${l}px ${l * 2 + 1}px),linear-gradient(180deg,${rgba(o.tint, 0.9)},${rgba(o.tint, 0.55)})`);\n const [sheen, rm2] = overlay(el, 'z-index:1;mix-blend-mode:soft-light');\n const stop = trackPointer(el, ctx, (x, y) => {\n const ang = Math.atan2(y - 0.5, x - 0.5) * (180 / Math.PI) + 90;\n sheen.style.background = `conic-gradient(from ${ang.toFixed(1)}deg at ${(x * 100).toFixed(1)}% ${(y * 100).toFixed(1)}%, rgba(255,255,255,.75), rgba(0,0,0,.35) 25%, rgba(255,255,255,.6) 50%, rgba(0,0,0,.35) 75%, rgba(255,255,255,.75))`;\n });\n void grain;\n return () => {\n stop();\n rm();\n rm2();\n };\n },\n },\n {\n name: 'pearlescent',\n kind: 'card',\n reduced: 'run',\n description: 'A nacre / holographic film whose hues shift with the pointer position (persistent; `strength` 0–1).',\n defaults: { strength: 0.6 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const [film, rm] = overlay(el, `z-index:1;mix-blend-mode:color-dodge;opacity:${o.strength}`);\n const [gloss, rm2] = overlay(el, 'z-index:1;mix-blend-mode:soft-light');\n const stop = trackPointer(el, ctx, (x, y) => {\n const hue = Math.round((x * 0.7 + y * 0.3) * 360);\n film.style.background = `linear-gradient(${Math.round(115 + x * 50)}deg, hsla(${hue},90%,70%,.55), hsla(${hue + 60},90%,75%,.35) 25%, hsla(${hue + 140},85%,70%,.5) 50%, hsla(${hue + 220},90%,75%,.35) 75%, hsla(${hue + 300},90%,70%,.55))`;\n film.style.backgroundSize = '220% 220%';\n film.style.backgroundPosition = `${(x * 100).toFixed(1)}% ${(y * 100).toFixed(1)}%`;\n gloss.style.background = `radial-gradient(80% 60% at ${(x * 100).toFixed(1)}% ${(y * 100).toFixed(1)}%, rgba(255,255,255,.65), transparent 60%)`;\n });\n return () => {\n stop();\n rm();\n rm2();\n };\n },\n },\n {\n name: 'god-rays',\n kind: 'background',\n reduced: 'run',\n description: 'Volumetric light shafts fan out from a source point and slowly sweep (Canvas 2D, additive; `color`, `rays`, `x` / `y` source 0–1).',\n defaults: { color: '#ffe7a3', background: '#0b1020', rays: 14, x: 0.5, y: -0.1, speed: 1, quality: 1 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const stop = canvasBackground(el, ctx, {\n init: () => ({ seeds: Array.from({ length: Math.max(3, o.rays | 0) }, (_, i) => ({ a: (i / o.rays) * 1.6 - 0.8 + Math.random() * 0.08, w: 0.03 + Math.random() * 0.06, p: Math.random() * 6.28 })) }),\n draw: ({ ctx: g, w, h, t, state }) => {\n g.globalCompositeOperation = 'source-over';\n g.fillStyle = o.background;\n g.fillRect(0, 0, w, h);\n const sx = o.x * w;\n const sy = o.y * h;\n const len = Math.hypot(w, h) * 1.2;\n const [r, gg, b] = hexRgb(o.color);\n g.globalCompositeOperation = 'lighter';\n for (const s of state.seeds) {\n const a = Math.PI / 2 + s.a + Math.sin(t * 0.25 * o.speed + s.p) * 0.08;\n const alpha = 0.1 + 0.08 * Math.sin(t * 0.8 * o.speed + s.p * 2);\n const grad = g.createLinearGradient(sx, sy, sx + Math.cos(a) * len, sy + Math.sin(a) * len);\n grad.addColorStop(0, `rgba(${r},${gg},${b},${(alpha * 2).toFixed(3)})`);\n grad.addColorStop(1, `rgba(${r},${gg},${b},0)`);\n g.fillStyle = grad;\n g.beginPath();\n g.moveTo(sx, sy);\n g.lineTo(sx + Math.cos(a - s.w) * len, sy + Math.sin(a - s.w) * len);\n g.lineTo(sx + Math.cos(a + s.w) * len, sy + Math.sin(a + s.w) * len);\n g.closePath();\n g.fill();\n }\n const glow = g.createRadialGradient(sx, sy, 0, sx, sy, Math.max(w, h) * 0.45);\n glow.addColorStop(0, `rgba(${r},${gg},${b},.45)`);\n glow.addColorStop(1, `rgba(${r},${gg},${b},0)`);\n g.fillStyle = glow;\n g.fillRect(0, 0, w, h);\n g.globalCompositeOperation = 'source-over';\n },\n }, o);\n ctx.onCleanup(stop);\n return stop;\n },\n },\n {\n name: 'pointer-shadow',\n kind: 'hover',\n reduced: 'run',\n description: 'The pointer is the light: the element casts a soft real-time shadow away from it (persistent; `depth` px, `blur`, `color`).',\n defaults: { depth: 22, blur: 18, color: 'rgba(15,23,42,.38)' },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const prev = el.style.filter;\n const stop = trackPointer(el, ctx, (x, y, inside) => {\n const dx = (0.5 - x) * 2 * o.depth;\n const dy = (0.5 - y) * 2 * o.depth;\n const k = inside ? 1 : 0.6;\n el.style.filter = `drop-shadow(${(dx * k).toFixed(1)}px ${(dy * k + 4).toFixed(1)}px ${o.blur}px ${o.color})`;\n }, 0.35, 0.2);\n return () => {\n stop();\n el.style.filter = prev;\n };\n },\n },\n];\n\n/** Register the 6.4 light & materials pack (idempotent). */\nexport function registerLightEffects(): void {\n registerEffects(LIGHT_FX);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { c as registerEffects } from '../chunks/registry-Bu5NrAyA.js';
|
|
2
2
|
import { u as srText } from '../chunks/base-DchG4q_S.js';
|
|
3
|
-
import { a as all, r as rand, f as fxLayer, s as spawn } from '../chunks/shared-
|
|
3
|
+
import { a as all, r as rand, f as fxLayer, s as spawn } from '../chunks/shared-CkKHWrtJ.js';
|
|
4
4
|
|
|
5
5
|
/** Split `el`'s text into `aria-hidden` inline-block characters (idempotent). Returns them. */
|
|
6
6
|
function splitChars(el) {
|
package/dist/components/fx2.cjs
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var components_fxGpu = require('../chunks/gpu-BBRLgEzM.cjs');
|
|
4
4
|
var components_fxText = require('./fx-text.cjs');
|
|
5
|
+
var components_fxLight = require('./fx-light.cjs');
|
|
6
|
+
var components_fx3d = require('./fx-3d.cjs');
|
|
5
7
|
require('../chunks/registry-DehBVRDV.cjs');
|
|
6
8
|
require('../chunks/base-BaQV-2ha.cjs');
|
|
7
9
|
require('../chunks/generative-BHIj-NU0.cjs');
|
|
@@ -11,11 +13,15 @@ require('../chunks/shared-jkgRH-Hx.cjs');
|
|
|
11
13
|
const FX2_PACKS = {
|
|
12
14
|
gpu: components_fxGpu.GPU_FX,
|
|
13
15
|
text: components_fxText.TEXT3_FX,
|
|
16
|
+
light: components_fxLight.LIGHT_FX,
|
|
17
|
+
depth: components_fx3d.DEPTH3_FX,
|
|
14
18
|
};
|
|
15
19
|
/** Register every 6.x pack (idempotent). */
|
|
16
20
|
function registerFx2() {
|
|
17
21
|
components_fxGpu.registerGpuEffects();
|
|
18
22
|
components_fxText.registerTextEffects3();
|
|
23
|
+
components_fxLight.registerLightEffects();
|
|
24
|
+
components_fx3d.register3dEffects();
|
|
19
25
|
}
|
|
20
26
|
|
|
21
27
|
exports.GLSL_HEAD = components_fxGpu.GLSL_HEAD;
|
|
@@ -27,6 +33,11 @@ exports.supportsWebGL2 = components_fxGpu.supportsWebGL2;
|
|
|
27
33
|
exports.TEXT3_FX = components_fxText.TEXT3_FX;
|
|
28
34
|
exports.registerTextEffects3 = components_fxText.registerTextEffects3;
|
|
29
35
|
exports.splitChars = components_fxText.splitChars;
|
|
36
|
+
exports.LIGHT_FX = components_fxLight.LIGHT_FX;
|
|
37
|
+
exports.registerLightEffects = components_fxLight.registerLightEffects;
|
|
38
|
+
exports.trackPointer = components_fxLight.trackPointer;
|
|
39
|
+
exports.DEPTH3_FX = components_fx3d.DEPTH3_FX;
|
|
40
|
+
exports.register3dEffects = components_fx3d.register3dEffects;
|
|
30
41
|
exports.FX2_PACKS = FX2_PACKS;
|
|
31
42
|
exports.registerFx2 = registerFx2;
|
|
32
43
|
//# sourceMappingURL=fx2.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fx2.cjs","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nimport { GPU_FX, registerGpuEffects } from './gpu';\nimport { TEXT3_FX, registerTextEffects3, splitChars } from './text3';\n\nexport { GPU_FX, registerGpuEffects, TEXT3_FX, registerTextEffects3, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport type { ShaderSpec } from './gl';\n\n/** The 6.x effect packs by name. */\nexport const FX2_PACKS: Record<string, EffectDefinition[]> = {\n gpu: GPU_FX,\n text: TEXT3_FX,\n};\n\n/** Register every 6.x pack (idempotent). */\nexport function registerFx2(): void {\n registerGpuEffects();\n registerTextEffects3();\n}\n"],"names":["GPU_FX","TEXT3_FX","registerGpuEffects","registerTextEffects3"],"mappings":"
|
|
1
|
+
{"version":3,"file":"fx2.cjs","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nimport { GPU_FX, registerGpuEffects } from './gpu';\nimport { TEXT3_FX, registerTextEffects3, splitChars } from './text3';\nimport { LIGHT_FX, registerLightEffects, trackPointer } from './light';\nimport { DEPTH3_FX, register3dEffects } from './depth3';\n\nexport { GPU_FX, registerGpuEffects, TEXT3_FX, registerTextEffects3, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightEffects, trackPointer };\n\nexport { DEPTH3_FX, register3dEffects };\n\n/** The 6.x effect packs by name. */\nexport const FX2_PACKS: Record<string, EffectDefinition[]> = {\n gpu: GPU_FX,\n text: TEXT3_FX,\n light: LIGHT_FX,\n depth: DEPTH3_FX,\n};\n\n/** Register every 6.x pack (idempotent). */\nexport function registerFx2(): void {\n registerGpuEffects();\n registerTextEffects3();\n registerLightEffects();\n register3dEffects();\n}\n"],"names":["GPU_FX","TEXT3_FX","LIGHT_FX","DEPTH3_FX","registerGpuEffects","registerTextEffects3","registerLightEffects","register3dEffects"],"mappings":";;;;;;;;;;;AAmBA;AACO,MAAM,SAAS,GAAuC;AAC3D,IAAA,GAAG,EAAEA,uBAAM;AACX,IAAA,IAAI,EAAEC,0BAAQ;AACd,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,yBAAS;;AAGlB;SACgB,WAAW,GAAA;AACzB,IAAAC,mCAAkB,EAAE;AACpB,IAAAC,sCAAoB,EAAE;AACtB,IAAAC,uCAAoB,EAAE;AACtB,IAAAC,iCAAiB,EAAE;AACrB;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -86,6 +86,57 @@ declare const TEXT3_FX: EffectDefinition[];
|
|
|
86
86
|
/** Register the 6.3 text pack (idempotent). */
|
|
87
87
|
declare function registerTextEffects3(): void;
|
|
88
88
|
|
|
89
|
+
/**
|
|
90
|
+
* 6.4 — Light & materials (`motionary/components/fx-light`), registered
|
|
91
|
+
* through `registerEffect()`. Persistent effects (use `trigger="load"`)
|
|
92
|
+
* that return a cleanup:
|
|
93
|
+
*
|
|
94
|
+
* - `light-follow` (hover) — a soft point light + specular highlight that
|
|
95
|
+
* follows the pointer over the surface.
|
|
96
|
+
* - `refraction` (hover) — a glass lens that bends and magnifies what is
|
|
97
|
+
* behind it as it follows the pointer (backdrop filter, chromatic rim).
|
|
98
|
+
* - `brushed-metal` (card) — fine brushed lines with an anisotropic sheen
|
|
99
|
+
* that turns with the pointer angle.
|
|
100
|
+
* - `pearlescent` (card) — a nacre / holographic film whose hues shift with
|
|
101
|
+
* the pointer position.
|
|
102
|
+
* - `god-rays` (background) — volumetric light shafts from a source point
|
|
103
|
+
* (Canvas 2D, additive).
|
|
104
|
+
* - `pointer-shadow` (hover) — the pointer is the light: the element casts
|
|
105
|
+
* a soft real-time shadow away from it.
|
|
106
|
+
*
|
|
107
|
+
* Reduced motion: surfaces stay lit from a fixed angle (no tracking),
|
|
108
|
+
* `god-rays` draws one still frame.
|
|
109
|
+
*/
|
|
110
|
+
|
|
111
|
+
/** Track the pointer over `el` as 0–1 coordinates (`fn(x, y, inside)`); starts at (`x0`, `y0`). Returns a remover. */
|
|
112
|
+
declare function trackPointer(el: HTMLElement, ctx: EffectContext, fn: (x: number, y: number, inside: boolean) => void, x0?: number, y0?: number): () => void;
|
|
113
|
+
declare const LIGHT_FX: EffectDefinition[];
|
|
114
|
+
/** Register the 6.4 light & materials pack (idempotent). */
|
|
115
|
+
declare function registerLightEffects(): void;
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* 6.5 — 3D scene cards (`motionary/components/fx-3d`), registered through
|
|
119
|
+
* `registerEffect()`:
|
|
120
|
+
*
|
|
121
|
+
* - `depth-stack` (card, persistent) — the children (or `[data-depth]`
|
|
122
|
+
* layers) separate in Z and parallax against each other as the card tilts
|
|
123
|
+
* toward the pointer.
|
|
124
|
+
* - `product-spin` (card, persistent) — a 360° product viewer: drag to turn
|
|
125
|
+
* the element in 3D with inertia, idles with a slow turntable spin.
|
|
126
|
+
* - `card-flip-3d` (click) — a thick card flips to its back face (second
|
|
127
|
+
* child) with an edge that shows its depth.
|
|
128
|
+
* - `origami` (enter) — the element unfolds panel by panel like folded paper.
|
|
129
|
+
* - `orbit-camera` (scroll, persistent) — while the element scrolls through
|
|
130
|
+
* the viewport the camera orbits its 3D children.
|
|
131
|
+
*
|
|
132
|
+
* Reduced motion: no tilt, spin, orbit or fold; the flip swaps faces with a
|
|
133
|
+
* crossfade.
|
|
134
|
+
*/
|
|
135
|
+
|
|
136
|
+
declare const DEPTH3_FX: EffectDefinition[];
|
|
137
|
+
/** Register the 6.5 3D pack (idempotent). */
|
|
138
|
+
declare function register3dEffects(): void;
|
|
139
|
+
|
|
89
140
|
/**
|
|
90
141
|
* 5.5 — generative backgrounds on Canvas 2D, registered through
|
|
91
142
|
* `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
|
|
@@ -158,5 +209,5 @@ declare const FX2_PACKS: Record<string, EffectDefinition[]>;
|
|
|
158
209
|
/** Register every 6.x pack (idempotent). */
|
|
159
210
|
declare function registerFx2(): void;
|
|
160
211
|
|
|
161
|
-
export { FX2_PACKS, GLSL_HEAD, GPU_FX, TEXT3_FX, fieldFallback, registerFx2, registerGpuEffects, registerTextEffects3, shaderBackground, splitChars, supportsWebGL2 };
|
|
212
|
+
export { DEPTH3_FX, FX2_PACKS, GLSL_HEAD, GPU_FX, LIGHT_FX, TEXT3_FX, fieldFallback, register3dEffects, registerFx2, registerGpuEffects, registerLightEffects, registerTextEffects3, shaderBackground, splitChars, supportsWebGL2, trackPointer };
|
|
162
213
|
export type { ShaderSpec };
|
package/dist/components/fx2.d.ts
CHANGED
|
@@ -86,6 +86,57 @@ declare const TEXT3_FX: EffectDefinition[];
|
|
|
86
86
|
/** Register the 6.3 text pack (idempotent). */
|
|
87
87
|
declare function registerTextEffects3(): void;
|
|
88
88
|
|
|
89
|
+
/**
|
|
90
|
+
* 6.4 — Light & materials (`motionary/components/fx-light`), registered
|
|
91
|
+
* through `registerEffect()`. Persistent effects (use `trigger="load"`)
|
|
92
|
+
* that return a cleanup:
|
|
93
|
+
*
|
|
94
|
+
* - `light-follow` (hover) — a soft point light + specular highlight that
|
|
95
|
+
* follows the pointer over the surface.
|
|
96
|
+
* - `refraction` (hover) — a glass lens that bends and magnifies what is
|
|
97
|
+
* behind it as it follows the pointer (backdrop filter, chromatic rim).
|
|
98
|
+
* - `brushed-metal` (card) — fine brushed lines with an anisotropic sheen
|
|
99
|
+
* that turns with the pointer angle.
|
|
100
|
+
* - `pearlescent` (card) — a nacre / holographic film whose hues shift with
|
|
101
|
+
* the pointer position.
|
|
102
|
+
* - `god-rays` (background) — volumetric light shafts from a source point
|
|
103
|
+
* (Canvas 2D, additive).
|
|
104
|
+
* - `pointer-shadow` (hover) — the pointer is the light: the element casts
|
|
105
|
+
* a soft real-time shadow away from it.
|
|
106
|
+
*
|
|
107
|
+
* Reduced motion: surfaces stay lit from a fixed angle (no tracking),
|
|
108
|
+
* `god-rays` draws one still frame.
|
|
109
|
+
*/
|
|
110
|
+
|
|
111
|
+
/** Track the pointer over `el` as 0–1 coordinates (`fn(x, y, inside)`); starts at (`x0`, `y0`). Returns a remover. */
|
|
112
|
+
declare function trackPointer(el: HTMLElement, ctx: EffectContext, fn: (x: number, y: number, inside: boolean) => void, x0?: number, y0?: number): () => void;
|
|
113
|
+
declare const LIGHT_FX: EffectDefinition[];
|
|
114
|
+
/** Register the 6.4 light & materials pack (idempotent). */
|
|
115
|
+
declare function registerLightEffects(): void;
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* 6.5 — 3D scene cards (`motionary/components/fx-3d`), registered through
|
|
119
|
+
* `registerEffect()`:
|
|
120
|
+
*
|
|
121
|
+
* - `depth-stack` (card, persistent) — the children (or `[data-depth]`
|
|
122
|
+
* layers) separate in Z and parallax against each other as the card tilts
|
|
123
|
+
* toward the pointer.
|
|
124
|
+
* - `product-spin` (card, persistent) — a 360° product viewer: drag to turn
|
|
125
|
+
* the element in 3D with inertia, idles with a slow turntable spin.
|
|
126
|
+
* - `card-flip-3d` (click) — a thick card flips to its back face (second
|
|
127
|
+
* child) with an edge that shows its depth.
|
|
128
|
+
* - `origami` (enter) — the element unfolds panel by panel like folded paper.
|
|
129
|
+
* - `orbit-camera` (scroll, persistent) — while the element scrolls through
|
|
130
|
+
* the viewport the camera orbits its 3D children.
|
|
131
|
+
*
|
|
132
|
+
* Reduced motion: no tilt, spin, orbit or fold; the flip swaps faces with a
|
|
133
|
+
* crossfade.
|
|
134
|
+
*/
|
|
135
|
+
|
|
136
|
+
declare const DEPTH3_FX: EffectDefinition[];
|
|
137
|
+
/** Register the 6.5 3D pack (idempotent). */
|
|
138
|
+
declare function register3dEffects(): void;
|
|
139
|
+
|
|
89
140
|
/**
|
|
90
141
|
* 5.5 — generative backgrounds on Canvas 2D, registered through
|
|
91
142
|
* `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
|
|
@@ -158,5 +209,5 @@ declare const FX2_PACKS: Record<string, EffectDefinition[]>;
|
|
|
158
209
|
/** Register every 6.x pack (idempotent). */
|
|
159
210
|
declare function registerFx2(): void;
|
|
160
211
|
|
|
161
|
-
export { FX2_PACKS, GLSL_HEAD, GPU_FX, TEXT3_FX, fieldFallback, registerFx2, registerGpuEffects, registerTextEffects3, shaderBackground, splitChars, supportsWebGL2 };
|
|
212
|
+
export { DEPTH3_FX, FX2_PACKS, GLSL_HEAD, GPU_FX, LIGHT_FX, TEXT3_FX, fieldFallback, register3dEffects, registerFx2, registerGpuEffects, registerLightEffects, registerTextEffects3, shaderBackground, splitChars, supportsWebGL2, trackPointer };
|
|
162
213
|
export type { ShaderSpec };
|
package/dist/components/fx2.js
CHANGED
|
@@ -1,22 +1,29 @@
|
|
|
1
|
-
import { G as GPU_FX, r as registerGpuEffects } from '../chunks/gpu-
|
|
2
|
-
export { a as GLSL_HEAD, f as fieldFallback, s as shaderBackground, b as supportsWebGL2 } from '../chunks/gpu-
|
|
1
|
+
import { G as GPU_FX, r as registerGpuEffects } from '../chunks/gpu-EjV49FQk.js';
|
|
2
|
+
export { a as GLSL_HEAD, f as fieldFallback, s as shaderBackground, b as supportsWebGL2 } from '../chunks/gpu-EjV49FQk.js';
|
|
3
3
|
import { TEXT3_FX, registerTextEffects3 } from './fx-text.js';
|
|
4
4
|
export { splitChars } from './fx-text.js';
|
|
5
|
+
import { LIGHT_FX, registerLightEffects } from './fx-light.js';
|
|
6
|
+
export { trackPointer } from './fx-light.js';
|
|
7
|
+
import { DEPTH3_FX, register3dEffects } from './fx-3d.js';
|
|
5
8
|
import '../chunks/registry-Bu5NrAyA.js';
|
|
6
9
|
import '../chunks/base-DchG4q_S.js';
|
|
7
|
-
import '../chunks/generative-
|
|
8
|
-
import '../chunks/shared-
|
|
10
|
+
import '../chunks/generative-2LhxG5BJ.js';
|
|
11
|
+
import '../chunks/shared-CkKHWrtJ.js';
|
|
9
12
|
|
|
10
13
|
/** The 6.x effect packs by name. */
|
|
11
14
|
const FX2_PACKS = {
|
|
12
15
|
gpu: GPU_FX,
|
|
13
16
|
text: TEXT3_FX,
|
|
17
|
+
light: LIGHT_FX,
|
|
18
|
+
depth: DEPTH3_FX,
|
|
14
19
|
};
|
|
15
20
|
/** Register every 6.x pack (idempotent). */
|
|
16
21
|
function registerFx2() {
|
|
17
22
|
registerGpuEffects();
|
|
18
23
|
registerTextEffects3();
|
|
24
|
+
registerLightEffects();
|
|
25
|
+
register3dEffects();
|
|
19
26
|
}
|
|
20
27
|
|
|
21
|
-
export { FX2_PACKS, GPU_FX, TEXT3_FX, registerFx2, registerGpuEffects, registerTextEffects3 };
|
|
28
|
+
export { DEPTH3_FX, FX2_PACKS, GPU_FX, LIGHT_FX, TEXT3_FX, register3dEffects, registerFx2, registerGpuEffects, registerLightEffects, registerTextEffects3 };
|
|
22
29
|
//# sourceMappingURL=fx2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fx2.js","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nimport { GPU_FX, registerGpuEffects } from './gpu';\nimport { TEXT3_FX, registerTextEffects3, splitChars } from './text3';\n\nexport { GPU_FX, registerGpuEffects, TEXT3_FX, registerTextEffects3, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport type { ShaderSpec } from './gl';\n\n/** The 6.x effect packs by name. */\nexport const FX2_PACKS: Record<string, EffectDefinition[]> = {\n gpu: GPU_FX,\n text: TEXT3_FX,\n};\n\n/** Register every 6.x pack (idempotent). */\nexport function registerFx2(): void {\n registerGpuEffects();\n registerTextEffects3();\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"fx2.js","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nimport { GPU_FX, registerGpuEffects } from './gpu';\nimport { TEXT3_FX, registerTextEffects3, splitChars } from './text3';\nimport { LIGHT_FX, registerLightEffects, trackPointer } from './light';\nimport { DEPTH3_FX, register3dEffects } from './depth3';\n\nexport { GPU_FX, registerGpuEffects, TEXT3_FX, registerTextEffects3, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightEffects, trackPointer };\n\nexport { DEPTH3_FX, register3dEffects };\n\n/** The 6.x effect packs by name. */\nexport const FX2_PACKS: Record<string, EffectDefinition[]> = {\n gpu: GPU_FX,\n text: TEXT3_FX,\n light: LIGHT_FX,\n depth: DEPTH3_FX,\n};\n\n/** Register every 6.x pack (idempotent). */\nexport function registerFx2(): void {\n registerGpuEffects();\n registerTextEffects3();\n registerLightEffects();\n register3dEffects();\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAmBA;AACO,MAAM,SAAS,GAAuC;AAC3D,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,KAAK,EAAE,QAAQ;AACf,IAAA,KAAK,EAAE,SAAS;;AAGlB;SACgB,WAAW,GAAA;AACzB,IAAA,kBAAkB,EAAE;AACpB,IAAA,oBAAoB,EAAE;AACtB,IAAA,oBAAoB,EAAE;AACtB,IAAA,iBAAiB,EAAE;AACrB;;;;"}
|