use-scroll-animate 8.2.0 → 8.4.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 +28 -0
- package/dist/components/fx-cyber.cjs +140 -0
- package/dist/components/fx-cyber.cjs.map +1 -0
- package/dist/components/fx-cyber.d.cts +66 -0
- package/dist/components/fx-cyber.d.ts +66 -0
- package/dist/components/fx-cyber.js +136 -0
- package/dist/components/fx-cyber.js.map +1 -0
- package/dist/components/fx-organic.cjs +115 -0
- package/dist/components/fx-organic.cjs.map +1 -0
- package/dist/components/fx-organic.d.cts +66 -0
- package/dist/components/fx-organic.d.ts +66 -0
- package/dist/components/fx-organic.js +111 -0
- package/dist/components/fx-organic.js.map +1 -0
- package/dist/components/fx2.cjs +12 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +45 -1
- package/dist/components/fx2.d.ts +45 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +437 -162
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +67 -2
- package/dist/components/widgets.d.ts +67 -2
- package/dist/components/widgets.js +433 -163
- package/dist/components/widgets.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 +43 -0
- package/package.json +41 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-organic.cjs","sources":["../../src/components/fx2/organic.ts"],"sourcesContent":["/**\n * 8.3 — Organic pack (`motionary/fx/organic`, also `motionary/components/fx-organic`):\n *\n * - `vine-grow` (enter) — SVG paths inside grow along their length like a\n * vine and `[data-leaf]` / circles pop in along the way (`duration`).\n * - `bloom` (enter) — the element's children unfold from the centre like\n * petals (or the element itself blooms open) (`stagger`).\n * - `water-drop` (attention) — the element dips like a drop hit water and\n * concentric ripples spread out (`rings`, `color`).\n * - `breathe` (loop) — a slow organic morph of shape and scale, like a\n * living blob; the cleanup stops it (`duration`).\n *\n * Reduced motion: vine-grow shows the vine, bloom fades in, water-drop does\n * nothing, breathe is skipped.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** A blob border-radius (\"63% 37% 54% 46% / 55% 48% 52% 45%\") from a seed (8.3). */\nexport function blobRadius(seed: number): string {\n let s = Math.abs(Math.round(seed * 1000)) % 233280 || 7;\n const r = () => 30 + ((s = (s * 9301 + 49297) % 233280) / 233280) * 40;\n const a = [r(), r(), r(), r()].map(Math.round);\n const b = [r(), r(), r(), r()].map(Math.round);\n return `${a[0]}% ${100 - a[0]}% ${a[2]}% ${100 - a[2]}% / ${b[0]}% ${b[1]}% ${100 - b[1]}% ${100 - b[0]}%`;\n}\n\nconst fade = (el: HTMLElement, ctx: EffectContext) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);\n\nexport const ORGANIC_FX: EffectDefinition[] = [\n {\n name: 'vine-grow',\n kind: 'enter',\n description: 'SVG paths grow along their length like a vine; `[data-leaf]` / circles pop in along the way (`duration`).',\n defaults: { duration: 1600 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n const paths = Array.from(el.querySelectorAll<SVGGeometryElement>('path, polyline, line'));\n const leaves = Array.from(el.querySelectorAll<SVGElement | HTMLElement>('[data-leaf], circle, ellipse'));\n const runs: (Promise<unknown> | undefined)[] = paths.map((p) => {\n let len = 300;\n try {\n len = p.getTotalLength?.() || 300;\n } catch {\n /* not rendered */\n }\n const prev = p.style.strokeDasharray;\n p.style.strokeDasharray = `${len}`;\n ctx.onCleanup(() => (p.style.strokeDasharray = prev));\n return ctx.animate(p, [{ strokeDashoffset: `${len}` }, { strokeDashoffset: '0' }], { duration: o.duration, easing: 'cubic-bezier(.4,.1,.3,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n });\n leaves.forEach((l, i) => {\n (l as any).style.transformBox = 'fill-box';\n (l as any).style.transformOrigin = 'center';\n runs.push(ctx.animate(l, [{ transform: 'scale(0) rotate(-40deg)', opacity: 0 }, { transform: 'scale(1.2) rotate(8deg)', opacity: 1, offset: 0.7 }, { transform: 'none', opacity: 1 }], { duration: 500, delay: (o.duration * (i + 1)) / (leaves.length + 1), easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined));\n });\n return Promise.all(runs).then(() => undefined);\n },\n },\n {\n name: 'bloom',\n kind: 'enter',\n description: \"The element's children unfold from the centre like petals, or the element blooms open (`stagger`).\",\n defaults: { stagger: 70, duration: 700 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const kids = Array.from(el.children) as HTMLElement[];\n const items = kids.length > 1 ? kids : [el];\n return Promise.all(\n items.map((k, i) => {\n if (ctx.reduced) return fade(k, ctx);\n const rot = (i % 2 ? 1 : -1) * (25 + i * 6);\n return ctx.animate(k, [{ transform: `scale(0) rotate(${rot}deg)`, opacity: 0 }, { transform: 'scale(1.1) rotate(-3deg)', opacity: 1, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, delay: i * o.stagger, easing: 'cubic-bezier(.3,1.3,.5,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n })\n ).then(() => undefined);\n },\n },\n {\n name: 'water-drop',\n kind: 'attention',\n description: 'The element dips like a drop hit water and concentric ripples spread out (`rings`, `color`).',\n defaults: { rings: 3, color: 'rgba(14,165,233,.55)', duration: 1200 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n if (getComputedStyle(el).position === 'static') {\n const prev = el.style.position;\n el.style.position = 'relative';\n ctx.onCleanup(() => (el.style.position = prev));\n }\n const runs: (Promise<unknown> | undefined)[] = [ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(.94, .9) translateY(3px)', offset: 0.2 }, { transform: 'scale(1.03, 1.05)', offset: 0.45 }, { transform: 'none' }], { duration: 700, easing: 'ease-out' })?.finished.catch(() => undefined)];\n const n = Math.max(1, Math.min(5, Number(o.rings) || 3));\n for (let i = 0; i < n; i++) {\n const r = document.createElement('span');\n r.setAttribute('aria-hidden', 'true');\n Object.assign(r.style, { position: 'absolute', left: '50%', top: '50%', width: '100%', aspectRatio: '2 / 1', borderRadius: '50%', border: `2px solid ${o.color}`, translate: '-50% -50%', pointerEvents: 'none' });\n el.appendChild(r);\n const end = () => r.remove();\n ctx.onCleanup(end);\n const a = ctx.animate(r, [{ transform: 'scale(.2)', opacity: 1 }, { transform: 'scale(1.9)', opacity: 0 }], { duration: o.duration, delay: 120 + i * 220, easing: 'ease-out', fill: 'backwards' });\n runs.push(a ? a.finished.then(end, end) : (end(), undefined));\n }\n return Promise.all(runs).then(() => undefined);\n },\n },\n {\n name: 'breathe',\n kind: 'loop',\n description: 'A slow organic morph of shape and scale, like a living blob, until the cleanup runs (`duration`).',\n defaults: { duration: 6000 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const prev = el.style.borderRadius;\n const frames: Keyframe[] = [0, 1, 2, 3, 0].map((i, k) => ({ borderRadius: blobRadius(i + 1), transform: `scale(${k % 2 ? 1.04 : 1}) rotate(${k % 2 ? 4 : -2}deg)`, offset: k / 4 }));\n const a = ctx.animate(el, frames, { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n return () => {\n a?.cancel();\n el.style.borderRadius = prev;\n };\n },\n },\n];\n\n/** Register vine-grow, bloom, water-drop and breathe (8.3). */\nexport function registerOrganicPack(): void {\n registerEffects(ORGANIC_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
2
|
+
type Cleanup = () => void;
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 5.0 — unified plugin-style effect registration. Every effect (built-in or
|
|
6
|
+
* yours) is a plain object registered once and played the same way:
|
|
7
|
+
* `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
|
|
8
|
+
* `<usa-fx effect="name" trigger="click">`. Effects get a context that
|
|
9
|
+
* already applies reduced motion, motion sensitivity, intensity and the
|
|
10
|
+
* animation budget.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
|
|
14
|
+
type EffectKind = (typeof EFFECT_KINDS)[number];
|
|
15
|
+
interface EffectContext {
|
|
16
|
+
/** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
|
|
17
|
+
readonly reduced: boolean;
|
|
18
|
+
readonly sensitivity: MotionSensitivity;
|
|
19
|
+
/** The triggering event (pointer position for click effects), if any. */
|
|
20
|
+
readonly event?: Event;
|
|
21
|
+
/** `el.animate()` with the library's motion rules (may return `null`). */
|
|
22
|
+
animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
|
|
23
|
+
/** Register teardown for long-running effects (loops, listeners). */
|
|
24
|
+
onCleanup(fn: Cleanup): void;
|
|
25
|
+
}
|
|
26
|
+
interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
|
|
27
|
+
/** Unique, kebab-case. */
|
|
28
|
+
name: string;
|
|
29
|
+
kind: EffectKind;
|
|
30
|
+
/** One line for docs and the gallery. */
|
|
31
|
+
description?: string;
|
|
32
|
+
/** Option defaults (merged under the caller's options). */
|
|
33
|
+
defaults?: Partial<O>;
|
|
34
|
+
/**
|
|
35
|
+
* Under reduced motion: `'skip'` (do nothing — default for loop, background
|
|
36
|
+
* and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
|
|
37
|
+
* effect degrades itself — default for everything else).
|
|
38
|
+
*/
|
|
39
|
+
reduced?: 'skip' | 'run';
|
|
40
|
+
/** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
|
|
41
|
+
run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* 8.3 — Organic pack (`motionary/fx/organic`, also `motionary/components/fx-organic`):
|
|
46
|
+
*
|
|
47
|
+
* - `vine-grow` (enter) — SVG paths inside grow along their length like a
|
|
48
|
+
* vine and `[data-leaf]` / circles pop in along the way (`duration`).
|
|
49
|
+
* - `bloom` (enter) — the element's children unfold from the centre like
|
|
50
|
+
* petals (or the element itself blooms open) (`stagger`).
|
|
51
|
+
* - `water-drop` (attention) — the element dips like a drop hit water and
|
|
52
|
+
* concentric ripples spread out (`rings`, `color`).
|
|
53
|
+
* - `breathe` (loop) — a slow organic morph of shape and scale, like a
|
|
54
|
+
* living blob; the cleanup stops it (`duration`).
|
|
55
|
+
*
|
|
56
|
+
* Reduced motion: vine-grow shows the vine, bloom fades in, water-drop does
|
|
57
|
+
* nothing, breathe is skipped.
|
|
58
|
+
*/
|
|
59
|
+
|
|
60
|
+
/** A blob border-radius ("63% 37% 54% 46% / 55% 48% 52% 45%") from a seed (8.3). */
|
|
61
|
+
declare function blobRadius(seed: number): string;
|
|
62
|
+
declare const ORGANIC_FX: EffectDefinition[];
|
|
63
|
+
/** Register vine-grow, bloom, water-drop and breathe (8.3). */
|
|
64
|
+
declare function registerOrganicPack(): void;
|
|
65
|
+
|
|
66
|
+
export { ORGANIC_FX, blobRadius, registerOrganicPack };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
|
|
2
|
+
type Cleanup = () => void;
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 5.0 — unified plugin-style effect registration. Every effect (built-in or
|
|
6
|
+
* yours) is a plain object registered once and played the same way:
|
|
7
|
+
* `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
|
|
8
|
+
* `<usa-fx effect="name" trigger="click">`. Effects get a context that
|
|
9
|
+
* already applies reduced motion, motion sensitivity, intensity and the
|
|
10
|
+
* animation budget.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
|
|
14
|
+
type EffectKind = (typeof EFFECT_KINDS)[number];
|
|
15
|
+
interface EffectContext {
|
|
16
|
+
/** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
|
|
17
|
+
readonly reduced: boolean;
|
|
18
|
+
readonly sensitivity: MotionSensitivity;
|
|
19
|
+
/** The triggering event (pointer position for click effects), if any. */
|
|
20
|
+
readonly event?: Event;
|
|
21
|
+
/** `el.animate()` with the library's motion rules (may return `null`). */
|
|
22
|
+
animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
|
|
23
|
+
/** Register teardown for long-running effects (loops, listeners). */
|
|
24
|
+
onCleanup(fn: Cleanup): void;
|
|
25
|
+
}
|
|
26
|
+
interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
|
|
27
|
+
/** Unique, kebab-case. */
|
|
28
|
+
name: string;
|
|
29
|
+
kind: EffectKind;
|
|
30
|
+
/** One line for docs and the gallery. */
|
|
31
|
+
description?: string;
|
|
32
|
+
/** Option defaults (merged under the caller's options). */
|
|
33
|
+
defaults?: Partial<O>;
|
|
34
|
+
/**
|
|
35
|
+
* Under reduced motion: `'skip'` (do nothing — default for loop, background
|
|
36
|
+
* and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
|
|
37
|
+
* effect degrades itself — default for everything else).
|
|
38
|
+
*/
|
|
39
|
+
reduced?: 'skip' | 'run';
|
|
40
|
+
/** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
|
|
41
|
+
run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* 8.3 — Organic pack (`motionary/fx/organic`, also `motionary/components/fx-organic`):
|
|
46
|
+
*
|
|
47
|
+
* - `vine-grow` (enter) — SVG paths inside grow along their length like a
|
|
48
|
+
* vine and `[data-leaf]` / circles pop in along the way (`duration`).
|
|
49
|
+
* - `bloom` (enter) — the element's children unfold from the centre like
|
|
50
|
+
* petals (or the element itself blooms open) (`stagger`).
|
|
51
|
+
* - `water-drop` (attention) — the element dips like a drop hit water and
|
|
52
|
+
* concentric ripples spread out (`rings`, `color`).
|
|
53
|
+
* - `breathe` (loop) — a slow organic morph of shape and scale, like a
|
|
54
|
+
* living blob; the cleanup stops it (`duration`).
|
|
55
|
+
*
|
|
56
|
+
* Reduced motion: vine-grow shows the vine, bloom fades in, water-drop does
|
|
57
|
+
* nothing, breathe is skipped.
|
|
58
|
+
*/
|
|
59
|
+
|
|
60
|
+
/** A blob border-radius ("63% 37% 54% 46% / 55% 48% 52% 45%") from a seed (8.3). */
|
|
61
|
+
declare function blobRadius(seed: number): string;
|
|
62
|
+
declare const ORGANIC_FX: EffectDefinition[];
|
|
63
|
+
/** Register vine-grow, bloom, water-drop and breathe (8.3). */
|
|
64
|
+
declare function registerOrganicPack(): void;
|
|
65
|
+
|
|
66
|
+
export { ORGANIC_FX, blobRadius, registerOrganicPack };
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { registerEffects } from '../chunks/registry-CnO7ZVPK.js';
|
|
2
|
+
import '../chunks/base-CLuqlLfG.js';
|
|
3
|
+
|
|
4
|
+
/** A blob border-radius ("63% 37% 54% 46% / 55% 48% 52% 45%") from a seed (8.3). */
|
|
5
|
+
function blobRadius(seed) {
|
|
6
|
+
let s = Math.abs(Math.round(seed * 1000)) % 233280 || 7;
|
|
7
|
+
const r = () => 30 + ((s = (s * 9301 + 49297) % 233280) / 233280) * 40;
|
|
8
|
+
const a = [r(), r(), r(), r()].map(Math.round);
|
|
9
|
+
const b = [r(), r(), r(), r()].map(Math.round);
|
|
10
|
+
return `${a[0]}% ${100 - a[0]}% ${a[2]}% ${100 - a[2]}% / ${b[0]}% ${b[1]}% ${100 - b[1]}% ${100 - b[0]}%`;
|
|
11
|
+
}
|
|
12
|
+
const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
|
|
13
|
+
const ORGANIC_FX = [
|
|
14
|
+
{
|
|
15
|
+
name: 'vine-grow',
|
|
16
|
+
kind: 'enter',
|
|
17
|
+
description: 'SVG paths grow along their length like a vine; `[data-leaf]` / circles pop in along the way (`duration`).',
|
|
18
|
+
defaults: { duration: 1600 },
|
|
19
|
+
run: (el, o, ctx) => {
|
|
20
|
+
if (ctx.reduced)
|
|
21
|
+
return;
|
|
22
|
+
const paths = Array.from(el.querySelectorAll('path, polyline, line'));
|
|
23
|
+
const leaves = Array.from(el.querySelectorAll('[data-leaf], circle, ellipse'));
|
|
24
|
+
const runs = paths.map((p) => {
|
|
25
|
+
let len = 300;
|
|
26
|
+
try {
|
|
27
|
+
len = p.getTotalLength?.() || 300;
|
|
28
|
+
}
|
|
29
|
+
catch {
|
|
30
|
+
/* not rendered */
|
|
31
|
+
}
|
|
32
|
+
const prev = p.style.strokeDasharray;
|
|
33
|
+
p.style.strokeDasharray = `${len}`;
|
|
34
|
+
ctx.onCleanup(() => (p.style.strokeDasharray = prev));
|
|
35
|
+
return ctx.animate(p, [{ strokeDashoffset: `${len}` }, { strokeDashoffset: '0' }], { duration: o.duration, easing: 'cubic-bezier(.4,.1,.3,1)', fill: 'backwards' })?.finished.catch(() => undefined);
|
|
36
|
+
});
|
|
37
|
+
leaves.forEach((l, i) => {
|
|
38
|
+
l.style.transformBox = 'fill-box';
|
|
39
|
+
l.style.transformOrigin = 'center';
|
|
40
|
+
runs.push(ctx.animate(l, [{ transform: 'scale(0) rotate(-40deg)', opacity: 0 }, { transform: 'scale(1.2) rotate(8deg)', opacity: 1, offset: 0.7 }, { transform: 'none', opacity: 1 }], { duration: 500, delay: (o.duration * (i + 1)) / (leaves.length + 1), easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined));
|
|
41
|
+
});
|
|
42
|
+
return Promise.all(runs).then(() => undefined);
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: 'bloom',
|
|
47
|
+
kind: 'enter',
|
|
48
|
+
description: "The element's children unfold from the centre like petals, or the element blooms open (`stagger`).",
|
|
49
|
+
defaults: { stagger: 70, duration: 700 },
|
|
50
|
+
run: (el, o, ctx) => {
|
|
51
|
+
const kids = Array.from(el.children);
|
|
52
|
+
const items = kids.length > 1 ? kids : [el];
|
|
53
|
+
return Promise.all(items.map((k, i) => {
|
|
54
|
+
if (ctx.reduced)
|
|
55
|
+
return fade(k, ctx);
|
|
56
|
+
const rot = (i % 2 ? 1 : -1) * (25 + i * 6);
|
|
57
|
+
return ctx.animate(k, [{ transform: `scale(0) rotate(${rot}deg)`, opacity: 0 }, { transform: 'scale(1.1) rotate(-3deg)', opacity: 1, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, delay: i * o.stagger, easing: 'cubic-bezier(.3,1.3,.5,1)', fill: 'backwards' })?.finished.catch(() => undefined);
|
|
58
|
+
})).then(() => undefined);
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
name: 'water-drop',
|
|
63
|
+
kind: 'attention',
|
|
64
|
+
description: 'The element dips like a drop hit water and concentric ripples spread out (`rings`, `color`).',
|
|
65
|
+
defaults: { rings: 3, color: 'rgba(14,165,233,.55)', duration: 1200 },
|
|
66
|
+
run: (el, o, ctx) => {
|
|
67
|
+
if (ctx.reduced)
|
|
68
|
+
return;
|
|
69
|
+
if (getComputedStyle(el).position === 'static') {
|
|
70
|
+
const prev = el.style.position;
|
|
71
|
+
el.style.position = 'relative';
|
|
72
|
+
ctx.onCleanup(() => (el.style.position = prev));
|
|
73
|
+
}
|
|
74
|
+
const runs = [ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(.94, .9) translateY(3px)', offset: 0.2 }, { transform: 'scale(1.03, 1.05)', offset: 0.45 }, { transform: 'none' }], { duration: 700, easing: 'ease-out' })?.finished.catch(() => undefined)];
|
|
75
|
+
const n = Math.max(1, Math.min(5, Number(o.rings) || 3));
|
|
76
|
+
for (let i = 0; i < n; i++) {
|
|
77
|
+
const r = document.createElement('span');
|
|
78
|
+
r.setAttribute('aria-hidden', 'true');
|
|
79
|
+
Object.assign(r.style, { position: 'absolute', left: '50%', top: '50%', width: '100%', aspectRatio: '2 / 1', borderRadius: '50%', border: `2px solid ${o.color}`, translate: '-50% -50%', pointerEvents: 'none' });
|
|
80
|
+
el.appendChild(r);
|
|
81
|
+
const end = () => r.remove();
|
|
82
|
+
ctx.onCleanup(end);
|
|
83
|
+
const a = ctx.animate(r, [{ transform: 'scale(.2)', opacity: 1 }, { transform: 'scale(1.9)', opacity: 0 }], { duration: o.duration, delay: 120 + i * 220, easing: 'ease-out', fill: 'backwards' });
|
|
84
|
+
runs.push(a ? a.finished.then(end, end) : (end(), undefined));
|
|
85
|
+
}
|
|
86
|
+
return Promise.all(runs).then(() => undefined);
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
name: 'breathe',
|
|
91
|
+
kind: 'loop',
|
|
92
|
+
description: 'A slow organic morph of shape and scale, like a living blob, until the cleanup runs (`duration`).',
|
|
93
|
+
defaults: { duration: 6000 },
|
|
94
|
+
run: (el, o, ctx) => {
|
|
95
|
+
const prev = el.style.borderRadius;
|
|
96
|
+
const frames = [0, 1, 2, 3, 0].map((i, k) => ({ borderRadius: blobRadius(i + 1), transform: `scale(${k % 2 ? 1.04 : 1}) rotate(${k % 2 ? 4 : -2}deg)`, offset: k / 4 }));
|
|
97
|
+
const a = ctx.animate(el, frames, { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
|
|
98
|
+
return () => {
|
|
99
|
+
a?.cancel();
|
|
100
|
+
el.style.borderRadius = prev;
|
|
101
|
+
};
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
];
|
|
105
|
+
/** Register vine-grow, bloom, water-drop and breathe (8.3). */
|
|
106
|
+
function registerOrganicPack() {
|
|
107
|
+
registerEffects(ORGANIC_FX);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
export { ORGANIC_FX, blobRadius, registerOrganicPack };
|
|
111
|
+
//# sourceMappingURL=fx-organic.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-organic.js","sources":["../../src/components/fx2/organic.ts"],"sourcesContent":["/**\n * 8.3 — Organic pack (`motionary/fx/organic`, also `motionary/components/fx-organic`):\n *\n * - `vine-grow` (enter) — SVG paths inside grow along their length like a\n * vine and `[data-leaf]` / circles pop in along the way (`duration`).\n * - `bloom` (enter) — the element's children unfold from the centre like\n * petals (or the element itself blooms open) (`stagger`).\n * - `water-drop` (attention) — the element dips like a drop hit water and\n * concentric ripples spread out (`rings`, `color`).\n * - `breathe` (loop) — a slow organic morph of shape and scale, like a\n * living blob; the cleanup stops it (`duration`).\n *\n * Reduced motion: vine-grow shows the vine, bloom fades in, water-drop does\n * nothing, breathe is skipped.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** A blob border-radius (\"63% 37% 54% 46% / 55% 48% 52% 45%\") from a seed (8.3). */\nexport function blobRadius(seed: number): string {\n let s = Math.abs(Math.round(seed * 1000)) % 233280 || 7;\n const r = () => 30 + ((s = (s * 9301 + 49297) % 233280) / 233280) * 40;\n const a = [r(), r(), r(), r()].map(Math.round);\n const b = [r(), r(), r(), r()].map(Math.round);\n return `${a[0]}% ${100 - a[0]}% ${a[2]}% ${100 - a[2]}% / ${b[0]}% ${b[1]}% ${100 - b[1]}% ${100 - b[0]}%`;\n}\n\nconst fade = (el: HTMLElement, ctx: EffectContext) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);\n\nexport const ORGANIC_FX: EffectDefinition[] = [\n {\n name: 'vine-grow',\n kind: 'enter',\n description: 'SVG paths grow along their length like a vine; `[data-leaf]` / circles pop in along the way (`duration`).',\n defaults: { duration: 1600 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n const paths = Array.from(el.querySelectorAll<SVGGeometryElement>('path, polyline, line'));\n const leaves = Array.from(el.querySelectorAll<SVGElement | HTMLElement>('[data-leaf], circle, ellipse'));\n const runs: (Promise<unknown> | undefined)[] = paths.map((p) => {\n let len = 300;\n try {\n len = p.getTotalLength?.() || 300;\n } catch {\n /* not rendered */\n }\n const prev = p.style.strokeDasharray;\n p.style.strokeDasharray = `${len}`;\n ctx.onCleanup(() => (p.style.strokeDasharray = prev));\n return ctx.animate(p, [{ strokeDashoffset: `${len}` }, { strokeDashoffset: '0' }], { duration: o.duration, easing: 'cubic-bezier(.4,.1,.3,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n });\n leaves.forEach((l, i) => {\n (l as any).style.transformBox = 'fill-box';\n (l as any).style.transformOrigin = 'center';\n runs.push(ctx.animate(l, [{ transform: 'scale(0) rotate(-40deg)', opacity: 0 }, { transform: 'scale(1.2) rotate(8deg)', opacity: 1, offset: 0.7 }, { transform: 'none', opacity: 1 }], { duration: 500, delay: (o.duration * (i + 1)) / (leaves.length + 1), easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined));\n });\n return Promise.all(runs).then(() => undefined);\n },\n },\n {\n name: 'bloom',\n kind: 'enter',\n description: \"The element's children unfold from the centre like petals, or the element blooms open (`stagger`).\",\n defaults: { stagger: 70, duration: 700 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const kids = Array.from(el.children) as HTMLElement[];\n const items = kids.length > 1 ? kids : [el];\n return Promise.all(\n items.map((k, i) => {\n if (ctx.reduced) return fade(k, ctx);\n const rot = (i % 2 ? 1 : -1) * (25 + i * 6);\n return ctx.animate(k, [{ transform: `scale(0) rotate(${rot}deg)`, opacity: 0 }, { transform: 'scale(1.1) rotate(-3deg)', opacity: 1, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, delay: i * o.stagger, easing: 'cubic-bezier(.3,1.3,.5,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n })\n ).then(() => undefined);\n },\n },\n {\n name: 'water-drop',\n kind: 'attention',\n description: 'The element dips like a drop hit water and concentric ripples spread out (`rings`, `color`).',\n defaults: { rings: 3, color: 'rgba(14,165,233,.55)', duration: 1200 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n if (getComputedStyle(el).position === 'static') {\n const prev = el.style.position;\n el.style.position = 'relative';\n ctx.onCleanup(() => (el.style.position = prev));\n }\n const runs: (Promise<unknown> | undefined)[] = [ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(.94, .9) translateY(3px)', offset: 0.2 }, { transform: 'scale(1.03, 1.05)', offset: 0.45 }, { transform: 'none' }], { duration: 700, easing: 'ease-out' })?.finished.catch(() => undefined)];\n const n = Math.max(1, Math.min(5, Number(o.rings) || 3));\n for (let i = 0; i < n; i++) {\n const r = document.createElement('span');\n r.setAttribute('aria-hidden', 'true');\n Object.assign(r.style, { position: 'absolute', left: '50%', top: '50%', width: '100%', aspectRatio: '2 / 1', borderRadius: '50%', border: `2px solid ${o.color}`, translate: '-50% -50%', pointerEvents: 'none' });\n el.appendChild(r);\n const end = () => r.remove();\n ctx.onCleanup(end);\n const a = ctx.animate(r, [{ transform: 'scale(.2)', opacity: 1 }, { transform: 'scale(1.9)', opacity: 0 }], { duration: o.duration, delay: 120 + i * 220, easing: 'ease-out', fill: 'backwards' });\n runs.push(a ? a.finished.then(end, end) : (end(), undefined));\n }\n return Promise.all(runs).then(() => undefined);\n },\n },\n {\n name: 'breathe',\n kind: 'loop',\n description: 'A slow organic morph of shape and scale, like a living blob, until the cleanup runs (`duration`).',\n defaults: { duration: 6000 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const prev = el.style.borderRadius;\n const frames: Keyframe[] = [0, 1, 2, 3, 0].map((i, k) => ({ borderRadius: blobRadius(i + 1), transform: `scale(${k % 2 ? 1.04 : 1}) rotate(${k % 2 ? 4 : -2}deg)`, offset: k / 4 }));\n const a = ctx.animate(el, frames, { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n return () => {\n a?.cancel();\n el.style.borderRadius = prev;\n };\n },\n },\n];\n\n/** Register vine-grow, bloom, water-drop and breathe (8.3). */\nexport function registerOrganicPack(): void {\n registerEffects(ORGANIC_FX);\n}\n"],"names":[],"mappings":"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"}
|
package/dist/components/fx2.cjs
CHANGED
|
@@ -20,6 +20,8 @@ var components_fxForm = require('./fx-form.cjs');
|
|
|
20
20
|
var components_fxAi = require('./fx-ai.cjs');
|
|
21
21
|
var components_fxFestival = require('./fx-festival.cjs');
|
|
22
22
|
var components_fxRetro = require('./fx-retro.cjs');
|
|
23
|
+
var components_fxOrganic = require('./fx-organic.cjs');
|
|
24
|
+
var components_fxCyber = require('./fx-cyber.cjs');
|
|
23
25
|
require('../chunks/registry-BVklOepd.cjs');
|
|
24
26
|
require('../chunks/base-DoRUZBy-.cjs');
|
|
25
27
|
require('../chunks/generative-BHIj-NU0.cjs');
|
|
@@ -47,6 +49,8 @@ const EFFECT_PACKS = {
|
|
|
47
49
|
ai: components_fxAi.AI_FX,
|
|
48
50
|
festival: components_fxFestival.FESTIVAL_FX,
|
|
49
51
|
retro: components_fxRetro.RETRO_FX,
|
|
52
|
+
organic: components_fxOrganic.ORGANIC_FX,
|
|
53
|
+
cyber: components_fxCyber.CYBER_FX,
|
|
50
54
|
};
|
|
51
55
|
/** Register every 6.x effect pack (idempotent). */
|
|
52
56
|
function registerEffectPacks() {
|
|
@@ -69,6 +73,8 @@ function registerEffectPacks() {
|
|
|
69
73
|
components_fxAi.registerAiPack();
|
|
70
74
|
components_fxFestival.registerFestivalPack();
|
|
71
75
|
components_fxRetro.registerRetroPack();
|
|
76
|
+
components_fxOrganic.registerOrganicPack();
|
|
77
|
+
components_fxCyber.registerCyberPack();
|
|
72
78
|
}
|
|
73
79
|
|
|
74
80
|
exports.EFFECT_PACK_FORMAT = components_marketplace.EFFECT_PACK_FORMAT;
|
|
@@ -141,6 +147,12 @@ exports.sparkVectors = components_fxFestival.sparkVectors;
|
|
|
141
147
|
exports.RETRO_FX = components_fxRetro.RETRO_FX;
|
|
142
148
|
exports.pixelSteps = components_fxRetro.pixelSteps;
|
|
143
149
|
exports.registerRetroPack = components_fxRetro.registerRetroPack;
|
|
150
|
+
exports.ORGANIC_FX = components_fxOrganic.ORGANIC_FX;
|
|
151
|
+
exports.blobRadius = components_fxOrganic.blobRadius;
|
|
152
|
+
exports.registerOrganicPack = components_fxOrganic.registerOrganicPack;
|
|
153
|
+
exports.CYBER_FX = components_fxCyber.CYBER_FX;
|
|
154
|
+
exports.decodeFrame = components_fxCyber.decodeFrame;
|
|
155
|
+
exports.registerCyberPack = components_fxCyber.registerCyberPack;
|
|
144
156
|
exports.EFFECT_PACKS = EFFECT_PACKS;
|
|
145
157
|
exports.registerEffectPacks = registerEffectPacks;
|
|
146
158
|
//# 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';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\nimport { SOCIAL_FX, registerSocialPack, fanAngles } from './social';\nimport { GAME_FX, registerGamePack, throwPath } from './game';\nimport { GEO_FX, registerGeoPack, routeLength } from './geo';\nimport { FORM_FX, registerFormPack, shakeFrames } from './form';\nimport { AI_FX, registerAiPack, splitWords } from './ai';\nimport { FESTIVAL_FX, registerFestivalPack, sparkVectors } from './festival';\nimport { RETRO_FX, registerRetroPack, pixelSteps } from './retro2';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\nexport { SOCIAL_FX, registerSocialPack, fanAngles };\n\nexport { GAME_FX, registerGamePack, throwPath };\n\nexport { GEO_FX, registerGeoPack, routeLength };\n\nexport { FORM_FX, registerFormPack, shakeFrames };\n\nexport { AI_FX, registerAiPack, splitWords };\n\nexport { FESTIVAL_FX, registerFestivalPack, sparkVectors };\n\nexport { RETRO_FX, registerRetroPack, pixelSteps };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n gpu: GPU_FX,\n text: TEXT3_FX,\n light: LIGHT_FX,\n depth: DEPTH3_FX,\n morph: MORPH2_FX,\n transitions: TRANSITIONS2_FX,\n weather: WEATHER_FX,\n physics: PHYSICS2_FX,\n focus: FOCUS_FX,\n music: MUSIC_FX,\n chart: CHART_FX,\n shop: SHOP_FX,\n social: SOCIAL_FX,\n game: GAME_FX,\n geo: GEO_FX,\n form: FORM_FX,\n ai: AI_FX,\n festival: FESTIVAL_FX,\n retro: RETRO_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n registerGpuPack();\n registerTextPack();\n registerLightPack();\n register3dPack();\n registerMorphPack();\n registerTransitionsPack();\n registerWeatherPack();\n registerPhysicsPack();\n registerFocusPack();\n registerMusicPack();\n registerChartPack();\n registerShopPack();\n registerSocialPack();\n registerGamePack();\n registerGeoPack();\n registerFormPack();\n registerAiPack();\n registerFestivalPack();\n registerRetroPack();\n}\n\n\n"],"names":["GPU_FX","TEXT3_FX","LIGHT_FX","DEPTH3_FX","MORPH2_FX","TRANSITIONS2_FX","WEATHER_FX","PHYSICS2_FX","FOCUS_FX","MUSIC_FX","CHART_FX","SHOP_FX","SOCIAL_FX","GAME_FX","GEO_FX","FORM_FX","AI_FX","FESTIVAL_FX","RETRO_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack","registerFormPack","registerAiPack","registerFestivalPack","registerRetroPack"],"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';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\nimport { SOCIAL_FX, registerSocialPack, fanAngles } from './social';\nimport { GAME_FX, registerGamePack, throwPath } from './game';\nimport { GEO_FX, registerGeoPack, routeLength } from './geo';\nimport { FORM_FX, registerFormPack, shakeFrames } from './form';\nimport { AI_FX, registerAiPack, splitWords } from './ai';\nimport { FESTIVAL_FX, registerFestivalPack, sparkVectors } from './festival';\nimport { RETRO_FX, registerRetroPack, pixelSteps } from './retro2';\nimport { ORGANIC_FX, registerOrganicPack, blobRadius } from './organic';\nimport { CYBER_FX, registerCyberPack, decodeFrame } from './cyber';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\nexport { SOCIAL_FX, registerSocialPack, fanAngles };\n\nexport { GAME_FX, registerGamePack, throwPath };\n\nexport { GEO_FX, registerGeoPack, routeLength };\n\nexport { FORM_FX, registerFormPack, shakeFrames };\n\nexport { AI_FX, registerAiPack, splitWords };\n\nexport { FESTIVAL_FX, registerFestivalPack, sparkVectors };\n\nexport { RETRO_FX, registerRetroPack, pixelSteps };\n\nexport { ORGANIC_FX, registerOrganicPack, blobRadius };\n\nexport { CYBER_FX, registerCyberPack, decodeFrame };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n gpu: GPU_FX,\n text: TEXT3_FX,\n light: LIGHT_FX,\n depth: DEPTH3_FX,\n morph: MORPH2_FX,\n transitions: TRANSITIONS2_FX,\n weather: WEATHER_FX,\n physics: PHYSICS2_FX,\n focus: FOCUS_FX,\n music: MUSIC_FX,\n chart: CHART_FX,\n shop: SHOP_FX,\n social: SOCIAL_FX,\n game: GAME_FX,\n geo: GEO_FX,\n form: FORM_FX,\n ai: AI_FX,\n festival: FESTIVAL_FX,\n retro: RETRO_FX,\n organic: ORGANIC_FX,\n cyber: CYBER_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n registerGpuPack();\n registerTextPack();\n registerLightPack();\n register3dPack();\n registerMorphPack();\n registerTransitionsPack();\n registerWeatherPack();\n registerPhysicsPack();\n registerFocusPack();\n registerMusicPack();\n registerChartPack();\n registerShopPack();\n registerSocialPack();\n registerGamePack();\n registerGeoPack();\n registerFormPack();\n registerAiPack();\n registerFestivalPack();\n registerRetroPack();\n registerOrganicPack();\n registerCyberPack();\n}\n\n\n"],"names":["GPU_FX","TEXT3_FX","LIGHT_FX","DEPTH3_FX","MORPH2_FX","TRANSITIONS2_FX","WEATHER_FX","PHYSICS2_FX","FOCUS_FX","MUSIC_FX","CHART_FX","SHOP_FX","SOCIAL_FX","GAME_FX","GEO_FX","FORM_FX","AI_FX","FESTIVAL_FX","RETRO_FX","ORGANIC_FX","CYBER_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack","registerFormPack","registerAiPack","registerFestivalPack","registerRetroPack","registerOrganicPack","registerCyberPack"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA;AACO,MAAM,YAAY,GAAuC;AAC9D,IAAA,GAAG,EAAEA,uBAAM;AACX,IAAA,IAAI,EAAEC,0BAAQ;AACd,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,yBAAS;AAChB,IAAA,KAAK,EAAEC,4BAAS;AAChB,IAAA,WAAW,EAAEC,wCAAe;AAC5B,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,OAAO,EAAEC,gCAAW;AACpB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,GAAG,EAAEC,uBAAM;AACX,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,EAAE,EAAEC,qBAAK;AACT,IAAA,QAAQ,EAAEC,iCAAW;AACrB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,KAAK,EAAEC,2BAAQ;;AAGjB;SACgB,mBAAmB,GAAA;AACjC,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,gDAAuB,EAAE;AACzB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,0CAAoB,EAAE;AACtB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -632,6 +632,50 @@ declare const RETRO_FX: EffectDefinition[];
|
|
|
632
632
|
/** Register pixelate-in, crt-power, vhs-glitch and y2k-shine (8.2). */
|
|
633
633
|
declare function registerRetroPack(): void;
|
|
634
634
|
|
|
635
|
+
/**
|
|
636
|
+
* 8.3 — Organic pack (`motionary/fx/organic`, also `motionary/components/fx-organic`):
|
|
637
|
+
*
|
|
638
|
+
* - `vine-grow` (enter) — SVG paths inside grow along their length like a
|
|
639
|
+
* vine and `[data-leaf]` / circles pop in along the way (`duration`).
|
|
640
|
+
* - `bloom` (enter) — the element's children unfold from the centre like
|
|
641
|
+
* petals (or the element itself blooms open) (`stagger`).
|
|
642
|
+
* - `water-drop` (attention) — the element dips like a drop hit water and
|
|
643
|
+
* concentric ripples spread out (`rings`, `color`).
|
|
644
|
+
* - `breathe` (loop) — a slow organic morph of shape and scale, like a
|
|
645
|
+
* living blob; the cleanup stops it (`duration`).
|
|
646
|
+
*
|
|
647
|
+
* Reduced motion: vine-grow shows the vine, bloom fades in, water-drop does
|
|
648
|
+
* nothing, breathe is skipped.
|
|
649
|
+
*/
|
|
650
|
+
|
|
651
|
+
/** A blob border-radius ("63% 37% 54% 46% / 55% 48% 52% 45%") from a seed (8.3). */
|
|
652
|
+
declare function blobRadius(seed: number): string;
|
|
653
|
+
declare const ORGANIC_FX: EffectDefinition[];
|
|
654
|
+
/** Register vine-grow, bloom, water-drop and breathe (8.3). */
|
|
655
|
+
declare function registerOrganicPack(): void;
|
|
656
|
+
|
|
657
|
+
/**
|
|
658
|
+
* 8.4 — Cyber / sci-fi pack (`motionary/fx/cyber`, also `motionary/components/fx-cyber`):
|
|
659
|
+
*
|
|
660
|
+
* - `hud-frame` (enter) — corner brackets draw in around the element and a
|
|
661
|
+
* scan bar sweeps across it, like a HUD locking on (`color`).
|
|
662
|
+
* - `scanline-sweep` (attention) — a bright horizontal scanline runs down
|
|
663
|
+
* the element (`color`, `passes`).
|
|
664
|
+
* - `hologram` (loop) — a flickering, translucent cyan hologram look with
|
|
665
|
+
* drifting scan bands; the cleanup restores the element (`color`).
|
|
666
|
+
* - `data-decode` (enter) — the text resolves from random glyphs to the real
|
|
667
|
+
* characters, left to right (`speed`).
|
|
668
|
+
*
|
|
669
|
+
* Reduced motion: hud-frame / data-decode just show, scanline-sweep does
|
|
670
|
+
* nothing, hologram is skipped. Overlays are `aria-hidden` and removed.
|
|
671
|
+
*/
|
|
672
|
+
|
|
673
|
+
/** The `k`-th frame of decoding `text` over `n` frames: resolved prefix + random glyphs (8.4). */
|
|
674
|
+
declare function decodeFrame(text: string, k: number, n: number, rnd?: () => number): string;
|
|
675
|
+
declare const CYBER_FX: EffectDefinition[];
|
|
676
|
+
/** Register hud-frame, scanline-sweep, hologram and data-decode (8.4). */
|
|
677
|
+
declare function registerCyberPack(): void;
|
|
678
|
+
|
|
635
679
|
/**
|
|
636
680
|
* 5.5 — generative backgrounds on Canvas 2D, registered through
|
|
637
681
|
* `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
|
|
@@ -741,5 +785,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
|
|
|
741
785
|
/** Register every 6.x effect pack (idempotent). */
|
|
742
786
|
declare function registerEffectPacks(): void;
|
|
743
787
|
|
|
744
|
-
export { AI_FX, CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule };
|
|
788
|
+
export { AI_FX, CHART_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, blobRadius, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule };
|
|
745
789
|
export type { EffectPackManifest, ShaderSpec };
|
package/dist/components/fx2.d.ts
CHANGED
|
@@ -632,6 +632,50 @@ declare const RETRO_FX: EffectDefinition[];
|
|
|
632
632
|
/** Register pixelate-in, crt-power, vhs-glitch and y2k-shine (8.2). */
|
|
633
633
|
declare function registerRetroPack(): void;
|
|
634
634
|
|
|
635
|
+
/**
|
|
636
|
+
* 8.3 — Organic pack (`motionary/fx/organic`, also `motionary/components/fx-organic`):
|
|
637
|
+
*
|
|
638
|
+
* - `vine-grow` (enter) — SVG paths inside grow along their length like a
|
|
639
|
+
* vine and `[data-leaf]` / circles pop in along the way (`duration`).
|
|
640
|
+
* - `bloom` (enter) — the element's children unfold from the centre like
|
|
641
|
+
* petals (or the element itself blooms open) (`stagger`).
|
|
642
|
+
* - `water-drop` (attention) — the element dips like a drop hit water and
|
|
643
|
+
* concentric ripples spread out (`rings`, `color`).
|
|
644
|
+
* - `breathe` (loop) — a slow organic morph of shape and scale, like a
|
|
645
|
+
* living blob; the cleanup stops it (`duration`).
|
|
646
|
+
*
|
|
647
|
+
* Reduced motion: vine-grow shows the vine, bloom fades in, water-drop does
|
|
648
|
+
* nothing, breathe is skipped.
|
|
649
|
+
*/
|
|
650
|
+
|
|
651
|
+
/** A blob border-radius ("63% 37% 54% 46% / 55% 48% 52% 45%") from a seed (8.3). */
|
|
652
|
+
declare function blobRadius(seed: number): string;
|
|
653
|
+
declare const ORGANIC_FX: EffectDefinition[];
|
|
654
|
+
/** Register vine-grow, bloom, water-drop and breathe (8.3). */
|
|
655
|
+
declare function registerOrganicPack(): void;
|
|
656
|
+
|
|
657
|
+
/**
|
|
658
|
+
* 8.4 — Cyber / sci-fi pack (`motionary/fx/cyber`, also `motionary/components/fx-cyber`):
|
|
659
|
+
*
|
|
660
|
+
* - `hud-frame` (enter) — corner brackets draw in around the element and a
|
|
661
|
+
* scan bar sweeps across it, like a HUD locking on (`color`).
|
|
662
|
+
* - `scanline-sweep` (attention) — a bright horizontal scanline runs down
|
|
663
|
+
* the element (`color`, `passes`).
|
|
664
|
+
* - `hologram` (loop) — a flickering, translucent cyan hologram look with
|
|
665
|
+
* drifting scan bands; the cleanup restores the element (`color`).
|
|
666
|
+
* - `data-decode` (enter) — the text resolves from random glyphs to the real
|
|
667
|
+
* characters, left to right (`speed`).
|
|
668
|
+
*
|
|
669
|
+
* Reduced motion: hud-frame / data-decode just show, scanline-sweep does
|
|
670
|
+
* nothing, hologram is skipped. Overlays are `aria-hidden` and removed.
|
|
671
|
+
*/
|
|
672
|
+
|
|
673
|
+
/** The `k`-th frame of decoding `text` over `n` frames: resolved prefix + random glyphs (8.4). */
|
|
674
|
+
declare function decodeFrame(text: string, k: number, n: number, rnd?: () => number): string;
|
|
675
|
+
declare const CYBER_FX: EffectDefinition[];
|
|
676
|
+
/** Register hud-frame, scanline-sweep, hologram and data-decode (8.4). */
|
|
677
|
+
declare function registerCyberPack(): void;
|
|
678
|
+
|
|
635
679
|
/**
|
|
636
680
|
* 5.5 — generative backgrounds on Canvas 2D, registered through
|
|
637
681
|
* `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
|
|
@@ -741,5 +785,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
|
|
|
741
785
|
/** Register every 6.x effect pack (idempotent). */
|
|
742
786
|
declare function registerEffectPacks(): void;
|
|
743
787
|
|
|
744
|
-
export { AI_FX, CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule };
|
|
788
|
+
export { AI_FX, CHART_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, blobRadius, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule };
|
|
745
789
|
export type { EffectPackManifest, ShaderSpec };
|
package/dist/components/fx2.js
CHANGED
|
@@ -35,6 +35,10 @@ import { FESTIVAL_FX, registerFestivalPack } from './fx-festival.js';
|
|
|
35
35
|
export { sparkVectors } from './fx-festival.js';
|
|
36
36
|
import { RETRO_FX, registerRetroPack } from './fx-retro.js';
|
|
37
37
|
export { pixelSteps } from './fx-retro.js';
|
|
38
|
+
import { ORGANIC_FX, registerOrganicPack } from './fx-organic.js';
|
|
39
|
+
export { blobRadius } from './fx-organic.js';
|
|
40
|
+
import { CYBER_FX, registerCyberPack } from './fx-cyber.js';
|
|
41
|
+
export { decodeFrame } from './fx-cyber.js';
|
|
38
42
|
import '../chunks/registry-CnO7ZVPK.js';
|
|
39
43
|
import '../chunks/base-CLuqlLfG.js';
|
|
40
44
|
import '../chunks/generative-2LhxG5BJ.js';
|
|
@@ -62,6 +66,8 @@ const EFFECT_PACKS = {
|
|
|
62
66
|
ai: AI_FX,
|
|
63
67
|
festival: FESTIVAL_FX,
|
|
64
68
|
retro: RETRO_FX,
|
|
69
|
+
organic: ORGANIC_FX,
|
|
70
|
+
cyber: CYBER_FX,
|
|
65
71
|
};
|
|
66
72
|
/** Register every 6.x effect pack (idempotent). */
|
|
67
73
|
function registerEffectPacks() {
|
|
@@ -84,7 +90,9 @@ function registerEffectPacks() {
|
|
|
84
90
|
registerAiPack();
|
|
85
91
|
registerFestivalPack();
|
|
86
92
|
registerRetroPack();
|
|
93
|
+
registerOrganicPack();
|
|
94
|
+
registerCyberPack();
|
|
87
95
|
}
|
|
88
96
|
|
|
89
|
-
export { AI_FX, CHART_FX, DEPTH3_FX, EFFECT_PACKS, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, WEATHER_FX, register3dPack, registerAiPack, registerChartPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack };
|
|
97
|
+
export { AI_FX, CHART_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, WEATHER_FX, register3dPack, registerAiPack, registerChartPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack };
|
|
90
98
|
//# 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';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\nimport { SOCIAL_FX, registerSocialPack, fanAngles } from './social';\nimport { GAME_FX, registerGamePack, throwPath } from './game';\nimport { GEO_FX, registerGeoPack, routeLength } from './geo';\nimport { FORM_FX, registerFormPack, shakeFrames } from './form';\nimport { AI_FX, registerAiPack, splitWords } from './ai';\nimport { FESTIVAL_FX, registerFestivalPack, sparkVectors } from './festival';\nimport { RETRO_FX, registerRetroPack, pixelSteps } from './retro2';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\nexport { SOCIAL_FX, registerSocialPack, fanAngles };\n\nexport { GAME_FX, registerGamePack, throwPath };\n\nexport { GEO_FX, registerGeoPack, routeLength };\n\nexport { FORM_FX, registerFormPack, shakeFrames };\n\nexport { AI_FX, registerAiPack, splitWords };\n\nexport { FESTIVAL_FX, registerFestivalPack, sparkVectors };\n\nexport { RETRO_FX, registerRetroPack, pixelSteps };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n gpu: GPU_FX,\n text: TEXT3_FX,\n light: LIGHT_FX,\n depth: DEPTH3_FX,\n morph: MORPH2_FX,\n transitions: TRANSITIONS2_FX,\n weather: WEATHER_FX,\n physics: PHYSICS2_FX,\n focus: FOCUS_FX,\n music: MUSIC_FX,\n chart: CHART_FX,\n shop: SHOP_FX,\n social: SOCIAL_FX,\n game: GAME_FX,\n geo: GEO_FX,\n form: FORM_FX,\n ai: AI_FX,\n festival: FESTIVAL_FX,\n retro: RETRO_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n registerGpuPack();\n registerTextPack();\n registerLightPack();\n register3dPack();\n registerMorphPack();\n registerTransitionsPack();\n registerWeatherPack();\n registerPhysicsPack();\n registerFocusPack();\n registerMusicPack();\n registerChartPack();\n registerShopPack();\n registerSocialPack();\n registerGamePack();\n registerGeoPack();\n registerFormPack();\n registerAiPack();\n registerFestivalPack();\n registerRetroPack();\n}\n\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';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\nimport { SOCIAL_FX, registerSocialPack, fanAngles } from './social';\nimport { GAME_FX, registerGamePack, throwPath } from './game';\nimport { GEO_FX, registerGeoPack, routeLength } from './geo';\nimport { FORM_FX, registerFormPack, shakeFrames } from './form';\nimport { AI_FX, registerAiPack, splitWords } from './ai';\nimport { FESTIVAL_FX, registerFestivalPack, sparkVectors } from './festival';\nimport { RETRO_FX, registerRetroPack, pixelSteps } from './retro2';\nimport { ORGANIC_FX, registerOrganicPack, blobRadius } from './organic';\nimport { CYBER_FX, registerCyberPack, decodeFrame } from './cyber';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\nexport { SOCIAL_FX, registerSocialPack, fanAngles };\n\nexport { GAME_FX, registerGamePack, throwPath };\n\nexport { GEO_FX, registerGeoPack, routeLength };\n\nexport { FORM_FX, registerFormPack, shakeFrames };\n\nexport { AI_FX, registerAiPack, splitWords };\n\nexport { FESTIVAL_FX, registerFestivalPack, sparkVectors };\n\nexport { RETRO_FX, registerRetroPack, pixelSteps };\n\nexport { ORGANIC_FX, registerOrganicPack, blobRadius };\n\nexport { CYBER_FX, registerCyberPack, decodeFrame };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n gpu: GPU_FX,\n text: TEXT3_FX,\n light: LIGHT_FX,\n depth: DEPTH3_FX,\n morph: MORPH2_FX,\n transitions: TRANSITIONS2_FX,\n weather: WEATHER_FX,\n physics: PHYSICS2_FX,\n focus: FOCUS_FX,\n music: MUSIC_FX,\n chart: CHART_FX,\n shop: SHOP_FX,\n social: SOCIAL_FX,\n game: GAME_FX,\n geo: GEO_FX,\n form: FORM_FX,\n ai: AI_FX,\n festival: FESTIVAL_FX,\n retro: RETRO_FX,\n organic: ORGANIC_FX,\n cyber: CYBER_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n registerGpuPack();\n registerTextPack();\n registerLightPack();\n register3dPack();\n registerMorphPack();\n registerTransitionsPack();\n registerWeatherPack();\n registerPhysicsPack();\n registerFocusPack();\n registerMusicPack();\n registerChartPack();\n registerShopPack();\n registerSocialPack();\n registerGamePack();\n registerGeoPack();\n registerFormPack();\n registerAiPack();\n registerFestivalPack();\n registerRetroPack();\n registerOrganicPack();\n registerCyberPack();\n}\n\n\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA;AACO,MAAM,YAAY,GAAuC;AAC9D,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,IAAI,EAAE,QAAQ;AACd,IAAA,KAAK,EAAE,QAAQ;AACf,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,WAAW,EAAE,eAAe;AAC5B,IAAA,OAAO,EAAE,UAAU;AACnB,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,KAAK,EAAE,QAAQ;AACf,IAAA,KAAK,EAAE,QAAQ;AACf,IAAA,KAAK,EAAE,QAAQ;AACf,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,GAAG,EAAE,MAAM;AACX,IAAA,IAAI,EAAE,OAAO;AACb,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,QAAQ,EAAE,WAAW;AACrB,IAAA,KAAK,EAAE,QAAQ;AACf,IAAA,OAAO,EAAE,UAAU;AACnB,IAAA,KAAK,EAAE,QAAQ;;AAGjB;SACgB,mBAAmB,GAAA;AACjC,IAAA,eAAe,EAAE;AACjB,IAAA,gBAAgB,EAAE;AAClB,IAAA,iBAAiB,EAAE;AACnB,IAAA,cAAc,EAAE;AAChB,IAAA,iBAAiB,EAAE;AACnB,IAAA,uBAAuB,EAAE;AACzB,IAAA,mBAAmB,EAAE;AACrB,IAAA,mBAAmB,EAAE;AACrB,IAAA,iBAAiB,EAAE;AACnB,IAAA,iBAAiB,EAAE;AACnB,IAAA,iBAAiB,EAAE;AACnB,IAAA,gBAAgB,EAAE;AAClB,IAAA,kBAAkB,EAAE;AACpB,IAAA,gBAAgB,EAAE;AAClB,IAAA,eAAe,EAAE;AACjB,IAAA,gBAAgB,EAAE;AAClB,IAAA,cAAc,EAAE;AAChB,IAAA,oBAAoB,EAAE;AACtB,IAAA,iBAAiB,EAAE;AACnB,IAAA,mBAAmB,EAAE;AACrB,IAAA,iBAAiB,EAAE;AACrB;;;;"}
|