use-scroll-animate 7.4.0 → 7.6.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 -0
- package/dist/components/fx-game.cjs +127 -0
- package/dist/components/fx-game.cjs.map +1 -0
- package/dist/components/fx-game.d.cts +70 -0
- package/dist/components/fx-game.d.ts +70 -0
- package/dist/components/fx-game.js +123 -0
- package/dist/components/fx-game.js.map +1 -0
- package/dist/components/fx-geo.cjs +125 -0
- package/dist/components/fx-geo.cjs.map +1 -0
- package/dist/components/fx-geo.d.cts +70 -0
- package/dist/components/fx-geo.d.ts +70 -0
- package/dist/components/fx-geo.js +121 -0
- package/dist/components/fx-geo.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 +53 -1
- package/dist/components/fx2.d.ts +53 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +711 -93
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +143 -2
- package/dist/components/widgets.d.ts +143 -2
- package/dist/components/widgets.js +698 -94
- 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 +45 -0
- package/package.json +41 -1
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var registry = require('../chunks/registry-DehBVRDV.cjs');
|
|
4
|
+
require('../chunks/base-BaQV-2ha.cjs');
|
|
5
|
+
|
|
6
|
+
/** Length of a polyline through `points` (7.6). */
|
|
7
|
+
function routeLength(points) {
|
|
8
|
+
let len = 0;
|
|
9
|
+
for (let i = 1; i < points.length; i++)
|
|
10
|
+
len += Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
|
|
11
|
+
return Math.round(len * 100) / 100;
|
|
12
|
+
}
|
|
13
|
+
const lengthOf = (p) => {
|
|
14
|
+
try {
|
|
15
|
+
const n = typeof p.getTotalLength === 'function' ? p.getTotalLength() : 0;
|
|
16
|
+
if (n > 0)
|
|
17
|
+
return n;
|
|
18
|
+
}
|
|
19
|
+
catch {
|
|
20
|
+
/* not rendered */
|
|
21
|
+
}
|
|
22
|
+
const pts = (p.getAttribute('points') || '')
|
|
23
|
+
.trim()
|
|
24
|
+
.split(/[\s,]+/)
|
|
25
|
+
.map(Number);
|
|
26
|
+
const xy = [];
|
|
27
|
+
for (let i = 0; i + 1 < pts.length; i += 2)
|
|
28
|
+
xy.push({ x: pts[i], y: pts[i + 1] });
|
|
29
|
+
return routeLength(xy) || 100;
|
|
30
|
+
};
|
|
31
|
+
const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
|
|
32
|
+
const GEO_FX = [
|
|
33
|
+
{
|
|
34
|
+
name: 'route-draw',
|
|
35
|
+
kind: 'enter',
|
|
36
|
+
description: 'SVG paths / polylines inside the element (or `[data-route]`) draw themselves along their length, one after another (`duration`, `stagger`).',
|
|
37
|
+
defaults: { duration: 1200, stagger: 250 },
|
|
38
|
+
run: (el, o, ctx) => {
|
|
39
|
+
const marked = Array.from(el.querySelectorAll('[data-route]'));
|
|
40
|
+
const paths = marked.length ? marked : Array.from(el.querySelectorAll('path, polyline'));
|
|
41
|
+
if (ctx.reduced || !paths.length)
|
|
42
|
+
return;
|
|
43
|
+
const runs = paths.map((p, i) => {
|
|
44
|
+
const len = lengthOf(p);
|
|
45
|
+
const prev = { a: p.style.strokeDasharray, o: p.style.strokeDashoffset };
|
|
46
|
+
p.style.strokeDasharray = `${len}`;
|
|
47
|
+
ctx.onCleanup(() => {
|
|
48
|
+
p.style.strokeDasharray = prev.a;
|
|
49
|
+
p.style.strokeDashoffset = prev.o;
|
|
50
|
+
});
|
|
51
|
+
return ctx.animate(p, [{ strokeDashoffset: `${len}` }, { strokeDashoffset: '0' }], { duration: o.duration, delay: i * o.stagger, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined);
|
|
52
|
+
});
|
|
53
|
+
return Promise.all(runs).then(() => undefined);
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
name: 'marker-pulse',
|
|
58
|
+
kind: 'attention',
|
|
59
|
+
description: 'Rings expand out of the element like a location beacon (`color`, `rings`).',
|
|
60
|
+
defaults: { color: '#ef4444', rings: 2, duration: 1100 },
|
|
61
|
+
run: (el, o, ctx) => {
|
|
62
|
+
if (ctx.reduced)
|
|
63
|
+
return;
|
|
64
|
+
if (getComputedStyle(el).position === 'static') {
|
|
65
|
+
const prev = el.style.position;
|
|
66
|
+
el.style.position = 'relative';
|
|
67
|
+
ctx.onCleanup(() => (el.style.position = prev));
|
|
68
|
+
}
|
|
69
|
+
const all = Array.from({ length: Math.max(1, Math.min(4, o.rings)) }, (_, i) => {
|
|
70
|
+
const ring = document.createElement('span');
|
|
71
|
+
ring.setAttribute('aria-hidden', 'true');
|
|
72
|
+
Object.assign(ring.style, { position: 'absolute', left: '50%', top: '50%', width: '100%', aspectRatio: '1', borderRadius: '50%', border: `2px solid ${o.color}`, pointerEvents: 'none', translate: '-50% -50%' });
|
|
73
|
+
el.appendChild(ring);
|
|
74
|
+
const a = ctx.animate(ring, [{ transform: 'scale(.4)', opacity: 0.9 }, { transform: 'scale(2.2)', opacity: 0 }], { duration: o.duration, delay: i * (o.duration / 3), easing: 'ease-out', fill: 'backwards' });
|
|
75
|
+
const end = () => ring.remove();
|
|
76
|
+
ctx.onCleanup(end);
|
|
77
|
+
return a ? a.finished.then(end, end) : (end(), undefined);
|
|
78
|
+
});
|
|
79
|
+
return Promise.all(all).then(() => undefined);
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
name: 'pin-drop',
|
|
84
|
+
kind: 'enter',
|
|
85
|
+
description: 'The element drops onto its spot with a squash and a landing shadow (`height`).',
|
|
86
|
+
defaults: { height: 80, duration: 700 },
|
|
87
|
+
run: (el, o, ctx) => {
|
|
88
|
+
if (ctx.reduced)
|
|
89
|
+
return fade(el, ctx);
|
|
90
|
+
const h = Math.max(10, Number(o.height) || 80);
|
|
91
|
+
ctx.animate(el, [{ filter: 'drop-shadow(0 0 0 rgba(0,0,0,0))' }, { filter: 'drop-shadow(0 6px 4px rgba(0,0,0,.35))', offset: 0.6 }, { filter: 'drop-shadow(0 2px 2px rgba(0,0,0,.2))' }], { duration: o.duration });
|
|
92
|
+
return ctx
|
|
93
|
+
.animate(el, [
|
|
94
|
+
{ transform: `translateY(${-h}px)`, opacity: 0, easing: 'cubic-bezier(.5,0,.9,.5)' },
|
|
95
|
+
{ transform: 'translateY(0) scale(1.08, .88)', opacity: 1, offset: 0.6 },
|
|
96
|
+
{ transform: 'translateY(-8px) scale(.97, 1.04)', offset: 0.8 },
|
|
97
|
+
{ transform: 'none', opacity: 1 },
|
|
98
|
+
], { duration: o.duration, fill: 'backwards' })
|
|
99
|
+
?.finished.catch(() => undefined);
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
name: 'globe-spin',
|
|
104
|
+
kind: 'enter',
|
|
105
|
+
description: 'The element turns in like a globe coming round — rotateY with perspective (`turns`).',
|
|
106
|
+
defaults: { turns: 0.5, duration: 1100 },
|
|
107
|
+
run: (el, o, ctx) => {
|
|
108
|
+
if (ctx.reduced)
|
|
109
|
+
return fade(el, ctx);
|
|
110
|
+
const deg = Math.round(360 * (Number(o.turns) || 0.5));
|
|
111
|
+
return ctx
|
|
112
|
+
.animate(el, [{ transform: `perspective(600px) rotateY(${-deg}deg) scale(.8)`, opacity: 0 }, { transform: 'perspective(600px) rotateY(0) scale(1)', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'backwards' })
|
|
113
|
+
?.finished.catch(() => undefined);
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
];
|
|
117
|
+
/** Register route-draw, marker-pulse, pin-drop and globe-spin (7.6). */
|
|
118
|
+
function registerGeoPack() {
|
|
119
|
+
registry.registerEffects(GEO_FX);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
exports.GEO_FX = GEO_FX;
|
|
123
|
+
exports.registerGeoPack = registerGeoPack;
|
|
124
|
+
exports.routeLength = routeLength;
|
|
125
|
+
//# sourceMappingURL=fx-geo.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-geo.cjs","sources":["../../src/components/fx2/geo.ts"],"sourcesContent":["/**\n * 7.6 — Maps & geo motion (`motionary/fx/geo`, also `motionary/components/fx-geo`):\n *\n * - `route-draw` (enter) — every SVG `path` / `polyline` inside the element\n * (or `[data-route]` only, when present) draws itself along its length,\n * one after another (`duration`, `stagger`).\n * - `marker-pulse` (attention) — rings expand out of the element like a\n * location beacon (`color`, `rings`).\n * - `pin-drop` (enter) — the element drops onto its spot with a squash and a\n * landing shadow (`height`).\n * - `globe-spin` (enter) — the element turns in like a globe coming round\n * (rotateY with perspective) (`turns`).\n *\n * Reduced motion: route-draw shows the routes, marker-pulse does nothing,\n * pin-drop and globe-spin fade in.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Length of a polyline through `points` (7.6). */\nexport function routeLength(points: { x: number; y: number }[]): number {\n let len = 0;\n for (let i = 1; i < points.length; i++) len += Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);\n return Math.round(len * 100) / 100;\n}\n\nconst lengthOf = (p: SVGGeometryElement): number => {\n try {\n const n = typeof p.getTotalLength === 'function' ? p.getTotalLength() : 0;\n if (n > 0) return n;\n } catch {\n /* not rendered */\n }\n const pts = (p.getAttribute('points') || '')\n .trim()\n .split(/[\\s,]+/)\n .map(Number);\n const xy = [];\n for (let i = 0; i + 1 < pts.length; i += 2) xy.push({ x: pts[i], y: pts[i + 1] });\n return routeLength(xy) || 100;\n};\n\nconst fade = (el: HTMLElement, ctx: EffectContext) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);\n\nexport const GEO_FX: EffectDefinition[] = [\n {\n name: 'route-draw',\n kind: 'enter',\n description: 'SVG paths / polylines inside the element (or `[data-route]`) draw themselves along their length, one after another (`duration`, `stagger`).',\n defaults: { duration: 1200, stagger: 250 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const marked = Array.from(el.querySelectorAll<SVGGeometryElement>('[data-route]'));\n const paths = marked.length ? marked : Array.from(el.querySelectorAll<SVGGeometryElement>('path, polyline'));\n if (ctx.reduced || !paths.length) return;\n const runs = paths.map((p, i) => {\n const len = lengthOf(p);\n const prev = { a: p.style.strokeDasharray, o: p.style.strokeDashoffset };\n p.style.strokeDasharray = `${len}`;\n ctx.onCleanup(() => {\n p.style.strokeDasharray = prev.a;\n p.style.strokeDashoffset = prev.o;\n });\n return ctx.animate(p, [{ strokeDashoffset: `${len}` }, { strokeDashoffset: '0' }], { duration: o.duration, delay: i * o.stagger, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined);\n });\n return Promise.all(runs).then(() => undefined);\n },\n },\n {\n name: 'marker-pulse',\n kind: 'attention',\n description: 'Rings expand out of the element like a location beacon (`color`, `rings`).',\n defaults: { color: '#ef4444', rings: 2, duration: 1100 },\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 all = Array.from({ length: Math.max(1, Math.min(4, o.rings)) }, (_, i) => {\n const ring = document.createElement('span');\n ring.setAttribute('aria-hidden', 'true');\n Object.assign(ring.style, { position: 'absolute', left: '50%', top: '50%', width: '100%', aspectRatio: '1', borderRadius: '50%', border: `2px solid ${o.color}`, pointerEvents: 'none', translate: '-50% -50%' });\n el.appendChild(ring);\n const a = ctx.animate(ring, [{ transform: 'scale(.4)', opacity: 0.9 }, { transform: 'scale(2.2)', opacity: 0 }], { duration: o.duration, delay: i * (o.duration / 3), easing: 'ease-out', fill: 'backwards' });\n const end = () => ring.remove();\n ctx.onCleanup(end);\n return a ? a.finished.then(end, end) : (end(), undefined);\n });\n return Promise.all(all).then(() => undefined);\n },\n },\n {\n name: 'pin-drop',\n kind: 'enter',\n description: 'The element drops onto its spot with a squash and a landing shadow (`height`).',\n defaults: { height: 80, duration: 700 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return fade(el, ctx);\n const h = Math.max(10, Number(o.height) || 80);\n ctx.animate(el, [{ filter: 'drop-shadow(0 0 0 rgba(0,0,0,0))' }, { filter: 'drop-shadow(0 6px 4px rgba(0,0,0,.35))', offset: 0.6 }, { filter: 'drop-shadow(0 2px 2px rgba(0,0,0,.2))' }], { duration: o.duration });\n return ctx\n .animate(\n el,\n [\n { transform: `translateY(${-h}px)`, opacity: 0, easing: 'cubic-bezier(.5,0,.9,.5)' },\n { transform: 'translateY(0) scale(1.08, .88)', opacity: 1, offset: 0.6 },\n { transform: 'translateY(-8px) scale(.97, 1.04)', offset: 0.8 },\n { transform: 'none', opacity: 1 },\n ],\n { duration: o.duration, fill: 'backwards' }\n )\n ?.finished.catch(() => undefined);\n },\n },\n {\n name: 'globe-spin',\n kind: 'enter',\n description: 'The element turns in like a globe coming round — rotateY with perspective (`turns`).',\n defaults: { turns: 0.5, duration: 1100 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return fade(el, ctx);\n const deg = Math.round(360 * (Number(o.turns) || 0.5));\n return ctx\n .animate(el, [{ transform: `perspective(600px) rotateY(${-deg}deg) scale(.8)`, opacity: 0 }, { transform: 'perspective(600px) rotateY(0) scale(1)', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'backwards' })\n ?.finished.catch(() => undefined);\n },\n },\n];\n\n/** Register route-draw, marker-pulse, pin-drop and globe-spin (7.6). */\nexport function registerGeoPack(): void {\n registerEffects(GEO_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}
|
|
@@ -0,0 +1,70 @@
|
|
|
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
|
+
* 7.6 — Maps & geo motion (`motionary/fx/geo`, also `motionary/components/fx-geo`):
|
|
46
|
+
*
|
|
47
|
+
* - `route-draw` (enter) — every SVG `path` / `polyline` inside the element
|
|
48
|
+
* (or `[data-route]` only, when present) draws itself along its length,
|
|
49
|
+
* one after another (`duration`, `stagger`).
|
|
50
|
+
* - `marker-pulse` (attention) — rings expand out of the element like a
|
|
51
|
+
* location beacon (`color`, `rings`).
|
|
52
|
+
* - `pin-drop` (enter) — the element drops onto its spot with a squash and a
|
|
53
|
+
* landing shadow (`height`).
|
|
54
|
+
* - `globe-spin` (enter) — the element turns in like a globe coming round
|
|
55
|
+
* (rotateY with perspective) (`turns`).
|
|
56
|
+
*
|
|
57
|
+
* Reduced motion: route-draw shows the routes, marker-pulse does nothing,
|
|
58
|
+
* pin-drop and globe-spin fade in.
|
|
59
|
+
*/
|
|
60
|
+
|
|
61
|
+
/** Length of a polyline through `points` (7.6). */
|
|
62
|
+
declare function routeLength(points: {
|
|
63
|
+
x: number;
|
|
64
|
+
y: number;
|
|
65
|
+
}[]): number;
|
|
66
|
+
declare const GEO_FX: EffectDefinition[];
|
|
67
|
+
/** Register route-draw, marker-pulse, pin-drop and globe-spin (7.6). */
|
|
68
|
+
declare function registerGeoPack(): void;
|
|
69
|
+
|
|
70
|
+
export { GEO_FX, registerGeoPack, routeLength };
|
|
@@ -0,0 +1,70 @@
|
|
|
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
|
+
* 7.6 — Maps & geo motion (`motionary/fx/geo`, also `motionary/components/fx-geo`):
|
|
46
|
+
*
|
|
47
|
+
* - `route-draw` (enter) — every SVG `path` / `polyline` inside the element
|
|
48
|
+
* (or `[data-route]` only, when present) draws itself along its length,
|
|
49
|
+
* one after another (`duration`, `stagger`).
|
|
50
|
+
* - `marker-pulse` (attention) — rings expand out of the element like a
|
|
51
|
+
* location beacon (`color`, `rings`).
|
|
52
|
+
* - `pin-drop` (enter) — the element drops onto its spot with a squash and a
|
|
53
|
+
* landing shadow (`height`).
|
|
54
|
+
* - `globe-spin` (enter) — the element turns in like a globe coming round
|
|
55
|
+
* (rotateY with perspective) (`turns`).
|
|
56
|
+
*
|
|
57
|
+
* Reduced motion: route-draw shows the routes, marker-pulse does nothing,
|
|
58
|
+
* pin-drop and globe-spin fade in.
|
|
59
|
+
*/
|
|
60
|
+
|
|
61
|
+
/** Length of a polyline through `points` (7.6). */
|
|
62
|
+
declare function routeLength(points: {
|
|
63
|
+
x: number;
|
|
64
|
+
y: number;
|
|
65
|
+
}[]): number;
|
|
66
|
+
declare const GEO_FX: EffectDefinition[];
|
|
67
|
+
/** Register route-draw, marker-pulse, pin-drop and globe-spin (7.6). */
|
|
68
|
+
declare function registerGeoPack(): void;
|
|
69
|
+
|
|
70
|
+
export { GEO_FX, registerGeoPack, routeLength };
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import { registerEffects } from '../chunks/registry-CyKExAmE.js';
|
|
2
|
+
import '../chunks/base-2-yYc93C.js';
|
|
3
|
+
|
|
4
|
+
/** Length of a polyline through `points` (7.6). */
|
|
5
|
+
function routeLength(points) {
|
|
6
|
+
let len = 0;
|
|
7
|
+
for (let i = 1; i < points.length; i++)
|
|
8
|
+
len += Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
|
|
9
|
+
return Math.round(len * 100) / 100;
|
|
10
|
+
}
|
|
11
|
+
const lengthOf = (p) => {
|
|
12
|
+
try {
|
|
13
|
+
const n = typeof p.getTotalLength === 'function' ? p.getTotalLength() : 0;
|
|
14
|
+
if (n > 0)
|
|
15
|
+
return n;
|
|
16
|
+
}
|
|
17
|
+
catch {
|
|
18
|
+
/* not rendered */
|
|
19
|
+
}
|
|
20
|
+
const pts = (p.getAttribute('points') || '')
|
|
21
|
+
.trim()
|
|
22
|
+
.split(/[\s,]+/)
|
|
23
|
+
.map(Number);
|
|
24
|
+
const xy = [];
|
|
25
|
+
for (let i = 0; i + 1 < pts.length; i += 2)
|
|
26
|
+
xy.push({ x: pts[i], y: pts[i + 1] });
|
|
27
|
+
return routeLength(xy) || 100;
|
|
28
|
+
};
|
|
29
|
+
const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
|
|
30
|
+
const GEO_FX = [
|
|
31
|
+
{
|
|
32
|
+
name: 'route-draw',
|
|
33
|
+
kind: 'enter',
|
|
34
|
+
description: 'SVG paths / polylines inside the element (or `[data-route]`) draw themselves along their length, one after another (`duration`, `stagger`).',
|
|
35
|
+
defaults: { duration: 1200, stagger: 250 },
|
|
36
|
+
run: (el, o, ctx) => {
|
|
37
|
+
const marked = Array.from(el.querySelectorAll('[data-route]'));
|
|
38
|
+
const paths = marked.length ? marked : Array.from(el.querySelectorAll('path, polyline'));
|
|
39
|
+
if (ctx.reduced || !paths.length)
|
|
40
|
+
return;
|
|
41
|
+
const runs = paths.map((p, i) => {
|
|
42
|
+
const len = lengthOf(p);
|
|
43
|
+
const prev = { a: p.style.strokeDasharray, o: p.style.strokeDashoffset };
|
|
44
|
+
p.style.strokeDasharray = `${len}`;
|
|
45
|
+
ctx.onCleanup(() => {
|
|
46
|
+
p.style.strokeDasharray = prev.a;
|
|
47
|
+
p.style.strokeDashoffset = prev.o;
|
|
48
|
+
});
|
|
49
|
+
return ctx.animate(p, [{ strokeDashoffset: `${len}` }, { strokeDashoffset: '0' }], { duration: o.duration, delay: i * o.stagger, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined);
|
|
50
|
+
});
|
|
51
|
+
return Promise.all(runs).then(() => undefined);
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
name: 'marker-pulse',
|
|
56
|
+
kind: 'attention',
|
|
57
|
+
description: 'Rings expand out of the element like a location beacon (`color`, `rings`).',
|
|
58
|
+
defaults: { color: '#ef4444', rings: 2, duration: 1100 },
|
|
59
|
+
run: (el, o, ctx) => {
|
|
60
|
+
if (ctx.reduced)
|
|
61
|
+
return;
|
|
62
|
+
if (getComputedStyle(el).position === 'static') {
|
|
63
|
+
const prev = el.style.position;
|
|
64
|
+
el.style.position = 'relative';
|
|
65
|
+
ctx.onCleanup(() => (el.style.position = prev));
|
|
66
|
+
}
|
|
67
|
+
const all = Array.from({ length: Math.max(1, Math.min(4, o.rings)) }, (_, i) => {
|
|
68
|
+
const ring = document.createElement('span');
|
|
69
|
+
ring.setAttribute('aria-hidden', 'true');
|
|
70
|
+
Object.assign(ring.style, { position: 'absolute', left: '50%', top: '50%', width: '100%', aspectRatio: '1', borderRadius: '50%', border: `2px solid ${o.color}`, pointerEvents: 'none', translate: '-50% -50%' });
|
|
71
|
+
el.appendChild(ring);
|
|
72
|
+
const a = ctx.animate(ring, [{ transform: 'scale(.4)', opacity: 0.9 }, { transform: 'scale(2.2)', opacity: 0 }], { duration: o.duration, delay: i * (o.duration / 3), easing: 'ease-out', fill: 'backwards' });
|
|
73
|
+
const end = () => ring.remove();
|
|
74
|
+
ctx.onCleanup(end);
|
|
75
|
+
return a ? a.finished.then(end, end) : (end(), undefined);
|
|
76
|
+
});
|
|
77
|
+
return Promise.all(all).then(() => undefined);
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
name: 'pin-drop',
|
|
82
|
+
kind: 'enter',
|
|
83
|
+
description: 'The element drops onto its spot with a squash and a landing shadow (`height`).',
|
|
84
|
+
defaults: { height: 80, duration: 700 },
|
|
85
|
+
run: (el, o, ctx) => {
|
|
86
|
+
if (ctx.reduced)
|
|
87
|
+
return fade(el, ctx);
|
|
88
|
+
const h = Math.max(10, Number(o.height) || 80);
|
|
89
|
+
ctx.animate(el, [{ filter: 'drop-shadow(0 0 0 rgba(0,0,0,0))' }, { filter: 'drop-shadow(0 6px 4px rgba(0,0,0,.35))', offset: 0.6 }, { filter: 'drop-shadow(0 2px 2px rgba(0,0,0,.2))' }], { duration: o.duration });
|
|
90
|
+
return ctx
|
|
91
|
+
.animate(el, [
|
|
92
|
+
{ transform: `translateY(${-h}px)`, opacity: 0, easing: 'cubic-bezier(.5,0,.9,.5)' },
|
|
93
|
+
{ transform: 'translateY(0) scale(1.08, .88)', opacity: 1, offset: 0.6 },
|
|
94
|
+
{ transform: 'translateY(-8px) scale(.97, 1.04)', offset: 0.8 },
|
|
95
|
+
{ transform: 'none', opacity: 1 },
|
|
96
|
+
], { duration: o.duration, fill: 'backwards' })
|
|
97
|
+
?.finished.catch(() => undefined);
|
|
98
|
+
},
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
name: 'globe-spin',
|
|
102
|
+
kind: 'enter',
|
|
103
|
+
description: 'The element turns in like a globe coming round — rotateY with perspective (`turns`).',
|
|
104
|
+
defaults: { turns: 0.5, duration: 1100 },
|
|
105
|
+
run: (el, o, ctx) => {
|
|
106
|
+
if (ctx.reduced)
|
|
107
|
+
return fade(el, ctx);
|
|
108
|
+
const deg = Math.round(360 * (Number(o.turns) || 0.5));
|
|
109
|
+
return ctx
|
|
110
|
+
.animate(el, [{ transform: `perspective(600px) rotateY(${-deg}deg) scale(.8)`, opacity: 0 }, { transform: 'perspective(600px) rotateY(0) scale(1)', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'backwards' })
|
|
111
|
+
?.finished.catch(() => undefined);
|
|
112
|
+
},
|
|
113
|
+
},
|
|
114
|
+
];
|
|
115
|
+
/** Register route-draw, marker-pulse, pin-drop and globe-spin (7.6). */
|
|
116
|
+
function registerGeoPack() {
|
|
117
|
+
registerEffects(GEO_FX);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
export { GEO_FX, registerGeoPack, routeLength };
|
|
121
|
+
//# sourceMappingURL=fx-geo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-geo.js","sources":["../../src/components/fx2/geo.ts"],"sourcesContent":["/**\n * 7.6 — Maps & geo motion (`motionary/fx/geo`, also `motionary/components/fx-geo`):\n *\n * - `route-draw` (enter) — every SVG `path` / `polyline` inside the element\n * (or `[data-route]` only, when present) draws itself along its length,\n * one after another (`duration`, `stagger`).\n * - `marker-pulse` (attention) — rings expand out of the element like a\n * location beacon (`color`, `rings`).\n * - `pin-drop` (enter) — the element drops onto its spot with a squash and a\n * landing shadow (`height`).\n * - `globe-spin` (enter) — the element turns in like a globe coming round\n * (rotateY with perspective) (`turns`).\n *\n * Reduced motion: route-draw shows the routes, marker-pulse does nothing,\n * pin-drop and globe-spin fade in.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Length of a polyline through `points` (7.6). */\nexport function routeLength(points: { x: number; y: number }[]): number {\n let len = 0;\n for (let i = 1; i < points.length; i++) len += Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);\n return Math.round(len * 100) / 100;\n}\n\nconst lengthOf = (p: SVGGeometryElement): number => {\n try {\n const n = typeof p.getTotalLength === 'function' ? p.getTotalLength() : 0;\n if (n > 0) return n;\n } catch {\n /* not rendered */\n }\n const pts = (p.getAttribute('points') || '')\n .trim()\n .split(/[\\s,]+/)\n .map(Number);\n const xy = [];\n for (let i = 0; i + 1 < pts.length; i += 2) xy.push({ x: pts[i], y: pts[i + 1] });\n return routeLength(xy) || 100;\n};\n\nconst fade = (el: HTMLElement, ctx: EffectContext) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);\n\nexport const GEO_FX: EffectDefinition[] = [\n {\n name: 'route-draw',\n kind: 'enter',\n description: 'SVG paths / polylines inside the element (or `[data-route]`) draw themselves along their length, one after another (`duration`, `stagger`).',\n defaults: { duration: 1200, stagger: 250 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const marked = Array.from(el.querySelectorAll<SVGGeometryElement>('[data-route]'));\n const paths = marked.length ? marked : Array.from(el.querySelectorAll<SVGGeometryElement>('path, polyline'));\n if (ctx.reduced || !paths.length) return;\n const runs = paths.map((p, i) => {\n const len = lengthOf(p);\n const prev = { a: p.style.strokeDasharray, o: p.style.strokeDashoffset };\n p.style.strokeDasharray = `${len}`;\n ctx.onCleanup(() => {\n p.style.strokeDasharray = prev.a;\n p.style.strokeDashoffset = prev.o;\n });\n return ctx.animate(p, [{ strokeDashoffset: `${len}` }, { strokeDashoffset: '0' }], { duration: o.duration, delay: i * o.stagger, easing: 'ease-in-out', fill: 'backwards' })?.finished.catch(() => undefined);\n });\n return Promise.all(runs).then(() => undefined);\n },\n },\n {\n name: 'marker-pulse',\n kind: 'attention',\n description: 'Rings expand out of the element like a location beacon (`color`, `rings`).',\n defaults: { color: '#ef4444', rings: 2, duration: 1100 },\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 all = Array.from({ length: Math.max(1, Math.min(4, o.rings)) }, (_, i) => {\n const ring = document.createElement('span');\n ring.setAttribute('aria-hidden', 'true');\n Object.assign(ring.style, { position: 'absolute', left: '50%', top: '50%', width: '100%', aspectRatio: '1', borderRadius: '50%', border: `2px solid ${o.color}`, pointerEvents: 'none', translate: '-50% -50%' });\n el.appendChild(ring);\n const a = ctx.animate(ring, [{ transform: 'scale(.4)', opacity: 0.9 }, { transform: 'scale(2.2)', opacity: 0 }], { duration: o.duration, delay: i * (o.duration / 3), easing: 'ease-out', fill: 'backwards' });\n const end = () => ring.remove();\n ctx.onCleanup(end);\n return a ? a.finished.then(end, end) : (end(), undefined);\n });\n return Promise.all(all).then(() => undefined);\n },\n },\n {\n name: 'pin-drop',\n kind: 'enter',\n description: 'The element drops onto its spot with a squash and a landing shadow (`height`).',\n defaults: { height: 80, duration: 700 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return fade(el, ctx);\n const h = Math.max(10, Number(o.height) || 80);\n ctx.animate(el, [{ filter: 'drop-shadow(0 0 0 rgba(0,0,0,0))' }, { filter: 'drop-shadow(0 6px 4px rgba(0,0,0,.35))', offset: 0.6 }, { filter: 'drop-shadow(0 2px 2px rgba(0,0,0,.2))' }], { duration: o.duration });\n return ctx\n .animate(\n el,\n [\n { transform: `translateY(${-h}px)`, opacity: 0, easing: 'cubic-bezier(.5,0,.9,.5)' },\n { transform: 'translateY(0) scale(1.08, .88)', opacity: 1, offset: 0.6 },\n { transform: 'translateY(-8px) scale(.97, 1.04)', offset: 0.8 },\n { transform: 'none', opacity: 1 },\n ],\n { duration: o.duration, fill: 'backwards' }\n )\n ?.finished.catch(() => undefined);\n },\n },\n {\n name: 'globe-spin',\n kind: 'enter',\n description: 'The element turns in like a globe coming round — rotateY with perspective (`turns`).',\n defaults: { turns: 0.5, duration: 1100 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return fade(el, ctx);\n const deg = Math.round(360 * (Number(o.turns) || 0.5));\n return ctx\n .animate(el, [{ transform: `perspective(600px) rotateY(${-deg}deg) scale(.8)`, opacity: 0 }, { transform: 'perspective(600px) rotateY(0) scale(1)', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'backwards' })\n ?.finished.catch(() => undefined);\n },\n },\n];\n\n/** Register route-draw, marker-pulse, pin-drop and globe-spin (7.6). */\nexport function registerGeoPack(): void {\n registerEffects(GEO_FX);\n}\n"],"names":[],"mappings":"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"}
|
package/dist/components/fx2.cjs
CHANGED
|
@@ -14,6 +14,8 @@ var components_fxMusic = require('./fx-music.cjs');
|
|
|
14
14
|
var components_fxChart = require('./fx-chart.cjs');
|
|
15
15
|
var components_fxShop = require('./fx-shop.cjs');
|
|
16
16
|
var components_fxSocial = require('./fx-social.cjs');
|
|
17
|
+
var components_fxGame = require('./fx-game.cjs');
|
|
18
|
+
var components_fxGeo = require('./fx-geo.cjs');
|
|
17
19
|
require('../chunks/registry-DehBVRDV.cjs');
|
|
18
20
|
require('../chunks/base-BaQV-2ha.cjs');
|
|
19
21
|
require('../chunks/generative-BHIj-NU0.cjs');
|
|
@@ -35,6 +37,8 @@ const EFFECT_PACKS = {
|
|
|
35
37
|
chart: components_fxChart.CHART_FX,
|
|
36
38
|
shop: components_fxShop.SHOP_FX,
|
|
37
39
|
social: components_fxSocial.SOCIAL_FX,
|
|
40
|
+
game: components_fxGame.GAME_FX,
|
|
41
|
+
geo: components_fxGeo.GEO_FX,
|
|
38
42
|
};
|
|
39
43
|
/** Register every 6.x effect pack (idempotent). */
|
|
40
44
|
function registerEffectPacks() {
|
|
@@ -51,6 +55,8 @@ function registerEffectPacks() {
|
|
|
51
55
|
components_fxChart.registerChartPack();
|
|
52
56
|
components_fxShop.registerShopPack();
|
|
53
57
|
components_fxSocial.registerSocialPack();
|
|
58
|
+
components_fxGame.registerGamePack();
|
|
59
|
+
components_fxGeo.registerGeoPack();
|
|
54
60
|
}
|
|
55
61
|
|
|
56
62
|
exports.EFFECT_PACK_FORMAT = components_marketplace.EFFECT_PACK_FORMAT;
|
|
@@ -105,6 +111,12 @@ exports.registerShopPack = components_fxShop.registerShopPack;
|
|
|
105
111
|
exports.SOCIAL_FX = components_fxSocial.SOCIAL_FX;
|
|
106
112
|
exports.fanAngles = components_fxSocial.fanAngles;
|
|
107
113
|
exports.registerSocialPack = components_fxSocial.registerSocialPack;
|
|
114
|
+
exports.GAME_FX = components_fxGame.GAME_FX;
|
|
115
|
+
exports.registerGamePack = components_fxGame.registerGamePack;
|
|
116
|
+
exports.throwPath = components_fxGame.throwPath;
|
|
117
|
+
exports.GEO_FX = components_fxGeo.GEO_FX;
|
|
118
|
+
exports.registerGeoPack = components_fxGeo.registerGeoPack;
|
|
119
|
+
exports.routeLength = components_fxGeo.routeLength;
|
|
108
120
|
exports.EFFECT_PACKS = EFFECT_PACKS;
|
|
109
121
|
exports.registerEffectPacks = registerEffectPacks;
|
|
110
122
|
//# 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';\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\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};\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}\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","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack"],"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';\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\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};\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}\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","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuDA;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;;AAGb;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;AACnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -489,6 +489,58 @@ declare const SOCIAL_FX: EffectDefinition[];
|
|
|
489
489
|
/** Register the 7.4 chat & social pack (idempotent). */
|
|
490
490
|
declare function registerSocialPack(): void;
|
|
491
491
|
|
|
492
|
+
/**
|
|
493
|
+
* 7.5 — Gamification motion (`motionary/fx/game`, also
|
|
494
|
+
* `motionary/components/fx-game`):
|
|
495
|
+
*
|
|
496
|
+
* - `achievement-unlock` (attention) — the element slides in, a light sweep
|
|
497
|
+
* crosses it and its icon (`[data-icon]` or first child) pops.
|
|
498
|
+
* - `level-up` (attention) — a scale-up with a ring shockwave.
|
|
499
|
+
* - `chest-open` (click) — the lid (`[data-lid]` or first child) flips open
|
|
500
|
+
* and sparks fly out.
|
|
501
|
+
* - `coin-burst` (click) — coins (`coin`, default 🪙) arc up and fall.
|
|
502
|
+
* - `xp-gain` (enter) — a “+50 XP” label (`text` or `data-xp`) floats up and
|
|
503
|
+
* fades.
|
|
504
|
+
*
|
|
505
|
+
* Reduced motion: unlock / level-up fade, chest-open sets the lid open,
|
|
506
|
+
* coin-burst and xp-gain do nothing.
|
|
507
|
+
*/
|
|
508
|
+
|
|
509
|
+
/** Ballistic keyframe points for a coin thrown at `deg` with `power` (7.5). */
|
|
510
|
+
declare function throwPath(deg: number, power?: number, steps?: number, g?: number): {
|
|
511
|
+
x: number;
|
|
512
|
+
y: number;
|
|
513
|
+
}[];
|
|
514
|
+
declare const GAME_FX: EffectDefinition[];
|
|
515
|
+
/** Register the 7.5 gamification pack (idempotent). */
|
|
516
|
+
declare function registerGamePack(): void;
|
|
517
|
+
|
|
518
|
+
/**
|
|
519
|
+
* 7.6 — Maps & geo motion (`motionary/fx/geo`, also `motionary/components/fx-geo`):
|
|
520
|
+
*
|
|
521
|
+
* - `route-draw` (enter) — every SVG `path` / `polyline` inside the element
|
|
522
|
+
* (or `[data-route]` only, when present) draws itself along its length,
|
|
523
|
+
* one after another (`duration`, `stagger`).
|
|
524
|
+
* - `marker-pulse` (attention) — rings expand out of the element like a
|
|
525
|
+
* location beacon (`color`, `rings`).
|
|
526
|
+
* - `pin-drop` (enter) — the element drops onto its spot with a squash and a
|
|
527
|
+
* landing shadow (`height`).
|
|
528
|
+
* - `globe-spin` (enter) — the element turns in like a globe coming round
|
|
529
|
+
* (rotateY with perspective) (`turns`).
|
|
530
|
+
*
|
|
531
|
+
* Reduced motion: route-draw shows the routes, marker-pulse does nothing,
|
|
532
|
+
* pin-drop and globe-spin fade in.
|
|
533
|
+
*/
|
|
534
|
+
|
|
535
|
+
/** Length of a polyline through `points` (7.6). */
|
|
536
|
+
declare function routeLength(points: {
|
|
537
|
+
x: number;
|
|
538
|
+
y: number;
|
|
539
|
+
}[]): number;
|
|
540
|
+
declare const GEO_FX: EffectDefinition[];
|
|
541
|
+
/** Register route-draw, marker-pulse, pin-drop and globe-spin (7.6). */
|
|
542
|
+
declare function registerGeoPack(): void;
|
|
543
|
+
|
|
492
544
|
/**
|
|
493
545
|
* 5.5 — generative backgrounds on Canvas 2D, registered through
|
|
494
546
|
* `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
|
|
@@ -598,5 +650,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
|
|
|
598
650
|
/** Register every 6.x effect pack (idempotent). */
|
|
599
651
|
declare function registerEffectPacks(): void;
|
|
600
652
|
|
|
601
|
-
export { CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FOCUS_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pointsToPath, register3dPack, registerChartPack, registerEffectPacks, registerFocusPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, samplePath, shaderBackground, skyAt, splitChars, supportsWebGL2, supportsWebGPU, syntheticSample, trackPointer, validateManifest, webgpuBackground, wgslModule };
|
|
653
|
+
export { CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FOCUS_FX, GAME_FX, GEO_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pointsToPath, register3dPack, registerChartPack, registerEffectPacks, registerFocusPack, registerGamePack, registerGeoPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, routeLength, samplePath, shaderBackground, skyAt, splitChars, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule };
|
|
602
654
|
export type { EffectPackManifest, ShaderSpec };
|