use-scroll-animate 8.0.0 → 8.2.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 +27 -0
- package/dist/components/fx-festival.cjs +121 -0
- package/dist/components/fx-festival.cjs.map +1 -0
- package/dist/components/fx-festival.d.cts +69 -0
- package/dist/components/fx-festival.d.ts +69 -0
- package/dist/components/fx-festival.js +117 -0
- package/dist/components/fx-festival.js.map +1 -0
- package/dist/components/fx-retro.cjs +96 -0
- package/dist/components/fx-retro.cjs.map +1 -0
- package/dist/components/fx-retro.d.cts +66 -0
- package/dist/components/fx-retro.d.ts +66 -0
- package/dist/components/fx-retro.js +92 -0
- package/dist/components/fx-retro.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 +48 -1
- package/dist/components/fx2.d.ts +48 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +440 -143
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +70 -2
- package/dist/components/widgets.d.ts +70 -2
- package/dist/components/widgets.js +435 -144
- 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 +42 -0
- package/package.json +41 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,33 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [8.2.0] - 2026-10-08
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
- **2 new components (8.2)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
|
|
14
|
+
- `<usa-terminal>` — retro terminal window: child `<p data-cmd>` lines are typed after the `prompt` (default `$`) with a blinking block cursor, other children print as output, line by line, when it scrolls into view; `title`, `theme` (dark · green · amber phosphor glow), `speed`, `loop`; `replay()`, `skip()`; `usa:done`.
|
|
15
|
+
- `<usa-retro-button variant="pixel | crt | y2k | win95">` — retro buttons with era-true press motion (stepped 8-bit press, phosphor flicker, chrome bounce, bevel sink); the content becomes a real `<button>` (`type`, `disabled`, `name`, `value`); `RETRO_VARIANTS`.
|
|
16
|
+
- **Retro pack — `motionary/fx/retro`** (= `motionary/components/fx-retro`, `registerRetroPack()`, also in `registerEffectPacks()`): `pixelate-in` (enter), `crt-power` (enter), `vhs-glitch` (attention), `y2k-shine` (attention). `pixelSteps()`. (The 5.8 theme effects `retro` / `retro-scanlines` are unchanged.)
|
|
17
|
+
- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails; Animation Store 339 → 343 items.
|
|
18
|
+
|
|
19
|
+
### Accessibility
|
|
20
|
+
- Terminal output is a labelled `role="log"`; the prompt and cursor are `aria-hidden`. Retro buttons are real `<button>`s with visible focus styles per variant. Reduced motion: the terminal shows everything at once (no blink), buttons only change colour, `pixelate-in` / `crt-power` fade in, `vhs-glitch` does nothing, `y2k-shine` is a short brightness flash.
|
|
21
|
+
|
|
22
|
+
## [8.1.0] - 2026-10-08
|
|
23
|
+
|
|
24
|
+
### Added
|
|
25
|
+
- **2 new components (8.1)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
|
|
26
|
+
- `<usa-red-envelope>` — Lunar New Year red envelope (红包): tap / Enter / Space → the flap swings open, the card slides out with `amount` counting up (`currency`, default ¥) and gold coins pop out; `message` (恭喜发财), `from`, `opened`; `open()`, `close()`, `opened`; `usa:open` { amount }.
|
|
27
|
+
- `<usa-festival-banner theme="lunar | xmas | halloween | fireworks">` — announcement banner with an ambient festive scene behind its text (lanterns + sparkles, lights + snow, bats + moon, rockets), animating only while on screen; `dismissible` → close button (`usa:dismiss`), `label`; `FESTIVAL_THEMES`.
|
|
28
|
+
- **Festival packs — `motionary/fx/festival`** (= `motionary/components/fx-festival`, `registerFestivalPack()`, also in `registerEffectPacks()`): `firework-burst` (attention), `lantern-rise` (enter), `xmas-snow` (loop), `spooky-float` (attention). `sparkVectors()`.
|
|
29
|
+
- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails; Animation Store 335 → 339 items.
|
|
30
|
+
|
|
31
|
+
### Fixed
|
|
32
|
+
- Store live thumbnails (`showcase/thumb.js`): the CDN fallback still pointed at `motionary@7` after 8.0 → `motionary@8`.
|
|
33
|
+
|
|
34
|
+
### Accessibility
|
|
35
|
+
- Red envelope is a real `<button aria-expanded>` with a descriptive label; the amount is announced through a polite live region. Banner: labelled `region`, decorations `aria-hidden`, real dismiss button. Reduced motion: envelope opens without swing / slide / count / coins, the banner scene is static, `firework-burst` / `spooky-float` do nothing, `xmas-snow` is skipped, `lantern-rise` fades in.
|
|
36
|
+
|
|
10
37
|
## [8.0.0] - 2026-10-08
|
|
11
38
|
|
|
12
39
|
### ⚠️ Breaking
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var registry = require('../chunks/registry-BVklOepd.cjs');
|
|
4
|
+
require('../chunks/base-DoRUZBy-.cjs');
|
|
5
|
+
|
|
6
|
+
/** Evenly spread spark directions with a little jitter (8.1). */
|
|
7
|
+
function sparkVectors(n, radius, seed = 1) {
|
|
8
|
+
let s = seed;
|
|
9
|
+
const rnd = () => ((s = (s * 9301 + 49297) % 233280) / 233280);
|
|
10
|
+
return Array.from({ length: n }, (_, i) => {
|
|
11
|
+
const a = (i / n) * Math.PI * 2 + (rnd() - 0.5) * 0.3;
|
|
12
|
+
const r = radius * (0.7 + rnd() * 0.3);
|
|
13
|
+
return { x: Math.round(Math.cos(a) * r), y: Math.round(Math.sin(a) * r) };
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
const layer = (el, ctx) => {
|
|
17
|
+
if (getComputedStyle(el).position === 'static') {
|
|
18
|
+
const prev = el.style.position;
|
|
19
|
+
el.style.position = 'relative';
|
|
20
|
+
ctx.onCleanup(() => (el.style.position = prev));
|
|
21
|
+
}
|
|
22
|
+
const l = document.createElement('span');
|
|
23
|
+
l.setAttribute('aria-hidden', 'true');
|
|
24
|
+
Object.assign(l.style, { position: 'absolute', inset: '0', pointerEvents: 'none', overflow: 'visible' });
|
|
25
|
+
el.appendChild(l);
|
|
26
|
+
ctx.onCleanup(() => l.remove());
|
|
27
|
+
return l;
|
|
28
|
+
};
|
|
29
|
+
const dot = (parent, css, text = '') => {
|
|
30
|
+
const d = document.createElement('span');
|
|
31
|
+
d.textContent = text;
|
|
32
|
+
Object.assign(d.style, { position: 'absolute', left: '50%', top: '50%', ...css });
|
|
33
|
+
parent.appendChild(d);
|
|
34
|
+
return d;
|
|
35
|
+
};
|
|
36
|
+
const FESTIVAL_FX = [
|
|
37
|
+
{
|
|
38
|
+
name: 'firework-burst',
|
|
39
|
+
kind: 'attention',
|
|
40
|
+
description: 'Rockets of sparks burst out of the element in festive colours (`bursts`, `colors`).',
|
|
41
|
+
defaults: { bursts: 3, colors: '#f43f5e,#f59e0b,#22d3ee,#a855f7,#facc15', duration: 900 },
|
|
42
|
+
run: (el, o, ctx) => {
|
|
43
|
+
if (ctx.reduced)
|
|
44
|
+
return;
|
|
45
|
+
const l = layer(el, ctx);
|
|
46
|
+
const colors = String(o.colors).split(',');
|
|
47
|
+
const r = el.getBoundingClientRect();
|
|
48
|
+
const runs = [];
|
|
49
|
+
const n = Math.max(1, Math.min(6, Number(o.bursts) || 3));
|
|
50
|
+
for (let b = 0; b < n; b++) {
|
|
51
|
+
const cx = (b - (n - 1) / 2) * Math.min(60, (r.width || 120) / n);
|
|
52
|
+
const cy = -((r.height || 60) * 0.25) - (b % 2) * 18;
|
|
53
|
+
const col = colors[b % colors.length];
|
|
54
|
+
sparkVectors(14, 46 + b * 6, b + 3).forEach((v) => {
|
|
55
|
+
const s = dot(l, { width: '5px', height: '5px', marginLeft: '-2.5px', marginTop: '-2.5px', borderRadius: '50%', background: col, boxShadow: `0 0 6px ${col}` });
|
|
56
|
+
const a = ctx.animate(s, [{ transform: `translate(${cx}px,${cy + 40}px) scale(.4)`, opacity: 0 }, { transform: `translate(${cx}px,${cy}px) scale(1)`, opacity: 1, offset: 0.25 }, { transform: `translate(${cx + v.x}px,${cy + v.y + 18}px) scale(.3)`, opacity: 0 }], { duration: o.duration, delay: b * 220, easing: 'cubic-bezier(.2,.7,.3,1)', fill: 'backwards' });
|
|
57
|
+
runs.push(a ? a.finished.then(() => s.remove(), () => s.remove()) : Promise.resolve(s.remove()));
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
return Promise.all(runs).then(() => l.remove());
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
name: 'lantern-rise',
|
|
65
|
+
kind: 'enter',
|
|
66
|
+
description: 'The element floats up and sways in like a Lunar New Year lantern (`sway` degrees).',
|
|
67
|
+
defaults: { sway: 8, duration: 1400 },
|
|
68
|
+
run: (el, o, ctx) => {
|
|
69
|
+
if (ctx.reduced)
|
|
70
|
+
return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
|
|
71
|
+
const w = Number(o.sway) || 8;
|
|
72
|
+
return ctx
|
|
73
|
+
.animate(el, [{ transform: `translateY(60px) rotate(${-w}deg)`, opacity: 0, transformOrigin: '50% 0' }, { transform: `translateY(-6px) rotate(${w * 0.6}deg)`, opacity: 1, offset: 0.55, transformOrigin: '50% 0' }, { transform: `translateY(0) rotate(${-w * 0.3}deg)`, offset: 0.8, transformOrigin: '50% 0' }, { transform: 'none', opacity: 1, transformOrigin: '50% 0' }], { duration: o.duration, easing: 'ease-out', fill: 'backwards' })
|
|
74
|
+
?.finished.catch(() => undefined);
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
name: 'xmas-snow',
|
|
79
|
+
kind: 'loop',
|
|
80
|
+
description: 'Snowflakes drift down over the element until the cleanup runs (`flakes`).',
|
|
81
|
+
defaults: { flakes: 18, duration: 4000 },
|
|
82
|
+
run: (el, o, ctx) => {
|
|
83
|
+
const l = layer(el, ctx);
|
|
84
|
+
l.style.overflow = 'hidden';
|
|
85
|
+
const n = Math.max(4, Math.min(60, Number(o.flakes) || 18));
|
|
86
|
+
const anims = Array.from({ length: n }, (_, i) => {
|
|
87
|
+
const x = (i * 37) % 100;
|
|
88
|
+
const size = 8 + ((i * 7) % 9);
|
|
89
|
+
const f = dot(l, { left: `${x}%`, top: '-14px', fontSize: `${size}px`, color: '#fff', textShadow: '0 0 3px rgba(148,163,184,.9)', lineHeight: '1' }, '❄');
|
|
90
|
+
const drift = ((i % 5) - 2) * 12;
|
|
91
|
+
return ctx.animate(f, [{ transform: 'translate(0,0) rotate(0)' }, { transform: `translate(${drift}px, calc(${el.clientHeight || 160}px + 20px)) rotate(180deg)` }], { duration: o.duration * (0.7 + ((i * 13) % 6) / 10), delay: -((i * 331) % o.duration), iterations: Infinity, easing: 'linear' });
|
|
92
|
+
});
|
|
93
|
+
return () => {
|
|
94
|
+
anims.forEach((a) => a?.cancel());
|
|
95
|
+
l.remove();
|
|
96
|
+
};
|
|
97
|
+
},
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
name: 'spooky-float',
|
|
101
|
+
kind: 'attention',
|
|
102
|
+
description: 'The element wobbles, rises and flickers like a Halloween ghost (`cycles`).',
|
|
103
|
+
defaults: { cycles: 2, duration: 1200 },
|
|
104
|
+
run: (el, o, ctx) => {
|
|
105
|
+
if (ctx.reduced)
|
|
106
|
+
return;
|
|
107
|
+
return ctx
|
|
108
|
+
.animate(el, [{ transform: 'none', opacity: 1 }, { transform: 'translate(-4px,-10px) rotate(-4deg) skewX(3deg)', opacity: 0.55, offset: 0.3 }, { transform: 'translate(4px,-14px) rotate(4deg) skewX(-3deg)', opacity: 0.85, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, iterations: Math.max(1, Math.min(6, Number(o.cycles) || 2)), easing: 'ease-in-out' })
|
|
109
|
+
?.finished.catch(() => undefined);
|
|
110
|
+
},
|
|
111
|
+
},
|
|
112
|
+
];
|
|
113
|
+
/** Register firework-burst, lantern-rise, xmas-snow and spooky-float (8.1). */
|
|
114
|
+
function registerFestivalPack() {
|
|
115
|
+
registry.registerEffects(FESTIVAL_FX);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
exports.FESTIVAL_FX = FESTIVAL_FX;
|
|
119
|
+
exports.registerFestivalPack = registerFestivalPack;
|
|
120
|
+
exports.sparkVectors = sparkVectors;
|
|
121
|
+
//# sourceMappingURL=fx-festival.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-festival.cjs","sources":["../../src/components/fx2/festival.ts"],"sourcesContent":["/**\n * 8.1 — Festival packs (`motionary/fx/festival`, also `motionary/components/fx-festival`):\n *\n * - `firework-burst` (attention) — rockets of sparks burst out of the element\n * in festive colours (`bursts`, `colors`).\n * - `lantern-rise` (enter) — the element floats up and sways in like a\n * Lunar New Year lantern (`sway`).\n * - `xmas-snow` (loop) — snowflakes drift down over the element; the cleanup\n * stops them (`flakes`).\n * - `spooky-float` (attention) — the element wobbles and fades like a\n * Halloween ghost (`cycles`).\n *\n * Reduced motion: firework-burst / spooky-float do nothing, xmas-snow is\n * skipped, lantern-rise fades in. Particles are `aria-hidden` and removed.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Evenly spread spark directions with a little jitter (8.1). */\nexport function sparkVectors(n: number, radius: number, seed = 1): { x: number; y: number }[] {\n let s = seed;\n const rnd = () => ((s = (s * 9301 + 49297) % 233280) / 233280);\n return Array.from({ length: n }, (_, i) => {\n const a = (i / n) * Math.PI * 2 + (rnd() - 0.5) * 0.3;\n const r = radius * (0.7 + rnd() * 0.3);\n return { x: Math.round(Math.cos(a) * r), y: Math.round(Math.sin(a) * r) };\n });\n}\n\nconst layer = (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 l = document.createElement('span');\n l.setAttribute('aria-hidden', 'true');\n Object.assign(l.style, { position: 'absolute', inset: '0', pointerEvents: 'none', overflow: 'visible' });\n el.appendChild(l);\n ctx.onCleanup(() => l.remove());\n return l;\n};\nconst dot = (parent: HTMLElement, css: Partial<CSSStyleDeclaration>, text = '') => {\n const d = document.createElement('span');\n d.textContent = text;\n Object.assign(d.style, { position: 'absolute', left: '50%', top: '50%', ...css });\n parent.appendChild(d);\n return d;\n};\n\nexport const FESTIVAL_FX: EffectDefinition[] = [\n {\n name: 'firework-burst',\n kind: 'attention',\n description: 'Rockets of sparks burst out of the element in festive colours (`bursts`, `colors`).',\n defaults: { bursts: 3, colors: '#f43f5e,#f59e0b,#22d3ee,#a855f7,#facc15', duration: 900 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n const l = layer(el, ctx);\n const colors = String(o.colors).split(',');\n const r = el.getBoundingClientRect();\n const runs: Promise<unknown>[] = [];\n const n = Math.max(1, Math.min(6, Number(o.bursts) || 3));\n for (let b = 0; b < n; b++) {\n const cx = (b - (n - 1) / 2) * Math.min(60, (r.width || 120) / n);\n const cy = -((r.height || 60) * 0.25) - (b % 2) * 18;\n const col = colors[b % colors.length];\n sparkVectors(14, 46 + b * 6, b + 3).forEach((v) => {\n const s = dot(l, { width: '5px', height: '5px', marginLeft: '-2.5px', marginTop: '-2.5px', borderRadius: '50%', background: col, boxShadow: `0 0 6px ${col}` });\n const a = ctx.animate(s, [{ transform: `translate(${cx}px,${cy + 40}px) scale(.4)`, opacity: 0 }, { transform: `translate(${cx}px,${cy}px) scale(1)`, opacity: 1, offset: 0.25 }, { transform: `translate(${cx + v.x}px,${cy + v.y + 18}px) scale(.3)`, opacity: 0 }], { duration: o.duration, delay: b * 220, easing: 'cubic-bezier(.2,.7,.3,1)', fill: 'backwards' });\n runs.push(a ? a.finished.then(() => s.remove(), () => s.remove()) : Promise.resolve(s.remove()));\n });\n }\n return Promise.all(runs).then(() => l.remove());\n },\n },\n {\n name: 'lantern-rise',\n kind: 'enter',\n description: 'The element floats up and sways in like a Lunar New Year lantern (`sway` degrees).',\n defaults: { sway: 8, duration: 1400 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);\n const w = Number(o.sway) || 8;\n return ctx\n .animate(el, [{ transform: `translateY(60px) rotate(${-w}deg)`, opacity: 0, transformOrigin: '50% 0' }, { transform: `translateY(-6px) rotate(${w * 0.6}deg)`, opacity: 1, offset: 0.55, transformOrigin: '50% 0' }, { transform: `translateY(0) rotate(${-w * 0.3}deg)`, offset: 0.8, transformOrigin: '50% 0' }, { transform: 'none', opacity: 1, transformOrigin: '50% 0' }], { duration: o.duration, easing: 'ease-out', fill: 'backwards' })\n ?.finished.catch(() => undefined);\n },\n },\n {\n name: 'xmas-snow',\n kind: 'loop',\n description: 'Snowflakes drift down over the element until the cleanup runs (`flakes`).',\n defaults: { flakes: 18, duration: 4000 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const l = layer(el, ctx);\n l.style.overflow = 'hidden';\n const n = Math.max(4, Math.min(60, Number(o.flakes) || 18));\n const anims = Array.from({ length: n }, (_, i) => {\n const x = (i * 37) % 100;\n const size = 8 + ((i * 7) % 9);\n const f = dot(l, { left: `${x}%`, top: '-14px', fontSize: `${size}px`, color: '#fff', textShadow: '0 0 3px rgba(148,163,184,.9)', lineHeight: '1' }, '❄');\n const drift = ((i % 5) - 2) * 12;\n return ctx.animate(f, [{ transform: 'translate(0,0) rotate(0)' }, { transform: `translate(${drift}px, calc(${el.clientHeight || 160}px + 20px)) rotate(180deg)` }], { duration: o.duration * (0.7 + ((i * 13) % 6) / 10), delay: -((i * 331) % o.duration), iterations: Infinity, easing: 'linear' });\n });\n return () => {\n anims.forEach((a) => a?.cancel());\n l.remove();\n };\n },\n },\n {\n name: 'spooky-float',\n kind: 'attention',\n description: 'The element wobbles, rises and flickers like a Halloween ghost (`cycles`).',\n defaults: { cycles: 2, duration: 1200 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n return ctx\n .animate(el, [{ transform: 'none', opacity: 1 }, { transform: 'translate(-4px,-10px) rotate(-4deg) skewX(3deg)', opacity: 0.55, offset: 0.3 }, { transform: 'translate(4px,-14px) rotate(4deg) skewX(-3deg)', opacity: 0.85, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, iterations: Math.max(1, Math.min(6, Number(o.cycles) || 2)), easing: 'ease-in-out' })\n ?.finished.catch(() => undefined);\n },\n },\n];\n\n/** Register firework-burst, lantern-rise, xmas-snow and spooky-float (8.1). */\nexport function registerFestivalPack(): void {\n registerEffects(FESTIVAL_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
|
+
* 8.1 — Festival packs (`motionary/fx/festival`, also `motionary/components/fx-festival`):
|
|
46
|
+
*
|
|
47
|
+
* - `firework-burst` (attention) — rockets of sparks burst out of the element
|
|
48
|
+
* in festive colours (`bursts`, `colors`).
|
|
49
|
+
* - `lantern-rise` (enter) — the element floats up and sways in like a
|
|
50
|
+
* Lunar New Year lantern (`sway`).
|
|
51
|
+
* - `xmas-snow` (loop) — snowflakes drift down over the element; the cleanup
|
|
52
|
+
* stops them (`flakes`).
|
|
53
|
+
* - `spooky-float` (attention) — the element wobbles and fades like a
|
|
54
|
+
* Halloween ghost (`cycles`).
|
|
55
|
+
*
|
|
56
|
+
* Reduced motion: firework-burst / spooky-float do nothing, xmas-snow is
|
|
57
|
+
* skipped, lantern-rise fades in. Particles are `aria-hidden` and removed.
|
|
58
|
+
*/
|
|
59
|
+
|
|
60
|
+
/** Evenly spread spark directions with a little jitter (8.1). */
|
|
61
|
+
declare function sparkVectors(n: number, radius: number, seed?: number): {
|
|
62
|
+
x: number;
|
|
63
|
+
y: number;
|
|
64
|
+
}[];
|
|
65
|
+
declare const FESTIVAL_FX: EffectDefinition[];
|
|
66
|
+
/** Register firework-burst, lantern-rise, xmas-snow and spooky-float (8.1). */
|
|
67
|
+
declare function registerFestivalPack(): void;
|
|
68
|
+
|
|
69
|
+
export { FESTIVAL_FX, registerFestivalPack, sparkVectors };
|
|
@@ -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
|
+
* 8.1 — Festival packs (`motionary/fx/festival`, also `motionary/components/fx-festival`):
|
|
46
|
+
*
|
|
47
|
+
* - `firework-burst` (attention) — rockets of sparks burst out of the element
|
|
48
|
+
* in festive colours (`bursts`, `colors`).
|
|
49
|
+
* - `lantern-rise` (enter) — the element floats up and sways in like a
|
|
50
|
+
* Lunar New Year lantern (`sway`).
|
|
51
|
+
* - `xmas-snow` (loop) — snowflakes drift down over the element; the cleanup
|
|
52
|
+
* stops them (`flakes`).
|
|
53
|
+
* - `spooky-float` (attention) — the element wobbles and fades like a
|
|
54
|
+
* Halloween ghost (`cycles`).
|
|
55
|
+
*
|
|
56
|
+
* Reduced motion: firework-burst / spooky-float do nothing, xmas-snow is
|
|
57
|
+
* skipped, lantern-rise fades in. Particles are `aria-hidden` and removed.
|
|
58
|
+
*/
|
|
59
|
+
|
|
60
|
+
/** Evenly spread spark directions with a little jitter (8.1). */
|
|
61
|
+
declare function sparkVectors(n: number, radius: number, seed?: number): {
|
|
62
|
+
x: number;
|
|
63
|
+
y: number;
|
|
64
|
+
}[];
|
|
65
|
+
declare const FESTIVAL_FX: EffectDefinition[];
|
|
66
|
+
/** Register firework-burst, lantern-rise, xmas-snow and spooky-float (8.1). */
|
|
67
|
+
declare function registerFestivalPack(): void;
|
|
68
|
+
|
|
69
|
+
export { FESTIVAL_FX, registerFestivalPack, sparkVectors };
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { registerEffects } from '../chunks/registry-CnO7ZVPK.js';
|
|
2
|
+
import '../chunks/base-CLuqlLfG.js';
|
|
3
|
+
|
|
4
|
+
/** Evenly spread spark directions with a little jitter (8.1). */
|
|
5
|
+
function sparkVectors(n, radius, seed = 1) {
|
|
6
|
+
let s = seed;
|
|
7
|
+
const rnd = () => ((s = (s * 9301 + 49297) % 233280) / 233280);
|
|
8
|
+
return Array.from({ length: n }, (_, i) => {
|
|
9
|
+
const a = (i / n) * Math.PI * 2 + (rnd() - 0.5) * 0.3;
|
|
10
|
+
const r = radius * (0.7 + rnd() * 0.3);
|
|
11
|
+
return { x: Math.round(Math.cos(a) * r), y: Math.round(Math.sin(a) * r) };
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
const layer = (el, ctx) => {
|
|
15
|
+
if (getComputedStyle(el).position === 'static') {
|
|
16
|
+
const prev = el.style.position;
|
|
17
|
+
el.style.position = 'relative';
|
|
18
|
+
ctx.onCleanup(() => (el.style.position = prev));
|
|
19
|
+
}
|
|
20
|
+
const l = document.createElement('span');
|
|
21
|
+
l.setAttribute('aria-hidden', 'true');
|
|
22
|
+
Object.assign(l.style, { position: 'absolute', inset: '0', pointerEvents: 'none', overflow: 'visible' });
|
|
23
|
+
el.appendChild(l);
|
|
24
|
+
ctx.onCleanup(() => l.remove());
|
|
25
|
+
return l;
|
|
26
|
+
};
|
|
27
|
+
const dot = (parent, css, text = '') => {
|
|
28
|
+
const d = document.createElement('span');
|
|
29
|
+
d.textContent = text;
|
|
30
|
+
Object.assign(d.style, { position: 'absolute', left: '50%', top: '50%', ...css });
|
|
31
|
+
parent.appendChild(d);
|
|
32
|
+
return d;
|
|
33
|
+
};
|
|
34
|
+
const FESTIVAL_FX = [
|
|
35
|
+
{
|
|
36
|
+
name: 'firework-burst',
|
|
37
|
+
kind: 'attention',
|
|
38
|
+
description: 'Rockets of sparks burst out of the element in festive colours (`bursts`, `colors`).',
|
|
39
|
+
defaults: { bursts: 3, colors: '#f43f5e,#f59e0b,#22d3ee,#a855f7,#facc15', duration: 900 },
|
|
40
|
+
run: (el, o, ctx) => {
|
|
41
|
+
if (ctx.reduced)
|
|
42
|
+
return;
|
|
43
|
+
const l = layer(el, ctx);
|
|
44
|
+
const colors = String(o.colors).split(',');
|
|
45
|
+
const r = el.getBoundingClientRect();
|
|
46
|
+
const runs = [];
|
|
47
|
+
const n = Math.max(1, Math.min(6, Number(o.bursts) || 3));
|
|
48
|
+
for (let b = 0; b < n; b++) {
|
|
49
|
+
const cx = (b - (n - 1) / 2) * Math.min(60, (r.width || 120) / n);
|
|
50
|
+
const cy = -((r.height || 60) * 0.25) - (b % 2) * 18;
|
|
51
|
+
const col = colors[b % colors.length];
|
|
52
|
+
sparkVectors(14, 46 + b * 6, b + 3).forEach((v) => {
|
|
53
|
+
const s = dot(l, { width: '5px', height: '5px', marginLeft: '-2.5px', marginTop: '-2.5px', borderRadius: '50%', background: col, boxShadow: `0 0 6px ${col}` });
|
|
54
|
+
const a = ctx.animate(s, [{ transform: `translate(${cx}px,${cy + 40}px) scale(.4)`, opacity: 0 }, { transform: `translate(${cx}px,${cy}px) scale(1)`, opacity: 1, offset: 0.25 }, { transform: `translate(${cx + v.x}px,${cy + v.y + 18}px) scale(.3)`, opacity: 0 }], { duration: o.duration, delay: b * 220, easing: 'cubic-bezier(.2,.7,.3,1)', fill: 'backwards' });
|
|
55
|
+
runs.push(a ? a.finished.then(() => s.remove(), () => s.remove()) : Promise.resolve(s.remove()));
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
return Promise.all(runs).then(() => l.remove());
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
name: 'lantern-rise',
|
|
63
|
+
kind: 'enter',
|
|
64
|
+
description: 'The element floats up and sways in like a Lunar New Year lantern (`sway` degrees).',
|
|
65
|
+
defaults: { sway: 8, duration: 1400 },
|
|
66
|
+
run: (el, o, ctx) => {
|
|
67
|
+
if (ctx.reduced)
|
|
68
|
+
return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
|
|
69
|
+
const w = Number(o.sway) || 8;
|
|
70
|
+
return ctx
|
|
71
|
+
.animate(el, [{ transform: `translateY(60px) rotate(${-w}deg)`, opacity: 0, transformOrigin: '50% 0' }, { transform: `translateY(-6px) rotate(${w * 0.6}deg)`, opacity: 1, offset: 0.55, transformOrigin: '50% 0' }, { transform: `translateY(0) rotate(${-w * 0.3}deg)`, offset: 0.8, transformOrigin: '50% 0' }, { transform: 'none', opacity: 1, transformOrigin: '50% 0' }], { duration: o.duration, easing: 'ease-out', fill: 'backwards' })
|
|
72
|
+
?.finished.catch(() => undefined);
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
name: 'xmas-snow',
|
|
77
|
+
kind: 'loop',
|
|
78
|
+
description: 'Snowflakes drift down over the element until the cleanup runs (`flakes`).',
|
|
79
|
+
defaults: { flakes: 18, duration: 4000 },
|
|
80
|
+
run: (el, o, ctx) => {
|
|
81
|
+
const l = layer(el, ctx);
|
|
82
|
+
l.style.overflow = 'hidden';
|
|
83
|
+
const n = Math.max(4, Math.min(60, Number(o.flakes) || 18));
|
|
84
|
+
const anims = Array.from({ length: n }, (_, i) => {
|
|
85
|
+
const x = (i * 37) % 100;
|
|
86
|
+
const size = 8 + ((i * 7) % 9);
|
|
87
|
+
const f = dot(l, { left: `${x}%`, top: '-14px', fontSize: `${size}px`, color: '#fff', textShadow: '0 0 3px rgba(148,163,184,.9)', lineHeight: '1' }, '❄');
|
|
88
|
+
const drift = ((i % 5) - 2) * 12;
|
|
89
|
+
return ctx.animate(f, [{ transform: 'translate(0,0) rotate(0)' }, { transform: `translate(${drift}px, calc(${el.clientHeight || 160}px + 20px)) rotate(180deg)` }], { duration: o.duration * (0.7 + ((i * 13) % 6) / 10), delay: -((i * 331) % o.duration), iterations: Infinity, easing: 'linear' });
|
|
90
|
+
});
|
|
91
|
+
return () => {
|
|
92
|
+
anims.forEach((a) => a?.cancel());
|
|
93
|
+
l.remove();
|
|
94
|
+
};
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
name: 'spooky-float',
|
|
99
|
+
kind: 'attention',
|
|
100
|
+
description: 'The element wobbles, rises and flickers like a Halloween ghost (`cycles`).',
|
|
101
|
+
defaults: { cycles: 2, duration: 1200 },
|
|
102
|
+
run: (el, o, ctx) => {
|
|
103
|
+
if (ctx.reduced)
|
|
104
|
+
return;
|
|
105
|
+
return ctx
|
|
106
|
+
.animate(el, [{ transform: 'none', opacity: 1 }, { transform: 'translate(-4px,-10px) rotate(-4deg) skewX(3deg)', opacity: 0.55, offset: 0.3 }, { transform: 'translate(4px,-14px) rotate(4deg) skewX(-3deg)', opacity: 0.85, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, iterations: Math.max(1, Math.min(6, Number(o.cycles) || 2)), easing: 'ease-in-out' })
|
|
107
|
+
?.finished.catch(() => undefined);
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
];
|
|
111
|
+
/** Register firework-burst, lantern-rise, xmas-snow and spooky-float (8.1). */
|
|
112
|
+
function registerFestivalPack() {
|
|
113
|
+
registerEffects(FESTIVAL_FX);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
export { FESTIVAL_FX, registerFestivalPack, sparkVectors };
|
|
117
|
+
//# sourceMappingURL=fx-festival.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-festival.js","sources":["../../src/components/fx2/festival.ts"],"sourcesContent":["/**\n * 8.1 — Festival packs (`motionary/fx/festival`, also `motionary/components/fx-festival`):\n *\n * - `firework-burst` (attention) — rockets of sparks burst out of the element\n * in festive colours (`bursts`, `colors`).\n * - `lantern-rise` (enter) — the element floats up and sways in like a\n * Lunar New Year lantern (`sway`).\n * - `xmas-snow` (loop) — snowflakes drift down over the element; the cleanup\n * stops them (`flakes`).\n * - `spooky-float` (attention) — the element wobbles and fades like a\n * Halloween ghost (`cycles`).\n *\n * Reduced motion: firework-burst / spooky-float do nothing, xmas-snow is\n * skipped, lantern-rise fades in. Particles are `aria-hidden` and removed.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Evenly spread spark directions with a little jitter (8.1). */\nexport function sparkVectors(n: number, radius: number, seed = 1): { x: number; y: number }[] {\n let s = seed;\n const rnd = () => ((s = (s * 9301 + 49297) % 233280) / 233280);\n return Array.from({ length: n }, (_, i) => {\n const a = (i / n) * Math.PI * 2 + (rnd() - 0.5) * 0.3;\n const r = radius * (0.7 + rnd() * 0.3);\n return { x: Math.round(Math.cos(a) * r), y: Math.round(Math.sin(a) * r) };\n });\n}\n\nconst layer = (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 l = document.createElement('span');\n l.setAttribute('aria-hidden', 'true');\n Object.assign(l.style, { position: 'absolute', inset: '0', pointerEvents: 'none', overflow: 'visible' });\n el.appendChild(l);\n ctx.onCleanup(() => l.remove());\n return l;\n};\nconst dot = (parent: HTMLElement, css: Partial<CSSStyleDeclaration>, text = '') => {\n const d = document.createElement('span');\n d.textContent = text;\n Object.assign(d.style, { position: 'absolute', left: '50%', top: '50%', ...css });\n parent.appendChild(d);\n return d;\n};\n\nexport const FESTIVAL_FX: EffectDefinition[] = [\n {\n name: 'firework-burst',\n kind: 'attention',\n description: 'Rockets of sparks burst out of the element in festive colours (`bursts`, `colors`).',\n defaults: { bursts: 3, colors: '#f43f5e,#f59e0b,#22d3ee,#a855f7,#facc15', duration: 900 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n const l = layer(el, ctx);\n const colors = String(o.colors).split(',');\n const r = el.getBoundingClientRect();\n const runs: Promise<unknown>[] = [];\n const n = Math.max(1, Math.min(6, Number(o.bursts) || 3));\n for (let b = 0; b < n; b++) {\n const cx = (b - (n - 1) / 2) * Math.min(60, (r.width || 120) / n);\n const cy = -((r.height || 60) * 0.25) - (b % 2) * 18;\n const col = colors[b % colors.length];\n sparkVectors(14, 46 + b * 6, b + 3).forEach((v) => {\n const s = dot(l, { width: '5px', height: '5px', marginLeft: '-2.5px', marginTop: '-2.5px', borderRadius: '50%', background: col, boxShadow: `0 0 6px ${col}` });\n const a = ctx.animate(s, [{ transform: `translate(${cx}px,${cy + 40}px) scale(.4)`, opacity: 0 }, { transform: `translate(${cx}px,${cy}px) scale(1)`, opacity: 1, offset: 0.25 }, { transform: `translate(${cx + v.x}px,${cy + v.y + 18}px) scale(.3)`, opacity: 0 }], { duration: o.duration, delay: b * 220, easing: 'cubic-bezier(.2,.7,.3,1)', fill: 'backwards' });\n runs.push(a ? a.finished.then(() => s.remove(), () => s.remove()) : Promise.resolve(s.remove()));\n });\n }\n return Promise.all(runs).then(() => l.remove());\n },\n },\n {\n name: 'lantern-rise',\n kind: 'enter',\n description: 'The element floats up and sways in like a Lunar New Year lantern (`sway` degrees).',\n defaults: { sway: 8, duration: 1400 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);\n const w = Number(o.sway) || 8;\n return ctx\n .animate(el, [{ transform: `translateY(60px) rotate(${-w}deg)`, opacity: 0, transformOrigin: '50% 0' }, { transform: `translateY(-6px) rotate(${w * 0.6}deg)`, opacity: 1, offset: 0.55, transformOrigin: '50% 0' }, { transform: `translateY(0) rotate(${-w * 0.3}deg)`, offset: 0.8, transformOrigin: '50% 0' }, { transform: 'none', opacity: 1, transformOrigin: '50% 0' }], { duration: o.duration, easing: 'ease-out', fill: 'backwards' })\n ?.finished.catch(() => undefined);\n },\n },\n {\n name: 'xmas-snow',\n kind: 'loop',\n description: 'Snowflakes drift down over the element until the cleanup runs (`flakes`).',\n defaults: { flakes: 18, duration: 4000 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n const l = layer(el, ctx);\n l.style.overflow = 'hidden';\n const n = Math.max(4, Math.min(60, Number(o.flakes) || 18));\n const anims = Array.from({ length: n }, (_, i) => {\n const x = (i * 37) % 100;\n const size = 8 + ((i * 7) % 9);\n const f = dot(l, { left: `${x}%`, top: '-14px', fontSize: `${size}px`, color: '#fff', textShadow: '0 0 3px rgba(148,163,184,.9)', lineHeight: '1' }, '❄');\n const drift = ((i % 5) - 2) * 12;\n return ctx.animate(f, [{ transform: 'translate(0,0) rotate(0)' }, { transform: `translate(${drift}px, calc(${el.clientHeight || 160}px + 20px)) rotate(180deg)` }], { duration: o.duration * (0.7 + ((i * 13) % 6) / 10), delay: -((i * 331) % o.duration), iterations: Infinity, easing: 'linear' });\n });\n return () => {\n anims.forEach((a) => a?.cancel());\n l.remove();\n };\n },\n },\n {\n name: 'spooky-float',\n kind: 'attention',\n description: 'The element wobbles, rises and flickers like a Halloween ghost (`cycles`).',\n defaults: { cycles: 2, duration: 1200 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n return ctx\n .animate(el, [{ transform: 'none', opacity: 1 }, { transform: 'translate(-4px,-10px) rotate(-4deg) skewX(3deg)', opacity: 0.55, offset: 0.3 }, { transform: 'translate(4px,-14px) rotate(4deg) skewX(-3deg)', opacity: 0.85, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, iterations: Math.max(1, Math.min(6, Number(o.cycles) || 2)), easing: 'ease-in-out' })\n ?.finished.catch(() => undefined);\n },\n },\n];\n\n/** Register firework-burst, lantern-rise, xmas-snow and spooky-float (8.1). */\nexport function registerFestivalPack(): void {\n registerEffects(FESTIVAL_FX);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var registry = require('../chunks/registry-BVklOepd.cjs');
|
|
4
|
+
require('../chunks/base-DoRUZBy-.cjs');
|
|
5
|
+
|
|
6
|
+
/** Keyframes stepping a CSS blur/contrast "pixel" filter from coarse to sharp (8.2). */
|
|
7
|
+
function pixelSteps(steps = 6) {
|
|
8
|
+
const n = Math.max(2, Math.min(12, Math.round(steps)));
|
|
9
|
+
return Array.from({ length: n + 1 }, (_, i) => {
|
|
10
|
+
const k = 1 - i / n;
|
|
11
|
+
return { filter: k ? `blur(${(k * 6).toFixed(1)}px) contrast(${(1 + k * 4).toFixed(1)}) saturate(${(1 + k).toFixed(1)})` : 'none', opacity: Math.min(1, 0.3 + i / n), offset: i / n };
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
|
|
15
|
+
const RETRO_FX = [
|
|
16
|
+
{
|
|
17
|
+
name: 'pixelate-in',
|
|
18
|
+
kind: 'enter',
|
|
19
|
+
description: 'The element resolves from blocky pixels to sharp, like an 8-bit sprite loading (`steps`).',
|
|
20
|
+
defaults: { steps: 6, duration: 700 },
|
|
21
|
+
run: (el, o, ctx) => {
|
|
22
|
+
if (ctx.reduced)
|
|
23
|
+
return fade(el, ctx);
|
|
24
|
+
const n = Math.max(2, Math.min(12, Number(o.steps) || 6));
|
|
25
|
+
return ctx.animate(el, pixelSteps(n), { duration: o.duration, easing: `steps(${n}, end)`, fill: 'backwards' })?.finished.catch(() => undefined);
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
name: 'crt-power',
|
|
30
|
+
kind: 'enter',
|
|
31
|
+
description: 'A CRT switching on: a bright line opens into the picture with a flash (`duration`).',
|
|
32
|
+
defaults: { duration: 650 },
|
|
33
|
+
run: (el, o, ctx) => {
|
|
34
|
+
if (ctx.reduced)
|
|
35
|
+
return fade(el, ctx);
|
|
36
|
+
return ctx
|
|
37
|
+
.animate(el, [{ transform: 'scale(.02, .004)', filter: 'brightness(6)', opacity: 0.9 }, { transform: 'scale(1, .006)', filter: 'brightness(5)', opacity: 1, offset: 0.35 }, { transform: 'scale(1, 1.04)', filter: 'brightness(1.6)', offset: 0.75 }, { transform: 'none', filter: 'none', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.7,.3,1)', fill: 'backwards' })
|
|
38
|
+
?.finished.catch(() => undefined);
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
name: 'vhs-glitch',
|
|
43
|
+
kind: 'attention',
|
|
44
|
+
description: 'VHS tracking jitter with an RGB split and a noise band (`intensity` px).',
|
|
45
|
+
defaults: { intensity: 4, duration: 600 },
|
|
46
|
+
run: (el, o, ctx) => {
|
|
47
|
+
if (ctx.reduced)
|
|
48
|
+
return;
|
|
49
|
+
const k = Math.max(1, Math.min(12, Number(o.intensity) || 4));
|
|
50
|
+
const f = [];
|
|
51
|
+
for (let i = 0; i <= 8; i++) {
|
|
52
|
+
const d = i === 0 || i === 8 ? 0 : (i % 2 ? 1 : -1) * k * (1 - i / 10);
|
|
53
|
+
f.push({ transform: d ? `translateX(${d}px) skewX(${(d / 2).toFixed(1)}deg)` : 'none', textShadow: d ? `${-d}px 0 rgba(255,0,80,.75), ${d}px 0 rgba(0,220,255,.75)` : 'none', filter: d ? `hue-rotate(${d * 6}deg)` : 'none', offset: i / 8 });
|
|
54
|
+
}
|
|
55
|
+
return ctx.animate(el, f, { duration: o.duration, easing: 'steps(8, end)' })?.finished.catch(() => undefined);
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
name: 'y2k-shine',
|
|
60
|
+
kind: 'attention',
|
|
61
|
+
description: 'A chrome Y2K highlight sweeps across the element with a little bounce (`color`).',
|
|
62
|
+
defaults: { color: 'rgba(255,255,255,.85)', duration: 900 },
|
|
63
|
+
run: (el, o, ctx) => {
|
|
64
|
+
if (ctx.reduced)
|
|
65
|
+
return ctx.animate(el, [{ filter: 'none' }, { filter: 'brightness(1.25)' }, { filter: 'none' }], { duration: 300 })?.finished.catch(() => undefined);
|
|
66
|
+
if (getComputedStyle(el).position === 'static') {
|
|
67
|
+
const prev = el.style.position;
|
|
68
|
+
el.style.position = 'relative';
|
|
69
|
+
ctx.onCleanup(() => (el.style.position = prev));
|
|
70
|
+
}
|
|
71
|
+
const prevO = el.style.overflow;
|
|
72
|
+
el.style.overflow = 'hidden';
|
|
73
|
+
const sh = document.createElement('span');
|
|
74
|
+
sh.setAttribute('aria-hidden', 'true');
|
|
75
|
+
Object.assign(sh.style, { position: 'absolute', top: '-20%', bottom: '-20%', left: '0', width: '45%', background: `linear-gradient(105deg, transparent, ${o.color} 45%, rgba(180,220,255,.6) 55%, transparent)`, pointerEvents: 'none', mixBlendMode: 'screen' });
|
|
76
|
+
el.appendChild(sh);
|
|
77
|
+
const end = () => {
|
|
78
|
+
sh.remove();
|
|
79
|
+
el.style.overflow = prevO;
|
|
80
|
+
};
|
|
81
|
+
ctx.onCleanup(end);
|
|
82
|
+
ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(1.04)', offset: 0.3 }, { transform: 'none' }], { duration: o.duration * 0.6, easing: 'ease-out' });
|
|
83
|
+
const a = ctx.animate(sh, [{ transform: 'translateX(-120%) skewX(-12deg)' }, { transform: 'translateX(330%) skewX(-12deg)' }], { duration: o.duration, easing: 'cubic-bezier(.3,.6,.3,1)' });
|
|
84
|
+
return a ? a.finished.then(end, end) : (end(), undefined);
|
|
85
|
+
},
|
|
86
|
+
},
|
|
87
|
+
];
|
|
88
|
+
/** Register pixelate-in, crt-power, vhs-glitch and y2k-shine (8.2). */
|
|
89
|
+
function registerRetroPack() {
|
|
90
|
+
registry.registerEffects(RETRO_FX);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
exports.RETRO_FX = RETRO_FX;
|
|
94
|
+
exports.pixelSteps = pixelSteps;
|
|
95
|
+
exports.registerRetroPack = registerRetroPack;
|
|
96
|
+
//# sourceMappingURL=fx-retro.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fx-retro.cjs","sources":["../../src/components/fx2/retro2.ts"],"sourcesContent":["/**\n * 8.2 — Retro pack (`motionary/fx/retro`, also `motionary/components/fx-retro`):\n *\n * - `pixelate-in` (enter) — the element resolves from big blocky pixels to\n * sharp, like an 8-bit sprite loading (`steps`).\n * - `crt-power` (enter) — a CRT switching on: a bright line opens into the\n * picture with a flash (`duration`).\n * - `vhs-glitch` (attention) — VHS tracking jitter with an RGB split and a\n * noise band (`intensity`).\n * - `y2k-shine` (attention) — a chrome Y2K highlight sweeps across the\n * element with a little bounce (`color`).\n *\n * Reduced motion: pixelate-in / crt-power fade in, vhs-glitch does nothing,\n * y2k-shine is a short brightness flash.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Keyframes stepping a CSS blur/contrast \"pixel\" filter from coarse to sharp (8.2). */\nexport function pixelSteps(steps = 6): Keyframe[] {\n const n = Math.max(2, Math.min(12, Math.round(steps)));\n return Array.from({ length: n + 1 }, (_, i) => {\n const k = 1 - i / n;\n return { filter: k ? `blur(${(k * 6).toFixed(1)}px) contrast(${(1 + k * 4).toFixed(1)}) saturate(${(1 + k).toFixed(1)})` : 'none', opacity: Math.min(1, 0.3 + i / n), offset: i / n };\n });\n}\n\nconst fade = (el: HTMLElement, ctx: EffectContext) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);\n\nexport const RETRO_FX: EffectDefinition[] = [\n {\n name: 'pixelate-in',\n kind: 'enter',\n description: 'The element resolves from blocky pixels to sharp, like an 8-bit sprite loading (`steps`).',\n defaults: { steps: 6, duration: 700 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return fade(el, ctx);\n const n = Math.max(2, Math.min(12, Number(o.steps) || 6));\n return ctx.animate(el, pixelSteps(n), { duration: o.duration, easing: `steps(${n}, end)`, fill: 'backwards' })?.finished.catch(() => undefined);\n },\n },\n {\n name: 'crt-power',\n kind: 'enter',\n description: 'A CRT switching on: a bright line opens into the picture with a flash (`duration`).',\n defaults: { duration: 650 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return fade(el, ctx);\n return ctx\n .animate(el, [{ transform: 'scale(.02, .004)', filter: 'brightness(6)', opacity: 0.9 }, { transform: 'scale(1, .006)', filter: 'brightness(5)', opacity: 1, offset: 0.35 }, { transform: 'scale(1, 1.04)', filter: 'brightness(1.6)', offset: 0.75 }, { transform: 'none', filter: 'none', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.7,.3,1)', fill: 'backwards' })\n ?.finished.catch(() => undefined);\n },\n },\n {\n name: 'vhs-glitch',\n kind: 'attention',\n description: 'VHS tracking jitter with an RGB split and a noise band (`intensity` px).',\n defaults: { intensity: 4, duration: 600 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return;\n const k = Math.max(1, Math.min(12, Number(o.intensity) || 4));\n const f: Keyframe[] = [];\n for (let i = 0; i <= 8; i++) {\n const d = i === 0 || i === 8 ? 0 : (i % 2 ? 1 : -1) * k * (1 - i / 10);\n f.push({ transform: d ? `translateX(${d}px) skewX(${(d / 2).toFixed(1)}deg)` : 'none', textShadow: d ? `${-d}px 0 rgba(255,0,80,.75), ${d}px 0 rgba(0,220,255,.75)` : 'none', filter: d ? `hue-rotate(${d * 6}deg)` : 'none', offset: i / 8 });\n }\n return ctx.animate(el, f, { duration: o.duration, easing: 'steps(8, end)' })?.finished.catch(() => undefined);\n },\n },\n {\n name: 'y2k-shine',\n kind: 'attention',\n description: 'A chrome Y2K highlight sweeps across the element with a little bounce (`color`).',\n defaults: { color: 'rgba(255,255,255,.85)', duration: 900 },\n run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n if (ctx.reduced) return ctx.animate(el, [{ filter: 'none' }, { filter: 'brightness(1.25)' }, { filter: 'none' }], { duration: 300 })?.finished.catch(() => undefined);\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 prevO = el.style.overflow;\n el.style.overflow = 'hidden';\n const sh = document.createElement('span');\n sh.setAttribute('aria-hidden', 'true');\n Object.assign(sh.style, { position: 'absolute', top: '-20%', bottom: '-20%', left: '0', width: '45%', background: `linear-gradient(105deg, transparent, ${o.color} 45%, rgba(180,220,255,.6) 55%, transparent)`, pointerEvents: 'none', mixBlendMode: 'screen' });\n el.appendChild(sh);\n const end = () => {\n sh.remove();\n el.style.overflow = prevO;\n };\n ctx.onCleanup(end);\n ctx.animate(el, [{ transform: 'none' }, { transform: 'scale(1.04)', offset: 0.3 }, { transform: 'none' }], { duration: o.duration * 0.6, easing: 'ease-out' });\n const a = ctx.animate(sh, [{ transform: 'translateX(-120%) skewX(-12deg)' }, { transform: 'translateX(330%) skewX(-12deg)' }], { duration: o.duration, easing: 'cubic-bezier(.3,.6,.3,1)' });\n return a ? a.finished.then(end, end) : (end(), undefined);\n },\n },\n];\n\n/** Register pixelate-in, crt-power, vhs-glitch and y2k-shine (8.2). */\nexport function registerRetroPack(): void {\n registerEffects(RETRO_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}
|