use-scroll-animate 7.1.0 → 7.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 +32 -0
- package/dist/chunks/builtins-HlqAkK0f.js +99 -0
- package/dist/chunks/builtins-HlqAkK0f.js.map +1 -0
- package/dist/chunks/builtins-xalxV2d5.cjs +101 -0
- package/dist/chunks/builtins-xalxV2d5.cjs.map +1 -0
- package/dist/components/angular.cjs +1 -0
- package/dist/components/angular.cjs.map +1 -1
- package/dist/components/angular.js +1 -0
- package/dist/components/angular.js.map +1 -1
- package/dist/components/effects.cjs +1 -0
- package/dist/components/effects.cjs.map +1 -1
- package/dist/components/effects.js +1 -0
- package/dist/components/effects.js.map +1 -1
- package/dist/components/fx-chart.cjs +158 -0
- package/dist/components/fx-chart.cjs.map +1 -0
- package/dist/components/fx-chart.d.cts +73 -0
- package/dist/components/fx-chart.d.ts +73 -0
- package/dist/components/fx-chart.js +154 -0
- package/dist/components/fx-chart.js.map +1 -0
- package/dist/components/fx-shop.cjs +133 -0
- package/dist/components/fx-shop.cjs.map +1 -0
- package/dist/components/fx-shop.d.cts +70 -0
- package/dist/components/fx-shop.d.ts +70 -0
- package/dist/components/fx-shop.js +129 -0
- package/dist/components/fx-shop.js.map +1 -0
- package/dist/components/fx.cjs +5 -98
- package/dist/components/fx.cjs.map +1 -1
- package/dist/components/fx.js +3 -96
- package/dist/components/fx.js.map +1 -1
- package/dist/components/fx2.cjs +12 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +56 -1
- package/dist/components/fx2.d.ts +56 -1
- package/dist/components/fx2.js +9 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/solid.cjs +1 -0
- package/dist/components/solid.cjs.map +1 -1
- package/dist/components/solid.js +1 -0
- package/dist/components/solid.js.map +1 -1
- package/dist/components/svelte.cjs +1 -0
- package/dist/components/svelte.cjs.map +1 -1
- package/dist/components/svelte.js +1 -0
- package/dist/components/svelte.js.map +1 -1
- package/dist/components/vue.cjs +1 -0
- package/dist/components/vue.cjs.map +1 -1
- package/dist/components/vue.js +1 -0
- package/dist/components/vue.js.map +1 -1
- package/dist/components/widgets.cjs +916 -70
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +158 -2
- package/dist/components/widgets.d.ts +158 -2
- package/dist/components/widgets.js +904 -71
- package/dist/components/widgets.js.map +1 -1
- package/dist/components.cjs +2 -1
- package/dist/components.cjs.map +1 -1
- package/dist/components.js +2 -1
- package/dist/components.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 +50 -0
- package/package.json +41 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,38 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [7.3.0] - 2026-10-08
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
- **4 new components (7.3)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
|
|
14
|
+
- `<usa-add-to-cart>` — buy button: the product photo (`from`, or the closest `[data-product] img`) flies on an arc into the cart (`cart` selector; a `<usa-cart-drawer>` gets `add(item)` with the `item` JSON), the button morphs to ✓ `added` for `hold` ms; `usa:add`; live-region announcement.
|
|
15
|
+
- `<usa-cart-drawer>` — cart button + count badge + side drawer: lines slide in or bump their quantity, removed lines collapse, the badge bumps, the total rolls; `add()` / `removeItem()` / `items` / `total` / `count` / `open` / `toggle()`; Esc / backdrop close, focus moves in and back; `currency`, `label`; `usa:change` / `usa:open` / `usa:close`. `cartTotal()`.
|
|
16
|
+
- `<usa-product-gallery>` — `<img>` children become a stage + thumbnail tabs: the stage cross-slides in the direction of travel, the selection ring glides, hover zoom under the pointer (`zoom`, `nozoom`), swipe and ←/→; `index`, `go()` / `next()` / `prev()`, `usa:change`. `wrapIndex()`.
|
|
17
|
+
- `<usa-countdown>` — split-flap countdown to `to` or for `seconds` (`units`, `labels`): changed digits flip; `usa:tick` / `usa:done`, `data-done`; `role="timer"` with a label updated once a minute. `splitTime()`.
|
|
18
|
+
- **E-commerce motion — `motionary/fx/shop`** (= `motionary/components/fx-shop`, `registerShopPack()`, also in `registerEffectPacks()`): `fly-to-cart` (click), `price-flip` (enter), `stock-pulse` (loop), `sale-shine` (hover), `badge-pop` (attention). `arcPath()`.
|
|
19
|
+
- Showcase: 6 new gallery cards with copyable code and live demos; Animation Store 299 → 305 items.
|
|
20
|
+
|
|
21
|
+
### Fixed
|
|
22
|
+
- `<usa-cart-drawer>` (pre-release staging): the panel's `display:flex` overrode `[hidden]`, so the drawer showed while closed — `[hidden]` now wins.
|
|
23
|
+
- `<usa-countdown>`: restarting (changing `to` / `seconds`) after it finished kept `data-done` — now cleared.
|
|
24
|
+
|
|
25
|
+
### Accessibility
|
|
26
|
+
- Add-to-cart = real `<button>` + polite live region; cart drawer = `dialog` with `aria-modal`, labelled toggle with the item count, Esc; product gallery = labelled stage group + thumbnail `tab`s with roving tabindex; countdown = `timer` labelled once a minute. Reduced motion: no flight, morph, slide, glide, zoom, flip, bump or roll — state changes at once; `stock-pulse` / `sale-shine` do nothing, `fly-to-cart` only fades the cart.
|
|
27
|
+
|
|
28
|
+
## [7.2.0] - 2026-10-08
|
|
29
|
+
|
|
30
|
+
### Added
|
|
31
|
+
- **4 new components (7.2)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
|
|
32
|
+
- `<usa-bar-chart>` — animated bar chart from `values` + `labels`, `<data>` children or the `data` property: bars grow in a stagger on first view, value labels show with `unit`; new data glides every bar (appearing bars grow, leaving bars shrink away); `horizontal`, `max`. A labelled `figure` with a list of “label: value” items.
|
|
33
|
+
- `<usa-gauge>` — semicircular gauge: the needle swings to `value` on a damped spring, the arc fills in the colour of its `zones` (`"60:#22c55e,85:#f59e0b,100:#ef4444"`), the number counts; `min` / `max` / `unit` / `label`; `role="meter"` with `aria-valuetext`.
|
|
34
|
+
- `<usa-sparkline>` — inline trend line (`values` or `data`): draws on first view, area fades in, the last point pulses, new data morphs point by point; `variant="line | area | bars"`, `color`; hover tooltip; text summary as `aria-label`. `SPARK_VARIANTS`, `sparkPoints()`.
|
|
35
|
+
- `<usa-kpi>` — KPI card: the value counts up keeping prefix / suffix / decimals, the `delta` chip slides in with a ▲ / ▼ coloured by sign (`invert` when down is good), optional `trend` sparkline, `caption`; setting `value` rolls from the old number and flashes the card.
|
|
36
|
+
- **Data-viz motion — `motionary/fx/chart`** (= `motionary/components/fx-chart`, `registerChartPack()`, also in `registerEffectPacks()`): entrances for charts you already have (any SVG / HTML chart library) — `bars-grow`, `line-draw`, `ring-sweep`, `dots-pop`, `number-roll` (enter) and `sankey-flow` (loop). `parseFigure()`.
|
|
37
|
+
- Showcase: 7 new gallery cards with copyable code and live “new data” buttons; Animation Store 292 → 299 items.
|
|
38
|
+
|
|
39
|
+
### Accessibility
|
|
40
|
+
- Bar chart = `figure` + list items labelled “label: value”; gauge = `meter` with `aria-valuenow` / `aria-valuetext`; sparkline = `img` with a trend summary; KPI = labelled `group`. Reduced motion: no growth, glide, swing, count, draw, morph, pulse or flash — final values are shown at once; chart effects end in their final state with a short fade and `sankey-flow` is static.
|
|
41
|
+
|
|
10
42
|
## [7.1.0] - 2026-10-08
|
|
11
43
|
|
|
12
44
|
### Added
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { T as TIMELINE_PRESETS } from './core-D5rU0CV6.js';
|
|
2
|
+
import { b as burst, c as confetti, s as shake } from './fx-CMxWNwH8.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 5.0 built-in effects, all registered through `registerEffect()`:
|
|
6
|
+
* every timeline preset as an `enter` effect, attention seekers, and the
|
|
7
|
+
* click effects (burst, confetti, shake, ripple).
|
|
8
|
+
*/
|
|
9
|
+
const enter = Object.entries(TIMELINE_PRESETS).map(([name, frames]) => ({
|
|
10
|
+
name,
|
|
11
|
+
kind: 'enter',
|
|
12
|
+
description: `Entrance: ${name} (same keyframes as the timeline preset).`,
|
|
13
|
+
defaults: { duration: 600, delay: 0, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' },
|
|
14
|
+
run: (el, o, ctx) => ctx.animate(el, ctx.reduced ? [{ opacity: 0 }, { opacity: 1 }] : frames, { duration: o.duration, delay: o.delay, easing: o.easing, fill: 'backwards' }),
|
|
15
|
+
}));
|
|
16
|
+
const A = (name, description, frames, duration = 700, easing = 'ease-in-out') => ({
|
|
17
|
+
name,
|
|
18
|
+
kind: 'attention',
|
|
19
|
+
description,
|
|
20
|
+
defaults: { duration, iterations: 1 },
|
|
21
|
+
run: (el, o, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.6 }, { opacity: 1 }], { duration: 400 }) : ctx.animate(el, frames, { duration: o.duration, easing, iterations: o.iterations })),
|
|
22
|
+
});
|
|
23
|
+
const attention = [
|
|
24
|
+
A('pulse', 'Gentle scale pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.08)' }, { transform: 'scale(1)' }], 600),
|
|
25
|
+
A('pop', 'Quick overshoot pop.', [{ transform: 'scale(1)' }, { transform: 'scale(1.18)', offset: 0.4 }, { transform: 'scale(0.96)', offset: 0.7 }, { transform: 'scale(1)' }], 450, 'cubic-bezier(0.34, 1.56, 0.64, 1)'),
|
|
26
|
+
A('jelly', 'Rubbery squash-and-stretch.', [{ transform: 'scale(1,1)' }, { transform: 'scale(1.25,0.75)', offset: 0.3 }, { transform: 'scale(0.75,1.25)', offset: 0.4 }, { transform: 'scale(1.15,0.85)', offset: 0.5 }, { transform: 'scale(0.95,1.05)', offset: 0.65 }, { transform: 'scale(1.05,0.95)', offset: 0.75 }, { transform: 'scale(1,1)' }], 900),
|
|
27
|
+
A('wiggle', 'Playful rotate wiggle.', [{ transform: 'rotate(0)' }, { transform: 'rotate(-8deg)', offset: 0.2 }, { transform: 'rotate(7deg)', offset: 0.4 }, { transform: 'rotate(-5deg)', offset: 0.6 }, { transform: 'rotate(3deg)', offset: 0.8 }, { transform: 'rotate(0)' }], 650),
|
|
28
|
+
A('heartbeat', 'Double-beat heart pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.2)', offset: 0.14 }, { transform: 'scale(1)', offset: 0.28 }, { transform: 'scale(1.2)', offset: 0.42 }, { transform: 'scale(1)', offset: 0.7 }], 1100),
|
|
29
|
+
A('bounce', 'Hop up and settle with a squash.', [{ transform: 'translateY(0) scale(1,1)' }, { transform: 'translateY(-22px) scale(0.95,1.05)', offset: 0.35 }, { transform: 'translateY(0) scale(1.08,0.92)', offset: 0.6 }, { transform: 'translateY(-6px) scale(1,1)', offset: 0.8 }, { transform: 'translateY(0) scale(1,1)' }], 800),
|
|
30
|
+
A('flash', 'Two soft flashes (well under 3 per second).', [{ opacity: 1 }, { opacity: 0.25, offset: 0.25 }, { opacity: 1, offset: 0.5 }, { opacity: 0.25, offset: 0.75 }, { opacity: 1 }], 1400),
|
|
31
|
+
A('tada', 'Scale + shake celebration.', [{ transform: 'scale(1) rotate(0)' }, { transform: 'scale(0.9) rotate(-3deg)', offset: 0.1 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.3 }, { transform: 'scale(1.1) rotate(-3deg)', offset: 0.5 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.7 }, { transform: 'scale(1) rotate(0)' }], 1000),
|
|
32
|
+
];
|
|
33
|
+
const click = [
|
|
34
|
+
{
|
|
35
|
+
name: 'burst',
|
|
36
|
+
kind: 'click',
|
|
37
|
+
description: 'Particle burst from the click point (or `x` / `y`, or the element center).',
|
|
38
|
+
defaults: { count: 12 },
|
|
39
|
+
run: (el, o, ctx) => {
|
|
40
|
+
if (ctx.reduced)
|
|
41
|
+
return;
|
|
42
|
+
const r = el.getBoundingClientRect();
|
|
43
|
+
const e = ctx.event;
|
|
44
|
+
burst(o.x ?? e?.clientX ?? r.left + r.width / 2, o.y ?? e?.clientY ?? r.top + r.height / 2, o);
|
|
45
|
+
},
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
name: 'confetti',
|
|
49
|
+
kind: 'click',
|
|
50
|
+
description: 'Confetti cannon from the element.',
|
|
51
|
+
defaults: { count: 80 },
|
|
52
|
+
run: (el, o, ctx) => {
|
|
53
|
+
if (ctx.reduced)
|
|
54
|
+
return;
|
|
55
|
+
const r = el.getBoundingClientRect();
|
|
56
|
+
confetti({ x: r.left + r.width / 2, y: r.top + r.height / 2, ...o });
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
name: 'shake',
|
|
61
|
+
kind: 'attention',
|
|
62
|
+
description: 'Horizontal "no" shake (errors, wrong password).',
|
|
63
|
+
defaults: { intensity: 8, duration: 480 },
|
|
64
|
+
run: (el, o, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.5 }, { opacity: 1 }], { duration: 300 }) : shake(el, o.intensity, o.duration)),
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
name: 'ripple',
|
|
68
|
+
kind: 'click',
|
|
69
|
+
description: 'Material-style ink ripple from the pointer.',
|
|
70
|
+
defaults: { color: 'currentColor', duration: 600 },
|
|
71
|
+
run: (el, o, ctx) => {
|
|
72
|
+
var _a;
|
|
73
|
+
if (ctx.reduced)
|
|
74
|
+
return;
|
|
75
|
+
const r = el.getBoundingClientRect();
|
|
76
|
+
const e = ctx.event;
|
|
77
|
+
const d = Math.hypot(r.width, r.height) * 2;
|
|
78
|
+
const dot = document.createElement('span');
|
|
79
|
+
dot.setAttribute('aria-hidden', 'true');
|
|
80
|
+
Object.assign(dot.style, { position: 'absolute', left: `${(e?.clientX ?? r.left + r.width / 2) - r.left - d / 2}px`, top: `${(e?.clientY ?? r.top + r.height / 2) - r.top - d / 2}px`, width: `${d}px`, height: `${d}px`, borderRadius: '50%', background: o.color, opacity: '0.25', pointerEvents: 'none' });
|
|
81
|
+
if (getComputedStyle(el).position === 'static')
|
|
82
|
+
el.style.position = 'relative';
|
|
83
|
+
(_a = el.style).overflow || (_a.overflow = 'hidden');
|
|
84
|
+
el.appendChild(dot);
|
|
85
|
+
const a = ctx.animate(dot, [{ transform: 'scale(0)', opacity: 0.3 }, { transform: 'scale(1)', opacity: 0 }], { duration: o.duration, easing: 'ease-out' });
|
|
86
|
+
const done = () => dot.remove();
|
|
87
|
+
if (a)
|
|
88
|
+
a.finished.then(done, done);
|
|
89
|
+
else
|
|
90
|
+
done();
|
|
91
|
+
return a;
|
|
92
|
+
},
|
|
93
|
+
},
|
|
94
|
+
];
|
|
95
|
+
/** Every built-in 5.0 effect definition. */
|
|
96
|
+
const BUILTIN_EFFECTS = [...enter, ...attention, ...click];
|
|
97
|
+
|
|
98
|
+
export { BUILTIN_EFFECTS as B };
|
|
99
|
+
//# sourceMappingURL=builtins-HlqAkK0f.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"builtins-HlqAkK0f.js","sources":["../../src/components/fx/builtins.ts"],"sourcesContent":["/**\n * 5.0 built-in effects, all registered through `registerEffect()`:\n * every timeline preset as an `enter` effect, attention seekers, and the\n * click effects (burst, confetti, shake, ripple).\n */\nimport { TIMELINE_PRESETS } from '../timeline/core';\nimport { burst, confetti, shake } from '../click/fx';\nimport type { EffectDefinition } from './registry';\n\nconst enter: EffectDefinition[] = Object.entries(TIMELINE_PRESETS).map(([name, frames]) => ({\n name,\n kind: 'enter' as const,\n description: `Entrance: ${name} (same keyframes as the timeline preset).`,\n defaults: { duration: 600, delay: 0, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' },\n run: (el: HTMLElement, o: any, ctx) => ctx.animate(el, ctx.reduced ? [{ opacity: 0 }, { opacity: 1 }] : frames, { duration: o.duration, delay: o.delay, easing: o.easing, fill: 'backwards' }),\n}));\n\nconst A = (name: string, description: string, frames: Keyframe[], duration = 700, easing = 'ease-in-out'): EffectDefinition => ({\n name,\n kind: 'attention',\n description,\n defaults: { duration, iterations: 1 },\n run: (el, o: any, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.6 }, { opacity: 1 }], { duration: 400 }) : ctx.animate(el, frames, { duration: o.duration, easing, iterations: o.iterations })),\n});\n\nconst attention: EffectDefinition[] = [\n A('pulse', 'Gentle scale pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.08)' }, { transform: 'scale(1)' }], 600),\n A('pop', 'Quick overshoot pop.', [{ transform: 'scale(1)' }, { transform: 'scale(1.18)', offset: 0.4 }, { transform: 'scale(0.96)', offset: 0.7 }, { transform: 'scale(1)' }], 450, 'cubic-bezier(0.34, 1.56, 0.64, 1)'),\n A('jelly', 'Rubbery squash-and-stretch.', [{ transform: 'scale(1,1)' }, { transform: 'scale(1.25,0.75)', offset: 0.3 }, { transform: 'scale(0.75,1.25)', offset: 0.4 }, { transform: 'scale(1.15,0.85)', offset: 0.5 }, { transform: 'scale(0.95,1.05)', offset: 0.65 }, { transform: 'scale(1.05,0.95)', offset: 0.75 }, { transform: 'scale(1,1)' }], 900),\n A('wiggle', 'Playful rotate wiggle.', [{ transform: 'rotate(0)' }, { transform: 'rotate(-8deg)', offset: 0.2 }, { transform: 'rotate(7deg)', offset: 0.4 }, { transform: 'rotate(-5deg)', offset: 0.6 }, { transform: 'rotate(3deg)', offset: 0.8 }, { transform: 'rotate(0)' }], 650),\n A('heartbeat', 'Double-beat heart pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.2)', offset: 0.14 }, { transform: 'scale(1)', offset: 0.28 }, { transform: 'scale(1.2)', offset: 0.42 }, { transform: 'scale(1)', offset: 0.7 }], 1100),\n A('bounce', 'Hop up and settle with a squash.', [{ transform: 'translateY(0) scale(1,1)' }, { transform: 'translateY(-22px) scale(0.95,1.05)', offset: 0.35 }, { transform: 'translateY(0) scale(1.08,0.92)', offset: 0.6 }, { transform: 'translateY(-6px) scale(1,1)', offset: 0.8 }, { transform: 'translateY(0) scale(1,1)' }], 800),\n A('flash', 'Two soft flashes (well under 3 per second).', [{ opacity: 1 }, { opacity: 0.25, offset: 0.25 }, { opacity: 1, offset: 0.5 }, { opacity: 0.25, offset: 0.75 }, { opacity: 1 }], 1400),\n A('tada', 'Scale + shake celebration.', [{ transform: 'scale(1) rotate(0)' }, { transform: 'scale(0.9) rotate(-3deg)', offset: 0.1 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.3 }, { transform: 'scale(1.1) rotate(-3deg)', offset: 0.5 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.7 }, { transform: 'scale(1) rotate(0)' }], 1000),\n];\n\nconst click: EffectDefinition[] = [\n {\n name: 'burst',\n kind: 'click',\n description: 'Particle burst from the click point (or `x` / `y`, or the element center).',\n defaults: { count: 12 },\n run: (el, o: any, ctx) => {\n if (ctx.reduced) return;\n const r = el.getBoundingClientRect();\n const e = ctx.event as PointerEvent | undefined;\n burst(o.x ?? e?.clientX ?? r.left + r.width / 2, o.y ?? e?.clientY ?? r.top + r.height / 2, o);\n },\n },\n {\n name: 'confetti',\n kind: 'click',\n description: 'Confetti cannon from the element.',\n defaults: { count: 80 },\n run: (el, o: any, ctx) => {\n if (ctx.reduced) return;\n const r = el.getBoundingClientRect();\n confetti({ x: r.left + r.width / 2, y: r.top + r.height / 2, ...o });\n },\n },\n {\n name: 'shake',\n kind: 'attention',\n description: 'Horizontal \"no\" shake (errors, wrong password).',\n defaults: { intensity: 8, duration: 480 },\n run: (el, o: any, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.5 }, { opacity: 1 }], { duration: 300 }) : shake(el, o.intensity, o.duration)),\n },\n {\n name: 'ripple',\n kind: 'click',\n description: 'Material-style ink ripple from the pointer.',\n defaults: { color: 'currentColor', duration: 600 },\n run: (el, o: any, ctx) => {\n if (ctx.reduced) return;\n const r = el.getBoundingClientRect();\n const e = ctx.event as PointerEvent | undefined;\n const d = Math.hypot(r.width, r.height) * 2;\n const dot = document.createElement('span');\n dot.setAttribute('aria-hidden', 'true');\n Object.assign(dot.style, { position: 'absolute', left: `${(e?.clientX ?? r.left + r.width / 2) - r.left - d / 2}px`, top: `${(e?.clientY ?? r.top + r.height / 2) - r.top - d / 2}px`, width: `${d}px`, height: `${d}px`, borderRadius: '50%', background: o.color, opacity: '0.25', pointerEvents: 'none' });\n if (getComputedStyle(el).position === 'static') el.style.position = 'relative';\n el.style.overflow ||= 'hidden';\n el.appendChild(dot);\n const a = ctx.animate(dot, [{ transform: 'scale(0)', opacity: 0.3 }, { transform: 'scale(1)', opacity: 0 }], { duration: o.duration, easing: 'ease-out' });\n const done = () => dot.remove();\n if (a) a.finished.then(done, done);\n else done();\n return a;\n },\n },\n];\n\n/** Every built-in 5.0 effect definition. */\nexport const BUILTIN_EFFECTS: EffectDefinition[] = [...enter, ...attention, ...click];\n"],"names":[],"mappings":";;;AAAA;;;;AAIG;AAKH,MAAM,KAAK,GAAuB,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM;IAC1F,IAAI;AACJ,IAAA,IAAI,EAAE,OAAgB;IACtB,WAAW,EAAE,CAAA,UAAA,EAAa,IAAI,CAAA,yCAAA,CAA2C;AACzE,IAAA,QAAQ,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,gCAAgC,EAAE;AAC/E,IAAA,GAAG,EAAE,CAAC,EAAe,EAAE,CAAM,EAAE,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,GAAG,CAAC,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;AAC/L,CAAA,CAAC,CAAC;AAEH,MAAM,CAAC,GAAG,CAAC,IAAY,EAAE,WAAmB,EAAE,MAAkB,EAAE,QAAQ,GAAG,GAAG,EAAE,MAAM,GAAG,aAAa,MAAwB;IAC9H,IAAI;AACJ,IAAA,IAAI,EAAE,WAAW;IACjB,WAAW;AACX,IAAA,QAAQ,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,EAAE;AACrC,IAAA,GAAG,EAAE,CAAC,EAAE,EAAE,CAAM,EAAE,GAAG,MAAM,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC;AACvN,CAAA,CAAC;AAEF,MAAM,SAAS,GAAuB;IACpC,CAAC,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,EAAE,GAAG,CAAC;AAC5H,IAAA,CAAC,CAAC,KAAK,EAAE,sBAAsB,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,EAAE,GAAG,EAAE,mCAAmC,CAAC;AACxN,IAAA,CAAC,CAAC,OAAO,EAAE,6BAA6B,EAAE,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,EAAE,GAAG,CAAC;AAC5V,IAAA,CAAC,CAAC,QAAQ,EAAE,wBAAwB,EAAE,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,EAAE,GAAG,CAAC;IACtR,CAAC,CAAC,WAAW,EAAE,0BAA0B,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC;IACpP,CAAC,CAAC,QAAQ,EAAE,kCAAkC,EAAE,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,EAAE,EAAE,SAAS,EAAE,oCAAoC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,gCAAgC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,6BAA6B,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,EAAE,GAAG,CAAC;IACxU,CAAC,CAAC,OAAO,EAAE,6CAA6C,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC;AAChM,IAAA,CAAC,CAAC,MAAM,EAAE,4BAA4B,EAAE,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,EAAE,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC,EAAE,IAAI,CAAC;CACxV;AAED,MAAM,KAAK,GAAuB;AAChC,IAAA;AACE,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,4EAA4E;AACzF,QAAA,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACvB,GAAG,EAAE,CAAC,EAAE,EAAE,CAAM,EAAE,GAAG,KAAI;YACvB,IAAI,GAAG,CAAC,OAAO;gBAAE;AACjB,YAAA,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE;AACpC,YAAA,MAAM,CAAC,GAAG,GAAG,CAAC,KAAiC;AAC/C,YAAA,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,OAAO,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,OAAO,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC;QAChG,CAAC;AACF,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,UAAU;AAChB,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,mCAAmC;AAChD,QAAA,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;QACvB,GAAG,EAAE,CAAC,EAAE,EAAE,CAAM,EAAE,GAAG,KAAI;YACvB,IAAI,GAAG,CAAC,OAAO;gBAAE;AACjB,YAAA,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE;AACpC,YAAA,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;QACtE,CAAC;AACF,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,WAAW,EAAE,iDAAiD;QAC9D,QAAQ,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE;AACzC,QAAA,GAAG,EAAE,CAAC,EAAE,EAAE,CAAM,EAAE,GAAG,MAAM,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;AACtK,KAAA;AACD,IAAA;AACE,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,6CAA6C;QAC1D,QAAQ,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,EAAE;QAClD,GAAG,EAAE,CAAC,EAAE,EAAE,CAAM,EAAE,GAAG,KAAI;;YACvB,IAAI,GAAG,CAAC,OAAO;gBAAE;AACjB,YAAA,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE;AACpC,YAAA,MAAM,CAAC,GAAG,GAAG,CAAC,KAAiC;AAC/C,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC;YAC3C,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AAC1C,YAAA,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;YACvC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAA,EAAG,CAAC,CAAC,EAAE,OAAO,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,CAAA,EAAA,CAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,EAAE,OAAO,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA,EAAA,CAAI,EAAE,KAAK,EAAE,CAAA,EAAG,CAAC,CAAA,EAAA,CAAI,EAAE,MAAM,EAAE,CAAA,EAAG,CAAC,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC;AAC7S,YAAA,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC,QAAQ,KAAK,QAAQ;AAAE,gBAAA,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;YAC9E,CAAA,EAAA,GAAA,EAAE,CAAC,KAAK,EAAC,QAAQ,KAAA,EAAA,CAAR,QAAQ,GAAK,QAAQ,CAAA;AAC9B,YAAA,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC;AACnB,YAAA,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;YAC1J,MAAM,IAAI,GAAG,MAAM,GAAG,CAAC,MAAM,EAAE;AAC/B,YAAA,IAAI,CAAC;gBAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;;AAC7B,gBAAA,IAAI,EAAE;AACX,YAAA,OAAO,CAAC;QACV,CAAC;AACF,KAAA;CACF;AAED;AACO,MAAM,eAAe,GAAuB,CAAC,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;;;;"}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var core = require('./core-BGAyaY6L.cjs');
|
|
4
|
+
var fx = require('./fx-lBGVtQO1.cjs');
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* 5.0 built-in effects, all registered through `registerEffect()`:
|
|
8
|
+
* every timeline preset as an `enter` effect, attention seekers, and the
|
|
9
|
+
* click effects (burst, confetti, shake, ripple).
|
|
10
|
+
*/
|
|
11
|
+
const enter = Object.entries(core.TIMELINE_PRESETS).map(([name, frames]) => ({
|
|
12
|
+
name,
|
|
13
|
+
kind: 'enter',
|
|
14
|
+
description: `Entrance: ${name} (same keyframes as the timeline preset).`,
|
|
15
|
+
defaults: { duration: 600, delay: 0, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' },
|
|
16
|
+
run: (el, o, ctx) => ctx.animate(el, ctx.reduced ? [{ opacity: 0 }, { opacity: 1 }] : frames, { duration: o.duration, delay: o.delay, easing: o.easing, fill: 'backwards' }),
|
|
17
|
+
}));
|
|
18
|
+
const A = (name, description, frames, duration = 700, easing = 'ease-in-out') => ({
|
|
19
|
+
name,
|
|
20
|
+
kind: 'attention',
|
|
21
|
+
description,
|
|
22
|
+
defaults: { duration, iterations: 1 },
|
|
23
|
+
run: (el, o, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.6 }, { opacity: 1 }], { duration: 400 }) : ctx.animate(el, frames, { duration: o.duration, easing, iterations: o.iterations })),
|
|
24
|
+
});
|
|
25
|
+
const attention = [
|
|
26
|
+
A('pulse', 'Gentle scale pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.08)' }, { transform: 'scale(1)' }], 600),
|
|
27
|
+
A('pop', 'Quick overshoot pop.', [{ transform: 'scale(1)' }, { transform: 'scale(1.18)', offset: 0.4 }, { transform: 'scale(0.96)', offset: 0.7 }, { transform: 'scale(1)' }], 450, 'cubic-bezier(0.34, 1.56, 0.64, 1)'),
|
|
28
|
+
A('jelly', 'Rubbery squash-and-stretch.', [{ transform: 'scale(1,1)' }, { transform: 'scale(1.25,0.75)', offset: 0.3 }, { transform: 'scale(0.75,1.25)', offset: 0.4 }, { transform: 'scale(1.15,0.85)', offset: 0.5 }, { transform: 'scale(0.95,1.05)', offset: 0.65 }, { transform: 'scale(1.05,0.95)', offset: 0.75 }, { transform: 'scale(1,1)' }], 900),
|
|
29
|
+
A('wiggle', 'Playful rotate wiggle.', [{ transform: 'rotate(0)' }, { transform: 'rotate(-8deg)', offset: 0.2 }, { transform: 'rotate(7deg)', offset: 0.4 }, { transform: 'rotate(-5deg)', offset: 0.6 }, { transform: 'rotate(3deg)', offset: 0.8 }, { transform: 'rotate(0)' }], 650),
|
|
30
|
+
A('heartbeat', 'Double-beat heart pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.2)', offset: 0.14 }, { transform: 'scale(1)', offset: 0.28 }, { transform: 'scale(1.2)', offset: 0.42 }, { transform: 'scale(1)', offset: 0.7 }], 1100),
|
|
31
|
+
A('bounce', 'Hop up and settle with a squash.', [{ transform: 'translateY(0) scale(1,1)' }, { transform: 'translateY(-22px) scale(0.95,1.05)', offset: 0.35 }, { transform: 'translateY(0) scale(1.08,0.92)', offset: 0.6 }, { transform: 'translateY(-6px) scale(1,1)', offset: 0.8 }, { transform: 'translateY(0) scale(1,1)' }], 800),
|
|
32
|
+
A('flash', 'Two soft flashes (well under 3 per second).', [{ opacity: 1 }, { opacity: 0.25, offset: 0.25 }, { opacity: 1, offset: 0.5 }, { opacity: 0.25, offset: 0.75 }, { opacity: 1 }], 1400),
|
|
33
|
+
A('tada', 'Scale + shake celebration.', [{ transform: 'scale(1) rotate(0)' }, { transform: 'scale(0.9) rotate(-3deg)', offset: 0.1 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.3 }, { transform: 'scale(1.1) rotate(-3deg)', offset: 0.5 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.7 }, { transform: 'scale(1) rotate(0)' }], 1000),
|
|
34
|
+
];
|
|
35
|
+
const click = [
|
|
36
|
+
{
|
|
37
|
+
name: 'burst',
|
|
38
|
+
kind: 'click',
|
|
39
|
+
description: 'Particle burst from the click point (or `x` / `y`, or the element center).',
|
|
40
|
+
defaults: { count: 12 },
|
|
41
|
+
run: (el, o, ctx) => {
|
|
42
|
+
if (ctx.reduced)
|
|
43
|
+
return;
|
|
44
|
+
const r = el.getBoundingClientRect();
|
|
45
|
+
const e = ctx.event;
|
|
46
|
+
fx.burst(o.x ?? e?.clientX ?? r.left + r.width / 2, o.y ?? e?.clientY ?? r.top + r.height / 2, o);
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
name: 'confetti',
|
|
51
|
+
kind: 'click',
|
|
52
|
+
description: 'Confetti cannon from the element.',
|
|
53
|
+
defaults: { count: 80 },
|
|
54
|
+
run: (el, o, ctx) => {
|
|
55
|
+
if (ctx.reduced)
|
|
56
|
+
return;
|
|
57
|
+
const r = el.getBoundingClientRect();
|
|
58
|
+
fx.confetti({ x: r.left + r.width / 2, y: r.top + r.height / 2, ...o });
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
name: 'shake',
|
|
63
|
+
kind: 'attention',
|
|
64
|
+
description: 'Horizontal "no" shake (errors, wrong password).',
|
|
65
|
+
defaults: { intensity: 8, duration: 480 },
|
|
66
|
+
run: (el, o, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.5 }, { opacity: 1 }], { duration: 300 }) : fx.shake(el, o.intensity, o.duration)),
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
name: 'ripple',
|
|
70
|
+
kind: 'click',
|
|
71
|
+
description: 'Material-style ink ripple from the pointer.',
|
|
72
|
+
defaults: { color: 'currentColor', duration: 600 },
|
|
73
|
+
run: (el, o, ctx) => {
|
|
74
|
+
var _a;
|
|
75
|
+
if (ctx.reduced)
|
|
76
|
+
return;
|
|
77
|
+
const r = el.getBoundingClientRect();
|
|
78
|
+
const e = ctx.event;
|
|
79
|
+
const d = Math.hypot(r.width, r.height) * 2;
|
|
80
|
+
const dot = document.createElement('span');
|
|
81
|
+
dot.setAttribute('aria-hidden', 'true');
|
|
82
|
+
Object.assign(dot.style, { position: 'absolute', left: `${(e?.clientX ?? r.left + r.width / 2) - r.left - d / 2}px`, top: `${(e?.clientY ?? r.top + r.height / 2) - r.top - d / 2}px`, width: `${d}px`, height: `${d}px`, borderRadius: '50%', background: o.color, opacity: '0.25', pointerEvents: 'none' });
|
|
83
|
+
if (getComputedStyle(el).position === 'static')
|
|
84
|
+
el.style.position = 'relative';
|
|
85
|
+
(_a = el.style).overflow || (_a.overflow = 'hidden');
|
|
86
|
+
el.appendChild(dot);
|
|
87
|
+
const a = ctx.animate(dot, [{ transform: 'scale(0)', opacity: 0.3 }, { transform: 'scale(1)', opacity: 0 }], { duration: o.duration, easing: 'ease-out' });
|
|
88
|
+
const done = () => dot.remove();
|
|
89
|
+
if (a)
|
|
90
|
+
a.finished.then(done, done);
|
|
91
|
+
else
|
|
92
|
+
done();
|
|
93
|
+
return a;
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
];
|
|
97
|
+
/** Every built-in 5.0 effect definition. */
|
|
98
|
+
const BUILTIN_EFFECTS = [...enter, ...attention, ...click];
|
|
99
|
+
|
|
100
|
+
exports.BUILTIN_EFFECTS = BUILTIN_EFFECTS;
|
|
101
|
+
//# sourceMappingURL=builtins-xalxV2d5.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"builtins-xalxV2d5.cjs","sources":["../../src/components/fx/builtins.ts"],"sourcesContent":["/**\n * 5.0 built-in effects, all registered through `registerEffect()`:\n * every timeline preset as an `enter` effect, attention seekers, and the\n * click effects (burst, confetti, shake, ripple).\n */\nimport { TIMELINE_PRESETS } from '../timeline/core';\nimport { burst, confetti, shake } from '../click/fx';\nimport type { EffectDefinition } from './registry';\n\nconst enter: EffectDefinition[] = Object.entries(TIMELINE_PRESETS).map(([name, frames]) => ({\n name,\n kind: 'enter' as const,\n description: `Entrance: ${name} (same keyframes as the timeline preset).`,\n defaults: { duration: 600, delay: 0, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' },\n run: (el: HTMLElement, o: any, ctx) => ctx.animate(el, ctx.reduced ? [{ opacity: 0 }, { opacity: 1 }] : frames, { duration: o.duration, delay: o.delay, easing: o.easing, fill: 'backwards' }),\n}));\n\nconst A = (name: string, description: string, frames: Keyframe[], duration = 700, easing = 'ease-in-out'): EffectDefinition => ({\n name,\n kind: 'attention',\n description,\n defaults: { duration, iterations: 1 },\n run: (el, o: any, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.6 }, { opacity: 1 }], { duration: 400 }) : ctx.animate(el, frames, { duration: o.duration, easing, iterations: o.iterations })),\n});\n\nconst attention: EffectDefinition[] = [\n A('pulse', 'Gentle scale pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.08)' }, { transform: 'scale(1)' }], 600),\n A('pop', 'Quick overshoot pop.', [{ transform: 'scale(1)' }, { transform: 'scale(1.18)', offset: 0.4 }, { transform: 'scale(0.96)', offset: 0.7 }, { transform: 'scale(1)' }], 450, 'cubic-bezier(0.34, 1.56, 0.64, 1)'),\n A('jelly', 'Rubbery squash-and-stretch.', [{ transform: 'scale(1,1)' }, { transform: 'scale(1.25,0.75)', offset: 0.3 }, { transform: 'scale(0.75,1.25)', offset: 0.4 }, { transform: 'scale(1.15,0.85)', offset: 0.5 }, { transform: 'scale(0.95,1.05)', offset: 0.65 }, { transform: 'scale(1.05,0.95)', offset: 0.75 }, { transform: 'scale(1,1)' }], 900),\n A('wiggle', 'Playful rotate wiggle.', [{ transform: 'rotate(0)' }, { transform: 'rotate(-8deg)', offset: 0.2 }, { transform: 'rotate(7deg)', offset: 0.4 }, { transform: 'rotate(-5deg)', offset: 0.6 }, { transform: 'rotate(3deg)', offset: 0.8 }, { transform: 'rotate(0)' }], 650),\n A('heartbeat', 'Double-beat heart pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.2)', offset: 0.14 }, { transform: 'scale(1)', offset: 0.28 }, { transform: 'scale(1.2)', offset: 0.42 }, { transform: 'scale(1)', offset: 0.7 }], 1100),\n A('bounce', 'Hop up and settle with a squash.', [{ transform: 'translateY(0) scale(1,1)' }, { transform: 'translateY(-22px) scale(0.95,1.05)', offset: 0.35 }, { transform: 'translateY(0) scale(1.08,0.92)', offset: 0.6 }, { transform: 'translateY(-6px) scale(1,1)', offset: 0.8 }, { transform: 'translateY(0) scale(1,1)' }], 800),\n A('flash', 'Two soft flashes (well under 3 per second).', [{ opacity: 1 }, { opacity: 0.25, offset: 0.25 }, { opacity: 1, offset: 0.5 }, { opacity: 0.25, offset: 0.75 }, { opacity: 1 }], 1400),\n A('tada', 'Scale + shake celebration.', [{ transform: 'scale(1) rotate(0)' }, { transform: 'scale(0.9) rotate(-3deg)', offset: 0.1 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.3 }, { transform: 'scale(1.1) rotate(-3deg)', offset: 0.5 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.7 }, { transform: 'scale(1) rotate(0)' }], 1000),\n];\n\nconst click: EffectDefinition[] = [\n {\n name: 'burst',\n kind: 'click',\n description: 'Particle burst from the click point (or `x` / `y`, or the element center).',\n defaults: { count: 12 },\n run: (el, o: any, ctx) => {\n if (ctx.reduced) return;\n const r = el.getBoundingClientRect();\n const e = ctx.event as PointerEvent | undefined;\n burst(o.x ?? e?.clientX ?? r.left + r.width / 2, o.y ?? e?.clientY ?? r.top + r.height / 2, o);\n },\n },\n {\n name: 'confetti',\n kind: 'click',\n description: 'Confetti cannon from the element.',\n defaults: { count: 80 },\n run: (el, o: any, ctx) => {\n if (ctx.reduced) return;\n const r = el.getBoundingClientRect();\n confetti({ x: r.left + r.width / 2, y: r.top + r.height / 2, ...o });\n },\n },\n {\n name: 'shake',\n kind: 'attention',\n description: 'Horizontal \"no\" shake (errors, wrong password).',\n defaults: { intensity: 8, duration: 480 },\n run: (el, o: any, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.5 }, { opacity: 1 }], { duration: 300 }) : shake(el, o.intensity, o.duration)),\n },\n {\n name: 'ripple',\n kind: 'click',\n description: 'Material-style ink ripple from the pointer.',\n defaults: { color: 'currentColor', duration: 600 },\n run: (el, o: any, ctx) => {\n if (ctx.reduced) return;\n const r = el.getBoundingClientRect();\n const e = ctx.event as PointerEvent | undefined;\n const d = Math.hypot(r.width, r.height) * 2;\n const dot = document.createElement('span');\n dot.setAttribute('aria-hidden', 'true');\n Object.assign(dot.style, { position: 'absolute', left: `${(e?.clientX ?? r.left + r.width / 2) - r.left - d / 2}px`, top: `${(e?.clientY ?? r.top + r.height / 2) - r.top - d / 2}px`, width: `${d}px`, height: `${d}px`, borderRadius: '50%', background: o.color, opacity: '0.25', pointerEvents: 'none' });\n if (getComputedStyle(el).position === 'static') el.style.position = 'relative';\n el.style.overflow ||= 'hidden';\n el.appendChild(dot);\n const a = ctx.animate(dot, [{ transform: 'scale(0)', opacity: 0.3 }, { transform: 'scale(1)', opacity: 0 }], { duration: o.duration, easing: 'ease-out' });\n const done = () => dot.remove();\n if (a) a.finished.then(done, done);\n else done();\n return a;\n },\n },\n];\n\n/** Every built-in 5.0 effect definition. */\nexport const BUILTIN_EFFECTS: EffectDefinition[] = [...enter, ...attention, ...click];\n"],"names":["TIMELINE_PRESETS","burst","confetti","shake"],"mappings":"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"}
|
|
@@ -29,6 +29,7 @@ require('./layout.cjs');
|
|
|
29
29
|
require('./packs.cjs');
|
|
30
30
|
require('./fx.cjs');
|
|
31
31
|
require('../chunks/registry-DehBVRDV.cjs');
|
|
32
|
+
require('../chunks/builtins-xalxV2d5.cjs');
|
|
32
33
|
require('./a11y.cjs');
|
|
33
34
|
require('../chunks/index-tags-BTMwrfgV.cjs');
|
|
34
35
|
require('./perf.cjs');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"angular.cjs","sources":["../../src/components/frameworks/angular.ts"],"sourcesContent":["/**\n * motionary/components/angular — Angular integration (v3.8).\n * Angular renders `<usa-*>` tags once the component (or NgModule) allows\n * custom elements with `CUSTOM_ELEMENTS_SCHEMA`; property binding\n * `[checked]=\"on\"` and event binding `(usa:change)=\"…\"` then work as is.\n * This entry is framework-free (no `@angular/*` import):\n *\n * ```ts\n * import { CUSTOM_ELEMENTS_SCHEMA, Component, APP_INITIALIZER } from '@angular/core';\n * import { usaInitializer } from 'motionary/components/angular';\n *\n * // app.config.ts\n * providers: [{ provide: APP_INITIALIZER, multi: true, useFactory: usaInitializer(['click', 'ui']) }]\n *\n * @Component({ standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA],\n * template: `<usa-switch [checked]=\"on\" (usa:change)=\"on = $any($event).detail.checked\"></usa-switch>` })\n * ```\n * `bindUsa(el, { props, on })` is available for directives that bind imperatively.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** `APP_INITIALIZER` factory: registers the elements in the browser (no-op during SSR). */\nexport function usaInitializer(categories?: ComponentCategory[]): () => () => void {\n return () => () => {\n if (typeof window !== 'undefined') defineComponents(categories);\n };\n}\n\n/** Register the elements directly (e.g. in `main.ts` before `bootstrapApplication`). */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** Read `event.detail` from a `usa:*` event in a template handler: `(usa:change)=\"on = usaDetail($event).checked\"`. */\nexport const usaDetail = <T = any>(e: Event): T => (e as CustomEvent<T>).detail;\n"],"names":["defineComponents"],"mappings":"
|
|
1
|
+
{"version":3,"file":"angular.cjs","sources":["../../src/components/frameworks/angular.ts"],"sourcesContent":["/**\n * motionary/components/angular — Angular integration (v3.8).\n * Angular renders `<usa-*>` tags once the component (or NgModule) allows\n * custom elements with `CUSTOM_ELEMENTS_SCHEMA`; property binding\n * `[checked]=\"on\"` and event binding `(usa:change)=\"…\"` then work as is.\n * This entry is framework-free (no `@angular/*` import):\n *\n * ```ts\n * import { CUSTOM_ELEMENTS_SCHEMA, Component, APP_INITIALIZER } from '@angular/core';\n * import { usaInitializer } from 'motionary/components/angular';\n *\n * // app.config.ts\n * providers: [{ provide: APP_INITIALIZER, multi: true, useFactory: usaInitializer(['click', 'ui']) }]\n *\n * @Component({ standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA],\n * template: `<usa-switch [checked]=\"on\" (usa:change)=\"on = $any($event).detail.checked\"></usa-switch>` })\n * ```\n * `bindUsa(el, { props, on })` is available for directives that bind imperatively.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** `APP_INITIALIZER` factory: registers the elements in the browser (no-op during SSR). */\nexport function usaInitializer(categories?: ComponentCategory[]): () => () => void {\n return () => () => {\n if (typeof window !== 'undefined') defineComponents(categories);\n };\n}\n\n/** Register the elements directly (e.g. in `main.ts` before `bootstrapApplication`). */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** Read `event.detail` from a `usa:*` event in a template handler: `(usa:change)=\"on = usaDetail($event).checked\"`. */\nexport const usaDetail = <T = any>(e: Event): T => (e as CustomEvent<T>).detail;\n"],"names":["defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;AAkBG;AAMH;AACM,SAAU,cAAc,CAAC,UAAgC,EAAA;AAC7D,IAAA,OAAO,MAAM,MAAK;QAChB,IAAI,OAAO,MAAM,KAAK,WAAW;YAAEA,2BAAgB,CAAC,UAAU,CAAC;AACjE,IAAA,CAAC;AACH;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAEA,2BAAgB,CAAC,UAAU,CAAC;AACjE;AAEA;AACO,MAAM,SAAS,GAAG,CAAU,CAAQ,KAAS,CAAoB,CAAC;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"angular.js","sources":["../../src/components/frameworks/angular.ts"],"sourcesContent":["/**\n * motionary/components/angular — Angular integration (v3.8).\n * Angular renders `<usa-*>` tags once the component (or NgModule) allows\n * custom elements with `CUSTOM_ELEMENTS_SCHEMA`; property binding\n * `[checked]=\"on\"` and event binding `(usa:change)=\"…\"` then work as is.\n * This entry is framework-free (no `@angular/*` import):\n *\n * ```ts\n * import { CUSTOM_ELEMENTS_SCHEMA, Component, APP_INITIALIZER } from '@angular/core';\n * import { usaInitializer } from 'motionary/components/angular';\n *\n * // app.config.ts\n * providers: [{ provide: APP_INITIALIZER, multi: true, useFactory: usaInitializer(['click', 'ui']) }]\n *\n * @Component({ standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA],\n * template: `<usa-switch [checked]=\"on\" (usa:change)=\"on = $any($event).detail.checked\"></usa-switch>` })\n * ```\n * `bindUsa(el, { props, on })` is available for directives that bind imperatively.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** `APP_INITIALIZER` factory: registers the elements in the browser (no-op during SSR). */\nexport function usaInitializer(categories?: ComponentCategory[]): () => () => void {\n return () => () => {\n if (typeof window !== 'undefined') defineComponents(categories);\n };\n}\n\n/** Register the elements directly (e.g. in `main.ts` before `bootstrapApplication`). */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** Read `event.detail` from a `usa:*` event in a template handler: `(usa:change)=\"on = usaDetail($event).checked\"`. */\nexport const usaDetail = <T = any>(e: Event): T => (e as CustomEvent<T>).detail;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"angular.js","sources":["../../src/components/frameworks/angular.ts"],"sourcesContent":["/**\n * motionary/components/angular — Angular integration (v3.8).\n * Angular renders `<usa-*>` tags once the component (or NgModule) allows\n * custom elements with `CUSTOM_ELEMENTS_SCHEMA`; property binding\n * `[checked]=\"on\"` and event binding `(usa:change)=\"…\"` then work as is.\n * This entry is framework-free (no `@angular/*` import):\n *\n * ```ts\n * import { CUSTOM_ELEMENTS_SCHEMA, Component, APP_INITIALIZER } from '@angular/core';\n * import { usaInitializer } from 'motionary/components/angular';\n *\n * // app.config.ts\n * providers: [{ provide: APP_INITIALIZER, multi: true, useFactory: usaInitializer(['click', 'ui']) }]\n *\n * @Component({ standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA],\n * template: `<usa-switch [checked]=\"on\" (usa:change)=\"on = $any($event).detail.checked\"></usa-switch>` })\n * ```\n * `bindUsa(el, { props, on })` is available for directives that bind imperatively.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\nexport { bindUsa, usaEventName } from './bind';\nexport type { UsaBinding } from './bind';\n\n/** `APP_INITIALIZER` factory: registers the elements in the browser (no-op during SSR). */\nexport function usaInitializer(categories?: ComponentCategory[]): () => () => void {\n return () => () => {\n if (typeof window !== 'undefined') defineComponents(categories);\n };\n}\n\n/** Register the elements directly (e.g. in `main.ts` before `bootstrapApplication`). */\nexport function defineUsa(categories?: ComponentCategory[]): void {\n if (typeof window !== 'undefined') defineComponents(categories);\n}\n\n/** Read `event.detail` from a `usa:*` event in a template handler: `(usa:change)=\"on = usaDetail($event).checked\"`. */\nexport const usaDetail = <T = any>(e: Event): T => (e as CustomEvent<T>).detail;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;AAkBG;AAMH;AACM,SAAU,cAAc,CAAC,UAAgC,EAAA;AAC7D,IAAA,OAAO,MAAM,MAAK;QAChB,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE,IAAA,CAAC;AACH;AAEA;AACM,SAAU,SAAS,CAAC,UAAgC,EAAA;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,gBAAgB,CAAC,UAAU,CAAC;AACjE;AAEA;AACO,MAAM,SAAS,GAAG,CAAU,CAAQ,KAAS,CAAoB,CAAC;;;;"}
|
|
@@ -8,6 +8,7 @@ var audio = require('../chunks/audio-EXUoijsG.cjs');
|
|
|
8
8
|
var registry = require('../chunks/registry-DehBVRDV.cjs');
|
|
9
9
|
var base = require('../chunks/base-BaQV-2ha.cjs');
|
|
10
10
|
var components_tokens = require('./tokens.cjs');
|
|
11
|
+
require('../chunks/builtins-xalxV2d5.cjs');
|
|
11
12
|
require('../chunks/core-BGAyaY6L.cjs');
|
|
12
13
|
require('../chunks/fx-lBGVtQO1.cjs');
|
|
13
14
|
|