use-scroll-animate 9.2.0 → 9.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/components/fx-genart.cjs +137 -0
- package/dist/components/fx-genart.cjs.map +1 -0
- package/dist/components/fx-genart.d.cts +69 -0
- package/dist/components/fx-genart.d.ts +69 -0
- package/dist/components/fx-genart.js +131 -0
- package/dist/components/fx-genart.js.map +1 -0
- package/dist/components/fx2.cjs +8 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +26 -1
- package/dist/components/fx2.d.ts +26 -1
- package/dist/components/fx2.js +5 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/marketplace.cjs +1 -0
- package/dist/components/marketplace.cjs.map +1 -1
- package/dist/components/marketplace.js +1 -0
- package/dist/components/marketplace.js.map +1 -1
- package/dist/components/widgets.cjs +451 -173
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +37 -2
- package/dist/components/widgets.d.ts +37 -2
- package/dist/components/widgets.js +449 -174
- 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 +1 -1
- package/docs/components.md +16 -0
- package/package.json +21 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [9.3.0] - 2026-10-09
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
- **2 new components (9.3)** in `motionary/components/widgets`:
|
|
14
|
+
- `<usa-gen-art>` — seeded generative artwork on a canvas: `art` = `flow` (flow field) · `circles` (circle packing) · `truchet` (quarter-arc tiles) · `waves` (layered ridges), `seed`, `palette`, `label`; draws itself in on screen; click / Enter re-seeds; `generate(seed?)`, `toDataURL()`, `seed`; `usa:generate` { seed }.
|
|
15
|
+
- `<usa-bg-generator>` — background generator: palette + style (`mesh`, `grain`, `stripes`, `dots`) + shuffle, live preview with a cross-fade, copy the CSS; `css`, `shuffle()`, `copy()`; `usa:change` { css, seed }; `backgroundCss()`.
|
|
16
|
+
- **Generative art 2.0 pack — `motionary/fx/genart`** (= `motionary/components/fx-genart`, `registerGenArtPack()`, also in `registerEffectPacks()` and the marketplace): `halftone-in` (enter), `mesh-drift` (loop), `kaleido` (loop), `grain-flicker` (loop). `PALETTES`, `seededRandom()`, `meshGradient()`.
|
|
17
|
+
- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails.
|
|
18
|
+
|
|
19
|
+
### Accessibility
|
|
20
|
+
- `<usa-gen-art>` is a focusable `img` whose label names the art style and seed (updated on re-seed). `<usa-bg-generator>` is a labelled `group` of real `<select>`s and buttons; the preview is `aria-hidden` and the CSS is shown as text. Reduced motion: artwork is drawn at once, no cross-fade, `halftone-in` fades, the loops are skipped.
|
|
21
|
+
|
|
10
22
|
## [9.2.0] - 2026-10-09
|
|
11
23
|
|
|
12
24
|
### Added
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var registry = require('../chunks/registry-BVklOepd.cjs');
|
|
4
|
+
require('../chunks/base-DoRUZBy-.cjs');
|
|
5
|
+
|
|
6
|
+
const PALETTES = {
|
|
7
|
+
sunset: ['#ff6b6b', '#feca57', '#ff9ff3', '#5f27cd', '#1dd1a1'],
|
|
8
|
+
ocean: ['#0abde3', '#48dbfb', '#c8d6e5', '#10ac84', '#222f3e'],
|
|
9
|
+
forest: ['#2d6a4f', '#52b788', '#95d5b2', '#d8f3dc', '#081c15'],
|
|
10
|
+
candy: ['#f72585', '#b5179e', '#7209b7', '#4361ee', '#4cc9f0'],
|
|
11
|
+
mono: ['#111827', '#374151', '#6b7280', '#d1d5db', '#f9fafb'],
|
|
12
|
+
};
|
|
13
|
+
/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */
|
|
14
|
+
function seededRandom(seed) {
|
|
15
|
+
let a = (Math.floor(Math.abs(seed) * 1e3) >>> 0) || 1;
|
|
16
|
+
return () => {
|
|
17
|
+
a = (a + 0x6d2b79f5) >>> 0;
|
|
18
|
+
let t = a;
|
|
19
|
+
t = Math.imul(t ^ (t >>> 15), t | 1);
|
|
20
|
+
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
|
|
21
|
+
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */
|
|
25
|
+
function meshGradient(seed = 1, palette = 'sunset') {
|
|
26
|
+
const pal = Array.isArray(palette) ? palette : PALETTES[palette] || PALETTES.sunset;
|
|
27
|
+
const r = seededRandom(seed);
|
|
28
|
+
const blobs = [0, 1, 2, 3].map((i) => `radial-gradient(at ${Math.round(r() * 100)}% ${Math.round(r() * 100)}%, ${pal[(i + 1) % pal.length]} 0px, transparent ${45 + Math.round(r() * 20)}%)`);
|
|
29
|
+
return `${blobs.join(', ')}, ${pal[0]}`;
|
|
30
|
+
}
|
|
31
|
+
const overlay = (el, ctx) => {
|
|
32
|
+
if (getComputedStyle(el).position === 'static') {
|
|
33
|
+
const prev = el.style.position;
|
|
34
|
+
el.style.position = 'relative';
|
|
35
|
+
ctx.onCleanup(() => (el.style.position = prev));
|
|
36
|
+
}
|
|
37
|
+
const o = document.createElement('span');
|
|
38
|
+
o.setAttribute('aria-hidden', 'true');
|
|
39
|
+
Object.assign(o.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', overflow: 'hidden' });
|
|
40
|
+
el.appendChild(o);
|
|
41
|
+
ctx.onCleanup(() => o.remove());
|
|
42
|
+
return o;
|
|
43
|
+
};
|
|
44
|
+
const GRAIN = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E\")";
|
|
45
|
+
const GENART_FX = [
|
|
46
|
+
{
|
|
47
|
+
name: 'halftone-in',
|
|
48
|
+
kind: 'enter',
|
|
49
|
+
description: 'The element prints in through a growing halftone dot screen (`dot` px).',
|
|
50
|
+
defaults: { dot: 10, duration: 1100 },
|
|
51
|
+
run: (el, o, ctx) => {
|
|
52
|
+
if (ctx.reduced)
|
|
53
|
+
return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);
|
|
54
|
+
const d = Math.max(4, Math.min(40, Number(o.dot) || 10));
|
|
55
|
+
const m = (r) => `radial-gradient(circle, #000 ${r}px, transparent ${r + 0.5}px) 0 0 / ${d}px ${d}px`;
|
|
56
|
+
const prev = [el.style.maskImage, el.style.webkitMaskImage];
|
|
57
|
+
ctx.onCleanup(() => {
|
|
58
|
+
el.style.maskImage = prev[0];
|
|
59
|
+
el.style.webkitMaskImage = prev[1];
|
|
60
|
+
});
|
|
61
|
+
const a = ctx.animate(el, [0, 0.15, 0.3, 0.45, 0.6, 0.75].map((f, i, all) => ({ mask: m(f * d), WebkitMask: m(f * d), offset: i / all.length })).concat([{ mask: m(d), WebkitMask: m(d), offset: 1 }]), { duration: o.duration, delay: o.delay, easing: 'steps(6, end)', fill: 'backwards' });
|
|
62
|
+
return a?.finished.catch(() => undefined);
|
|
63
|
+
},
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
name: 'mesh-drift',
|
|
67
|
+
kind: 'loop',
|
|
68
|
+
description: 'A seeded mesh-gradient background that slowly drifts (`seed`, `palette`).',
|
|
69
|
+
defaults: { seed: 3, palette: 'sunset', duration: 14000 },
|
|
70
|
+
run: (el, o, ctx) => {
|
|
71
|
+
if (ctx.reduced)
|
|
72
|
+
return;
|
|
73
|
+
const ov = overlay(el, ctx);
|
|
74
|
+
ov.style.zIndex = '-1';
|
|
75
|
+
ov.style.background = meshGradient(Number(o.seed) || 3, o.palette);
|
|
76
|
+
ov.style.backgroundSize = '200% 200%';
|
|
77
|
+
if (getComputedStyle(el).isolation !== 'isolate') {
|
|
78
|
+
const prev = el.style.isolation;
|
|
79
|
+
el.style.isolation = 'isolate';
|
|
80
|
+
ctx.onCleanup(() => (el.style.isolation = prev));
|
|
81
|
+
}
|
|
82
|
+
const a = ctx.animate(ov, [{ backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }, { backgroundPosition: '100% 60%', filter: 'hue-rotate(25deg)' }, { backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
|
|
83
|
+
return () => {
|
|
84
|
+
a?.cancel();
|
|
85
|
+
ov.remove();
|
|
86
|
+
};
|
|
87
|
+
},
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
name: 'kaleido',
|
|
91
|
+
kind: 'loop',
|
|
92
|
+
description: 'A kaleidoscopic conic overlay that turns slowly (`color`, `segments`).',
|
|
93
|
+
defaults: { color: 'rgba(255,255,255,.35)', segments: 12, duration: 12000 },
|
|
94
|
+
run: (el, o, ctx) => {
|
|
95
|
+
if (ctx.reduced)
|
|
96
|
+
return;
|
|
97
|
+
const ov = overlay(el, ctx);
|
|
98
|
+
const n = Math.max(4, Math.min(36, Math.round(Number(o.segments) || 12)));
|
|
99
|
+
const inner = document.createElement('i');
|
|
100
|
+
Object.assign(inner.style, { position: 'absolute', left: '-50%', top: '-50%', width: '200%', height: '200%', background: `repeating-conic-gradient(${o.color} 0 ${180 / n}deg, transparent ${180 / n}deg ${360 / n}deg)`, mixBlendMode: 'overlay' });
|
|
101
|
+
ov.appendChild(inner);
|
|
102
|
+
const a = ctx.animate(inner, [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }], { duration: o.duration, iterations: Infinity, easing: 'linear' });
|
|
103
|
+
return () => {
|
|
104
|
+
a?.cancel();
|
|
105
|
+
ov.remove();
|
|
106
|
+
};
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
name: 'grain-flicker',
|
|
111
|
+
kind: 'loop',
|
|
112
|
+
description: 'Animated film grain over the element (`opacity`).',
|
|
113
|
+
defaults: { opacity: 0.25 },
|
|
114
|
+
run: (el, o, ctx) => {
|
|
115
|
+
if (ctx.reduced)
|
|
116
|
+
return;
|
|
117
|
+
const ov = overlay(el, ctx);
|
|
118
|
+
Object.assign(ov.style, { backgroundImage: GRAIN, opacity: String(o.opacity), mixBlendMode: 'overlay' });
|
|
119
|
+
const a = ctx.animate(ov, [0, 1, 2, 3, 4, 5].map((i) => ({ backgroundPosition: `${(i * 37) % 160}px ${(i * 71) % 160}px` })), { duration: 600, iterations: Infinity, easing: 'steps(6, end)' });
|
|
120
|
+
return () => {
|
|
121
|
+
a?.cancel();
|
|
122
|
+
ov.remove();
|
|
123
|
+
};
|
|
124
|
+
},
|
|
125
|
+
},
|
|
126
|
+
];
|
|
127
|
+
/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
|
|
128
|
+
function registerGenArtPack() {
|
|
129
|
+
registry.registerEffects(GENART_FX);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
exports.GENART_FX = GENART_FX;
|
|
133
|
+
exports.PALETTES = PALETTES;
|
|
134
|
+
exports.meshGradient = meshGradient;
|
|
135
|
+
exports.registerGenArtPack = registerGenArtPack;
|
|
136
|
+
exports.seededRandom = seededRandom;
|
|
137
|
+
//# sourceMappingURL=fx-genart.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-genart.cjs","sources":["../../src/components/fx2/genart.ts"],"sourcesContent":["/**\n * 9.3 — Generative art 2.0 pack (`motionary/fx/genart`, also `motionary/components/fx-genart`):\n *\n * - `halftone-in` (enter) — the element prints in through a growing\n * halftone dot screen, like a comic-book plate (`dot`).\n * - `mesh-drift` (loop) — a seeded mesh-gradient background that slowly\n * drifts (`seed`, `palette`).\n * - `kaleido` (loop) — a kaleidoscopic conic overlay that turns slowly\n * (`color`, `segments`).\n * - `grain-flicker` (loop) — animated film grain over the element.\n *\n * `PALETTES`, `seededRandom(seed)`, `meshGradient(seed, palette)` (a CSS\n * background string) are shared with `<usa-bg-generator>` and\n * `<usa-gen-art>`. Reduced motion: halftone-in fades, loops are skipped.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\nexport const PALETTES: Record<string, string[]> = {\n sunset: ['#ff6b6b', '#feca57', '#ff9ff3', '#5f27cd', '#1dd1a1'],\n ocean: ['#0abde3', '#48dbfb', '#c8d6e5', '#10ac84', '#222f3e'],\n forest: ['#2d6a4f', '#52b788', '#95d5b2', '#d8f3dc', '#081c15'],\n candy: ['#f72585', '#b5179e', '#7209b7', '#4361ee', '#4cc9f0'],\n mono: ['#111827', '#374151', '#6b7280', '#d1d5db', '#f9fafb'],\n};\n\n/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */\nexport function seededRandom(seed: number): () => number {\n let a = (Math.floor(Math.abs(seed) * 1e3) >>> 0) || 1;\n return () => {\n a = (a + 0x6d2b79f5) >>> 0;\n let t = a;\n t = Math.imul(t ^ (t >>> 15), t | 1);\n t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\n\n/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */\nexport function meshGradient(seed = 1, palette: string | string[] = 'sunset'): string {\n const pal = Array.isArray(palette) ? palette : PALETTES[palette] || PALETTES.sunset;\n const r = seededRandom(seed);\n const blobs = [0, 1, 2, 3].map((i) => `radial-gradient(at ${Math.round(r() * 100)}% ${Math.round(r() * 100)}%, ${pal[(i + 1) % pal.length]} 0px, transparent ${45 + Math.round(r() * 20)}%)`);\n return `${blobs.join(', ')}, ${pal[0]}`;\n}\n\nconst overlay = (el: HTMLElement, ctx: EffectContext) => {\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 o = document.createElement('span');\n o.setAttribute('aria-hidden', 'true');\n Object.assign(o.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', overflow: 'hidden' });\n el.appendChild(o);\n ctx.onCleanup(() => o.remove());\n return o;\n};\nconst GRAIN = \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E\\\")\";\n\nexport const GENART_FX: EffectDefinition[] = [\n {\n name: 'halftone-in',\n kind: 'enter',\n description: 'The element prints in through a growing halftone dot screen (`dot` px).',\n defaults: { dot: 10, duration: 1100 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);\n const d = Math.max(4, Math.min(40, Number(o.dot) || 10));\n const m = (r: number) => `radial-gradient(circle, #000 ${r}px, transparent ${r + 0.5}px) 0 0 / ${d}px ${d}px`;\n const prev = [el.style.maskImage, (el.style as any).webkitMaskImage];\n ctx.onCleanup(() => {\n el.style.maskImage = prev[0];\n (el.style as any).webkitMaskImage = prev[1];\n });\n const a = ctx.animate(el, [0, 0.15, 0.3, 0.45, 0.6, 0.75].map((f, i, all) => ({ mask: m(f * d), WebkitMask: m(f * d), offset: i / all.length })).concat([{ mask: m(d), WebkitMask: m(d), offset: 1 } as any]) as Keyframe[], { duration: o.duration, delay: o.delay, easing: 'steps(6, end)', fill: 'backwards' });\n return a?.finished.catch(() => undefined);\n },\n },\n {\n name: 'mesh-drift',\n kind: 'loop',\n description: 'A seeded mesh-gradient background that slowly drifts (`seed`, `palette`).',\n defaults: { seed: 3, palette: 'sunset', duration: 14000 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n const ov = overlay(el, ctx);\n ov.style.zIndex = '-1';\n ov.style.background = meshGradient(Number(o.seed) || 3, o.palette);\n ov.style.backgroundSize = '200% 200%';\n if (getComputedStyle(el).isolation !== 'isolate') {\n const prev = el.style.isolation;\n el.style.isolation = 'isolate';\n ctx.onCleanup(() => (el.style.isolation = prev));\n }\n const a = ctx.animate(ov, [{ backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }, { backgroundPosition: '100% 60%', filter: 'hue-rotate(25deg)' }, { backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n return () => {\n a?.cancel();\n ov.remove();\n };\n },\n },\n {\n name: 'kaleido',\n kind: 'loop',\n description: 'A kaleidoscopic conic overlay that turns slowly (`color`, `segments`).',\n defaults: { color: 'rgba(255,255,255,.35)', segments: 12, duration: 12000 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n const ov = overlay(el, ctx);\n const n = Math.max(4, Math.min(36, Math.round(Number(o.segments) || 12)));\n const inner = document.createElement('i');\n Object.assign(inner.style, { position: 'absolute', left: '-50%', top: '-50%', width: '200%', height: '200%', background: `repeating-conic-gradient(${o.color} 0 ${180 / n}deg, transparent ${180 / n}deg ${360 / n}deg)`, mixBlendMode: 'overlay' });\n ov.appendChild(inner);\n const a = ctx.animate(inner, [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }], { duration: o.duration, iterations: Infinity, easing: 'linear' });\n return () => {\n a?.cancel();\n ov.remove();\n };\n },\n },\n {\n name: 'grain-flicker',\n kind: 'loop',\n description: 'Animated film grain over the element (`opacity`).',\n defaults: { opacity: 0.25 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n const ov = overlay(el, ctx);\n Object.assign(ov.style, { backgroundImage: GRAIN, opacity: String(o.opacity), mixBlendMode: 'overlay' });\n const a = ctx.animate(ov, [0, 1, 2, 3, 4, 5].map((i) => ({ backgroundPosition: `${(i * 37) % 160}px ${(i * 71) % 160}px` })), { duration: 600, iterations: Infinity, easing: 'steps(6, end)' });\n return () => {\n a?.cancel();\n ov.remove();\n };\n },\n },\n];\n\n/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */\nexport function registerGenArtPack(): void {\n registerEffects(GENART_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}
|
|
@@ -0,0 +1,69 @@
|
|
|
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
|
+
* 9.3 — Generative art 2.0 pack (`motionary/fx/genart`, also `motionary/components/fx-genart`):
|
|
46
|
+
*
|
|
47
|
+
* - `halftone-in` (enter) — the element prints in through a growing
|
|
48
|
+
* halftone dot screen, like a comic-book plate (`dot`).
|
|
49
|
+
* - `mesh-drift` (loop) — a seeded mesh-gradient background that slowly
|
|
50
|
+
* drifts (`seed`, `palette`).
|
|
51
|
+
* - `kaleido` (loop) — a kaleidoscopic conic overlay that turns slowly
|
|
52
|
+
* (`color`, `segments`).
|
|
53
|
+
* - `grain-flicker` (loop) — animated film grain over the element.
|
|
54
|
+
*
|
|
55
|
+
* `PALETTES`, `seededRandom(seed)`, `meshGradient(seed, palette)` (a CSS
|
|
56
|
+
* background string) are shared with `<usa-bg-generator>` and
|
|
57
|
+
* `<usa-gen-art>`. Reduced motion: halftone-in fades, loops are skipped.
|
|
58
|
+
*/
|
|
59
|
+
|
|
60
|
+
declare const PALETTES: Record<string, string[]>;
|
|
61
|
+
/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */
|
|
62
|
+
declare function seededRandom(seed: number): () => number;
|
|
63
|
+
/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */
|
|
64
|
+
declare function meshGradient(seed?: number, palette?: string | string[]): string;
|
|
65
|
+
declare const GENART_FX: EffectDefinition[];
|
|
66
|
+
/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
|
|
67
|
+
declare function registerGenArtPack(): void;
|
|
68
|
+
|
|
69
|
+
export { GENART_FX, PALETTES, meshGradient, registerGenArtPack, seededRandom };
|
|
@@ -0,0 +1,69 @@
|
|
|
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
|
+
* 9.3 — Generative art 2.0 pack (`motionary/fx/genart`, also `motionary/components/fx-genart`):
|
|
46
|
+
*
|
|
47
|
+
* - `halftone-in` (enter) — the element prints in through a growing
|
|
48
|
+
* halftone dot screen, like a comic-book plate (`dot`).
|
|
49
|
+
* - `mesh-drift` (loop) — a seeded mesh-gradient background that slowly
|
|
50
|
+
* drifts (`seed`, `palette`).
|
|
51
|
+
* - `kaleido` (loop) — a kaleidoscopic conic overlay that turns slowly
|
|
52
|
+
* (`color`, `segments`).
|
|
53
|
+
* - `grain-flicker` (loop) — animated film grain over the element.
|
|
54
|
+
*
|
|
55
|
+
* `PALETTES`, `seededRandom(seed)`, `meshGradient(seed, palette)` (a CSS
|
|
56
|
+
* background string) are shared with `<usa-bg-generator>` and
|
|
57
|
+
* `<usa-gen-art>`. Reduced motion: halftone-in fades, loops are skipped.
|
|
58
|
+
*/
|
|
59
|
+
|
|
60
|
+
declare const PALETTES: Record<string, string[]>;
|
|
61
|
+
/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */
|
|
62
|
+
declare function seededRandom(seed: number): () => number;
|
|
63
|
+
/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */
|
|
64
|
+
declare function meshGradient(seed?: number, palette?: string | string[]): string;
|
|
65
|
+
declare const GENART_FX: EffectDefinition[];
|
|
66
|
+
/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
|
|
67
|
+
declare function registerGenArtPack(): void;
|
|
68
|
+
|
|
69
|
+
export { GENART_FX, PALETTES, meshGradient, registerGenArtPack, seededRandom };
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { registerEffects } from '../chunks/registry-CnO7ZVPK.js';
|
|
2
|
+
import '../chunks/base-CLuqlLfG.js';
|
|
3
|
+
|
|
4
|
+
const PALETTES = {
|
|
5
|
+
sunset: ['#ff6b6b', '#feca57', '#ff9ff3', '#5f27cd', '#1dd1a1'],
|
|
6
|
+
ocean: ['#0abde3', '#48dbfb', '#c8d6e5', '#10ac84', '#222f3e'],
|
|
7
|
+
forest: ['#2d6a4f', '#52b788', '#95d5b2', '#d8f3dc', '#081c15'],
|
|
8
|
+
candy: ['#f72585', '#b5179e', '#7209b7', '#4361ee', '#4cc9f0'],
|
|
9
|
+
mono: ['#111827', '#374151', '#6b7280', '#d1d5db', '#f9fafb'],
|
|
10
|
+
};
|
|
11
|
+
/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */
|
|
12
|
+
function seededRandom(seed) {
|
|
13
|
+
let a = (Math.floor(Math.abs(seed) * 1e3) >>> 0) || 1;
|
|
14
|
+
return () => {
|
|
15
|
+
a = (a + 0x6d2b79f5) >>> 0;
|
|
16
|
+
let t = a;
|
|
17
|
+
t = Math.imul(t ^ (t >>> 15), t | 1);
|
|
18
|
+
t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
|
|
19
|
+
return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */
|
|
23
|
+
function meshGradient(seed = 1, palette = 'sunset') {
|
|
24
|
+
const pal = Array.isArray(palette) ? palette : PALETTES[palette] || PALETTES.sunset;
|
|
25
|
+
const r = seededRandom(seed);
|
|
26
|
+
const blobs = [0, 1, 2, 3].map((i) => `radial-gradient(at ${Math.round(r() * 100)}% ${Math.round(r() * 100)}%, ${pal[(i + 1) % pal.length]} 0px, transparent ${45 + Math.round(r() * 20)}%)`);
|
|
27
|
+
return `${blobs.join(', ')}, ${pal[0]}`;
|
|
28
|
+
}
|
|
29
|
+
const overlay = (el, ctx) => {
|
|
30
|
+
if (getComputedStyle(el).position === 'static') {
|
|
31
|
+
const prev = el.style.position;
|
|
32
|
+
el.style.position = 'relative';
|
|
33
|
+
ctx.onCleanup(() => (el.style.position = prev));
|
|
34
|
+
}
|
|
35
|
+
const o = document.createElement('span');
|
|
36
|
+
o.setAttribute('aria-hidden', 'true');
|
|
37
|
+
Object.assign(o.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', overflow: 'hidden' });
|
|
38
|
+
el.appendChild(o);
|
|
39
|
+
ctx.onCleanup(() => o.remove());
|
|
40
|
+
return o;
|
|
41
|
+
};
|
|
42
|
+
const GRAIN = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E\")";
|
|
43
|
+
const GENART_FX = [
|
|
44
|
+
{
|
|
45
|
+
name: 'halftone-in',
|
|
46
|
+
kind: 'enter',
|
|
47
|
+
description: 'The element prints in through a growing halftone dot screen (`dot` px).',
|
|
48
|
+
defaults: { dot: 10, duration: 1100 },
|
|
49
|
+
run: (el, o, ctx) => {
|
|
50
|
+
if (ctx.reduced)
|
|
51
|
+
return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);
|
|
52
|
+
const d = Math.max(4, Math.min(40, Number(o.dot) || 10));
|
|
53
|
+
const m = (r) => `radial-gradient(circle, #000 ${r}px, transparent ${r + 0.5}px) 0 0 / ${d}px ${d}px`;
|
|
54
|
+
const prev = [el.style.maskImage, el.style.webkitMaskImage];
|
|
55
|
+
ctx.onCleanup(() => {
|
|
56
|
+
el.style.maskImage = prev[0];
|
|
57
|
+
el.style.webkitMaskImage = prev[1];
|
|
58
|
+
});
|
|
59
|
+
const a = ctx.animate(el, [0, 0.15, 0.3, 0.45, 0.6, 0.75].map((f, i, all) => ({ mask: m(f * d), WebkitMask: m(f * d), offset: i / all.length })).concat([{ mask: m(d), WebkitMask: m(d), offset: 1 }]), { duration: o.duration, delay: o.delay, easing: 'steps(6, end)', fill: 'backwards' });
|
|
60
|
+
return a?.finished.catch(() => undefined);
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
name: 'mesh-drift',
|
|
65
|
+
kind: 'loop',
|
|
66
|
+
description: 'A seeded mesh-gradient background that slowly drifts (`seed`, `palette`).',
|
|
67
|
+
defaults: { seed: 3, palette: 'sunset', duration: 14000 },
|
|
68
|
+
run: (el, o, ctx) => {
|
|
69
|
+
if (ctx.reduced)
|
|
70
|
+
return;
|
|
71
|
+
const ov = overlay(el, ctx);
|
|
72
|
+
ov.style.zIndex = '-1';
|
|
73
|
+
ov.style.background = meshGradient(Number(o.seed) || 3, o.palette);
|
|
74
|
+
ov.style.backgroundSize = '200% 200%';
|
|
75
|
+
if (getComputedStyle(el).isolation !== 'isolate') {
|
|
76
|
+
const prev = el.style.isolation;
|
|
77
|
+
el.style.isolation = 'isolate';
|
|
78
|
+
ctx.onCleanup(() => (el.style.isolation = prev));
|
|
79
|
+
}
|
|
80
|
+
const a = ctx.animate(ov, [{ backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }, { backgroundPosition: '100% 60%', filter: 'hue-rotate(25deg)' }, { backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
|
|
81
|
+
return () => {
|
|
82
|
+
a?.cancel();
|
|
83
|
+
ov.remove();
|
|
84
|
+
};
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
name: 'kaleido',
|
|
89
|
+
kind: 'loop',
|
|
90
|
+
description: 'A kaleidoscopic conic overlay that turns slowly (`color`, `segments`).',
|
|
91
|
+
defaults: { color: 'rgba(255,255,255,.35)', segments: 12, duration: 12000 },
|
|
92
|
+
run: (el, o, ctx) => {
|
|
93
|
+
if (ctx.reduced)
|
|
94
|
+
return;
|
|
95
|
+
const ov = overlay(el, ctx);
|
|
96
|
+
const n = Math.max(4, Math.min(36, Math.round(Number(o.segments) || 12)));
|
|
97
|
+
const inner = document.createElement('i');
|
|
98
|
+
Object.assign(inner.style, { position: 'absolute', left: '-50%', top: '-50%', width: '200%', height: '200%', background: `repeating-conic-gradient(${o.color} 0 ${180 / n}deg, transparent ${180 / n}deg ${360 / n}deg)`, mixBlendMode: 'overlay' });
|
|
99
|
+
ov.appendChild(inner);
|
|
100
|
+
const a = ctx.animate(inner, [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }], { duration: o.duration, iterations: Infinity, easing: 'linear' });
|
|
101
|
+
return () => {
|
|
102
|
+
a?.cancel();
|
|
103
|
+
ov.remove();
|
|
104
|
+
};
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
name: 'grain-flicker',
|
|
109
|
+
kind: 'loop',
|
|
110
|
+
description: 'Animated film grain over the element (`opacity`).',
|
|
111
|
+
defaults: { opacity: 0.25 },
|
|
112
|
+
run: (el, o, ctx) => {
|
|
113
|
+
if (ctx.reduced)
|
|
114
|
+
return;
|
|
115
|
+
const ov = overlay(el, ctx);
|
|
116
|
+
Object.assign(ov.style, { backgroundImage: GRAIN, opacity: String(o.opacity), mixBlendMode: 'overlay' });
|
|
117
|
+
const a = ctx.animate(ov, [0, 1, 2, 3, 4, 5].map((i) => ({ backgroundPosition: `${(i * 37) % 160}px ${(i * 71) % 160}px` })), { duration: 600, iterations: Infinity, easing: 'steps(6, end)' });
|
|
118
|
+
return () => {
|
|
119
|
+
a?.cancel();
|
|
120
|
+
ov.remove();
|
|
121
|
+
};
|
|
122
|
+
},
|
|
123
|
+
},
|
|
124
|
+
];
|
|
125
|
+
/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
|
|
126
|
+
function registerGenArtPack() {
|
|
127
|
+
registerEffects(GENART_FX);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
export { GENART_FX, PALETTES, meshGradient, registerGenArtPack, seededRandom };
|
|
131
|
+
//# sourceMappingURL=fx-genart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-genart.js","sources":["../../src/components/fx2/genart.ts"],"sourcesContent":["/**\n * 9.3 — Generative art 2.0 pack (`motionary/fx/genart`, also `motionary/components/fx-genart`):\n *\n * - `halftone-in` (enter) — the element prints in through a growing\n * halftone dot screen, like a comic-book plate (`dot`).\n * - `mesh-drift` (loop) — a seeded mesh-gradient background that slowly\n * drifts (`seed`, `palette`).\n * - `kaleido` (loop) — a kaleidoscopic conic overlay that turns slowly\n * (`color`, `segments`).\n * - `grain-flicker` (loop) — animated film grain over the element.\n *\n * `PALETTES`, `seededRandom(seed)`, `meshGradient(seed, palette)` (a CSS\n * background string) are shared with `<usa-bg-generator>` and\n * `<usa-gen-art>`. Reduced motion: halftone-in fades, loops are skipped.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\nexport const PALETTES: Record<string, string[]> = {\n sunset: ['#ff6b6b', '#feca57', '#ff9ff3', '#5f27cd', '#1dd1a1'],\n ocean: ['#0abde3', '#48dbfb', '#c8d6e5', '#10ac84', '#222f3e'],\n forest: ['#2d6a4f', '#52b788', '#95d5b2', '#d8f3dc', '#081c15'],\n candy: ['#f72585', '#b5179e', '#7209b7', '#4361ee', '#4cc9f0'],\n mono: ['#111827', '#374151', '#6b7280', '#d1d5db', '#f9fafb'],\n};\n\n/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */\nexport function seededRandom(seed: number): () => number {\n let a = (Math.floor(Math.abs(seed) * 1e3) >>> 0) || 1;\n return () => {\n a = (a + 0x6d2b79f5) >>> 0;\n let t = a;\n t = Math.imul(t ^ (t >>> 15), t | 1);\n t ^= t + Math.imul(t ^ (t >>> 7), t | 61);\n return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n };\n}\n\n/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */\nexport function meshGradient(seed = 1, palette: string | string[] = 'sunset'): string {\n const pal = Array.isArray(palette) ? palette : PALETTES[palette] || PALETTES.sunset;\n const r = seededRandom(seed);\n const blobs = [0, 1, 2, 3].map((i) => `radial-gradient(at ${Math.round(r() * 100)}% ${Math.round(r() * 100)}%, ${pal[(i + 1) % pal.length]} 0px, transparent ${45 + Math.round(r() * 20)}%)`);\n return `${blobs.join(', ')}, ${pal[0]}`;\n}\n\nconst overlay = (el: HTMLElement, ctx: EffectContext) => {\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 o = document.createElement('span');\n o.setAttribute('aria-hidden', 'true');\n Object.assign(o.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', overflow: 'hidden' });\n el.appendChild(o);\n ctx.onCleanup(() => o.remove());\n return o;\n};\nconst GRAIN = \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E\\\")\";\n\nexport const GENART_FX: EffectDefinition[] = [\n {\n name: 'halftone-in',\n kind: 'enter',\n description: 'The element prints in through a growing halftone dot screen (`dot` px).',\n defaults: { dot: 10, duration: 1100 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 300 })?.finished.catch(() => undefined);\n const d = Math.max(4, Math.min(40, Number(o.dot) || 10));\n const m = (r: number) => `radial-gradient(circle, #000 ${r}px, transparent ${r + 0.5}px) 0 0 / ${d}px ${d}px`;\n const prev = [el.style.maskImage, (el.style as any).webkitMaskImage];\n ctx.onCleanup(() => {\n el.style.maskImage = prev[0];\n (el.style as any).webkitMaskImage = prev[1];\n });\n const a = ctx.animate(el, [0, 0.15, 0.3, 0.45, 0.6, 0.75].map((f, i, all) => ({ mask: m(f * d), WebkitMask: m(f * d), offset: i / all.length })).concat([{ mask: m(d), WebkitMask: m(d), offset: 1 } as any]) as Keyframe[], { duration: o.duration, delay: o.delay, easing: 'steps(6, end)', fill: 'backwards' });\n return a?.finished.catch(() => undefined);\n },\n },\n {\n name: 'mesh-drift',\n kind: 'loop',\n description: 'A seeded mesh-gradient background that slowly drifts (`seed`, `palette`).',\n defaults: { seed: 3, palette: 'sunset', duration: 14000 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n const ov = overlay(el, ctx);\n ov.style.zIndex = '-1';\n ov.style.background = meshGradient(Number(o.seed) || 3, o.palette);\n ov.style.backgroundSize = '200% 200%';\n if (getComputedStyle(el).isolation !== 'isolate') {\n const prev = el.style.isolation;\n el.style.isolation = 'isolate';\n ctx.onCleanup(() => (el.style.isolation = prev));\n }\n const a = ctx.animate(ov, [{ backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }, { backgroundPosition: '100% 60%', filter: 'hue-rotate(25deg)' }, { backgroundPosition: '0% 0%', filter: 'hue-rotate(0deg)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n return () => {\n a?.cancel();\n ov.remove();\n };\n },\n },\n {\n name: 'kaleido',\n kind: 'loop',\n description: 'A kaleidoscopic conic overlay that turns slowly (`color`, `segments`).',\n defaults: { color: 'rgba(255,255,255,.35)', segments: 12, duration: 12000 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n const ov = overlay(el, ctx);\n const n = Math.max(4, Math.min(36, Math.round(Number(o.segments) || 12)));\n const inner = document.createElement('i');\n Object.assign(inner.style, { position: 'absolute', left: '-50%', top: '-50%', width: '200%', height: '200%', background: `repeating-conic-gradient(${o.color} 0 ${180 / n}deg, transparent ${180 / n}deg ${360 / n}deg)`, mixBlendMode: 'overlay' });\n ov.appendChild(inner);\n const a = ctx.animate(inner, [{ transform: 'rotate(0)' }, { transform: 'rotate(360deg)' }], { duration: o.duration, iterations: Infinity, easing: 'linear' });\n return () => {\n a?.cancel();\n ov.remove();\n };\n },\n },\n {\n name: 'grain-flicker',\n kind: 'loop',\n description: 'Animated film grain over the element (`opacity`).',\n defaults: { opacity: 0.25 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n const ov = overlay(el, ctx);\n Object.assign(ov.style, { backgroundImage: GRAIN, opacity: String(o.opacity), mixBlendMode: 'overlay' });\n const a = ctx.animate(ov, [0, 1, 2, 3, 4, 5].map((i) => ({ backgroundPosition: `${(i * 37) % 160}px ${(i * 71) % 160}px` })), { duration: 600, iterations: Infinity, easing: 'steps(6, end)' });\n return () => {\n a?.cancel();\n ov.remove();\n };\n },\n },\n];\n\n/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */\nexport function registerGenArtPack(): void {\n registerEffects(GENART_FX);\n}\n"],"names":[],"mappings":"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"}
|
package/dist/components/fx2.cjs
CHANGED
|
@@ -28,6 +28,7 @@ var components_fxGesture = require('./fx-gesture.cjs');
|
|
|
28
28
|
var components_fxSpatial = require('./fx-spatial.cjs');
|
|
29
29
|
var components_fxCinema = require('./fx-cinema.cjs');
|
|
30
30
|
var components_fxLottie = require('./fx-lottie.cjs');
|
|
31
|
+
var components_fxGenart = require('./fx-genart.cjs');
|
|
31
32
|
require('../chunks/registry-BVklOepd.cjs');
|
|
32
33
|
require('../chunks/base-DoRUZBy-.cjs');
|
|
33
34
|
require('../chunks/generative-BHIj-NU0.cjs');
|
|
@@ -63,6 +64,7 @@ const EFFECT_PACKS = {
|
|
|
63
64
|
spatial: components_fxSpatial.SPATIAL_FX,
|
|
64
65
|
cinema: components_fxCinema.CINEMA_FX,
|
|
65
66
|
lottie: components_fxLottie.LOTTIE_FX,
|
|
67
|
+
genart: components_fxGenart.GENART_FX,
|
|
66
68
|
};
|
|
67
69
|
/** Register every 6.x effect pack (idempotent). */
|
|
68
70
|
function registerEffectPacks() {
|
|
@@ -93,6 +95,7 @@ function registerEffectPacks() {
|
|
|
93
95
|
components_fxSpatial.registerSpatialPack();
|
|
94
96
|
components_fxCinema.registerCinemaPack();
|
|
95
97
|
components_fxLottie.registerLottiePack();
|
|
98
|
+
components_fxGenart.registerGenArtPack();
|
|
96
99
|
}
|
|
97
100
|
|
|
98
101
|
exports.EFFECT_PACK_FORMAT = manifest.EFFECT_PACK_FORMAT;
|
|
@@ -197,6 +200,11 @@ exports.lottieToKeyframes = components_fxLottie.lottieToKeyframes;
|
|
|
197
200
|
exports.lottieToSvg = components_fxLottie.lottieToSvg;
|
|
198
201
|
exports.registerLottiePack = components_fxLottie.registerLottiePack;
|
|
199
202
|
exports.riveInputs = components_fxLottie.riveInputs;
|
|
203
|
+
exports.GENART_FX = components_fxGenart.GENART_FX;
|
|
204
|
+
exports.PALETTES = components_fxGenart.PALETTES;
|
|
205
|
+
exports.meshGradient = components_fxGenart.meshGradient;
|
|
206
|
+
exports.registerGenArtPack = components_fxGenart.registerGenArtPack;
|
|
207
|
+
exports.seededRandom = components_fxGenart.seededRandom;
|
|
200
208
|
exports.EFFECT_PACKS = EFFECT_PACKS;
|
|
201
209
|
exports.registerEffectPacks = registerEffectPacks;
|
|
202
210
|
//# 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';\nimport { ORGANIC_FX, registerOrganicPack, blobRadius } from './organic';\nimport { CYBER_FX, registerCyberPack, decodeFrame } from './cyber';\nimport { PAPER_FX, registerPaperPack, roughLine, paperRandom } from './paper';\nimport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme } from './themefx';\nimport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt } from './gesture3';\nimport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport } from './spatial';\nimport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES } from './cinema';\nimport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs } from './lottie';\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\nexport { PAPER_FX, registerPaperPack, roughLine, paperRandom };\n\nexport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme };\n\nexport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt };\n\nexport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport };\n\nexport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES };\n\nexport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs };\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 paper: PAPER_FX,\n surface: SURFACE_FX,\n gesture3: GESTURE3_FX,\n spatial: SPATIAL_FX,\n cinema: CINEMA_FX,\n lottie: LOTTIE_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 registerPaperPack();\n registerSurfacePack();\n registerGesture3Pack();\n registerSpatialPack();\n registerCinemaPack();\n registerLottiePack();\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","PAPER_FX","SURFACE_FX","GESTURE3_FX","SPATIAL_FX","CINEMA_FX","LOTTIE_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack","registerFormPack","registerAiPack","registerFestivalPack","registerRetroPack","registerOrganicPack","registerCyberPack","registerPaperPack","registerSurfacePack","registerGesture3Pack","registerSpatialPack","registerCinemaPack","registerLottiePack"],"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';\nimport { PAPER_FX, registerPaperPack, roughLine, paperRandom } from './paper';\nimport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme } from './themefx';\nimport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt } from './gesture3';\nimport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport } from './spatial';\nimport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES } from './cinema';\nimport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs } from './lottie';\nimport { GENART_FX, registerGenArtPack, PALETTES, seededRandom, meshGradient } from './genart';\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\nexport { PAPER_FX, registerPaperPack, roughLine, paperRandom };\n\nexport { SURFACE_FX, registerSurfacePack, SURFACE_THEMES, applySurfaceTheme };\n\nexport { GESTURE3_FX, registerGesture3Pack, pinchScale, pinchAngle, orientationToTilt };\n\nexport { SPATIAL_FX, registerSpatialPack, yawToOffset, xrSupport };\n\nexport { CINEMA_FX, registerCinemaPack, cameraFrame, CAMERA_MOVES };\n\nexport { LOTTIE_FX, registerLottiePack, lottieToKeyframes, lottieToSvg, riveInputs };\n\nexport { GENART_FX, registerGenArtPack, PALETTES, seededRandom, meshGradient };\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 paper: PAPER_FX,\n surface: SURFACE_FX,\n gesture3: GESTURE3_FX,\n spatial: SPATIAL_FX,\n cinema: CINEMA_FX,\n lottie: LOTTIE_FX,\n genart: GENART_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 registerPaperPack();\n registerSurfacePack();\n registerGesture3Pack();\n registerSpatialPack();\n registerCinemaPack();\n registerLottiePack();\n registerGenArtPack();\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","PAPER_FX","SURFACE_FX","GESTURE3_FX","SPATIAL_FX","CINEMA_FX","LOTTIE_FX","GENART_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack","registerGamePack","registerGeoPack","registerFormPack","registerAiPack","registerFestivalPack","registerRetroPack","registerOrganicPack","registerCyberPack","registerPaperPack","registerSurfacePack","registerGesture3Pack","registerSpatialPack","registerCinemaPack","registerLottiePack","registerGenArtPack"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA;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;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,QAAQ,EAAEC,gCAAW;AACrB,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,MAAM,EAAEC,6BAAS;AACjB,IAAA,MAAM,EAAEC,6BAAS;;AAGnB;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;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,yCAAoB,EAAE;AACtB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,sCAAkB,EAAE;AACpB,IAAAC,sCAAkB,EAAE;AACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -847,6 +847,31 @@ declare const LOTTIE_FX: EffectDefinition[];
|
|
|
847
847
|
/** Register lottie-play and icon-pop (9.2). */
|
|
848
848
|
declare function registerLottiePack(): void;
|
|
849
849
|
|
|
850
|
+
/**
|
|
851
|
+
* 9.3 — Generative art 2.0 pack (`motionary/fx/genart`, also `motionary/components/fx-genart`):
|
|
852
|
+
*
|
|
853
|
+
* - `halftone-in` (enter) — the element prints in through a growing
|
|
854
|
+
* halftone dot screen, like a comic-book plate (`dot`).
|
|
855
|
+
* - `mesh-drift` (loop) — a seeded mesh-gradient background that slowly
|
|
856
|
+
* drifts (`seed`, `palette`).
|
|
857
|
+
* - `kaleido` (loop) — a kaleidoscopic conic overlay that turns slowly
|
|
858
|
+
* (`color`, `segments`).
|
|
859
|
+
* - `grain-flicker` (loop) — animated film grain over the element.
|
|
860
|
+
*
|
|
861
|
+
* `PALETTES`, `seededRandom(seed)`, `meshGradient(seed, palette)` (a CSS
|
|
862
|
+
* background string) are shared with `<usa-bg-generator>` and
|
|
863
|
+
* `<usa-gen-art>`. Reduced motion: halftone-in fades, loops are skipped.
|
|
864
|
+
*/
|
|
865
|
+
|
|
866
|
+
declare const PALETTES: Record<string, string[]>;
|
|
867
|
+
/** Deterministic PRNG in [0, 1) (mulberry32) (9.3). */
|
|
868
|
+
declare function seededRandom(seed: number): () => number;
|
|
869
|
+
/** A seeded mesh-gradient CSS background (4 radial blobs over a base colour) (9.3). */
|
|
870
|
+
declare function meshGradient(seed?: number, palette?: string | string[]): string;
|
|
871
|
+
declare const GENART_FX: EffectDefinition[];
|
|
872
|
+
/** Register halftone-in, mesh-drift, kaleido and grain-flicker (9.3). */
|
|
873
|
+
declare function registerGenArtPack(): void;
|
|
874
|
+
|
|
850
875
|
/**
|
|
851
876
|
* 5.5 — generative backgrounds on Canvas 2D, registered through
|
|
852
877
|
* `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
|
|
@@ -956,5 +981,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
|
|
|
956
981
|
/** Register every 6.x effect pack (idempotent). */
|
|
957
982
|
declare function registerEffectPacks(): void;
|
|
958
983
|
|
|
959
|
-
export { AI_FX, CAMERA_MOVES, CHART_FX, CINEMA_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GEO_FX, GESTURE3_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, LOTTIE_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SPATIAL_FX, SURFACE_FX, SURFACE_THEMES, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, applySurfaceTheme, arcPath, blobRadius, cameraFrame, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, lottieToKeyframes, lottieToSvg, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCinemaPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerLottiePack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack, riveInputs, roughLine, routeLength, samplePath, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule, xrSupport, yawToOffset };
|
|
984
|
+
export { AI_FX, CAMERA_MOVES, CHART_FX, CINEMA_FX, CYBER_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FESTIVAL_FX, FOCUS_FX, FORM_FX, GAME_FX, GENART_FX, GEO_FX, GESTURE3_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, LOTTIE_FX, MORPH2_FX, MUSIC_FX, ORGANIC_FX, PALETTES, PAPER_FX, PHYSICS2_FX, RETRO_FX, SHOP_FX, SOCIAL_FX, SPATIAL_FX, SURFACE_FX, SURFACE_THEMES, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, applySurfaceTheme, arcPath, blobRadius, cameraFrame, crossDocumentTransitions, decodeFrame, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, lottieToKeyframes, lottieToSvg, meshGradient, musicSample, orientationToTilt, packManifest, pageTransition, paperRandom, parseFigure, pinchAngle, pinchScale, pixelSteps, pointsToPath, register3dPack, registerAiPack, registerChartPack, registerCinemaPack, registerCyberPack, registerEffectPacks, registerFestivalPack, registerFocusPack, registerFormPack, registerGamePack, registerGenArtPack, registerGeoPack, registerGesture3Pack, registerGpuPack, registerLightPack, registerLottiePack, registerMorphPack, registerMusicPack, registerOrganicPack, registerPaperPack, registerPhysicsPack, registerRetroPack, registerShopPack, registerSocialPack, registerSpatialPack, registerSurfacePack, registerTextPack, registerTransitionsPack, registerWeatherPack, riveInputs, roughLine, routeLength, samplePath, seededRandom, shaderBackground, shakeFrames, skyAt, sparkVectors, splitChars, splitWords, supportsWebGL2, supportsWebGPU, syntheticSample, throwPath, trackPointer, validateManifest, webgpuBackground, wgslModule, xrSupport, yawToOffset };
|
|
960
985
|
export type { EffectPackManifest, ShaderSpec };
|