use-scroll-animate 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.1.0] - 2026-10-08
+
+### Added
+- **New entry `use-scroll-animate/components/effects`** — the 5.x effect packs, all registered through `registerEffect()` and playable with `playEffect()`, `bindEffect()` or `<usa-fx>`: `registerAllEffects()`, `registerCardClickEffects()`, `EFFECT_PACKS`, `CARD_FX`, `CLICK_FX`, `fxLayer()`. Kept out of `components` / `components/lite` (lite stays under its 70 KB budget); the UMD bundle registers every pack.
+- **Card effects 2.0**: `holo` (holographic foil + 3D tilt following the pointer), `glare-sweep`, `book-open`, `card-fan`, `topple`, `float-tilt`.
+- **Click effects 2.0**: `shockwave`, `ink-splash`, `star-burst`, `jelly-press`, `ring-ripple`, `emoji-rain` — particles spawn from the click point in a fixed, `aria-hidden`, pointer-transparent layer.
+- Showcase: **Holographic card**, **Card moves** and **Click effects 2.0** cards in the Effects category (code tabs import `components/effects`).
+
+### Changed
+- `bindEffect()` — a persistent effect (one that returns a cleanup) now *replaces* its previous run on re-trigger instead of stacking; every effect kind honours `reduced`.
+
+### Accessibility
+- Under reduced motion particles are skipped, presses fade instead of squashing, loops don’t start, `holo` keeps a static sheen.
+
 ## [5.0.0] - 2026-10-08
 
 ### ⚠ BREAKING CHANGES (see [docs/upgrading-5.md](./docs/upgrading-5.md); `npx usa-codemod-5 --write src`)

package/dist/components/effects.cjs

@@ -0,0 +1,265 @@
+'use strict';
+
+var components_fx = require('./fx.cjs');
+require('../chunks/base-B5i8qQPR.cjs');
+require('../chunks/core-BDcszY4L.cjs');
+require('./tokens.cjs');
+require('../chunks/fx-B8hk1Fby.cjs');
+
+let layer = null;
+/** A fixed, pointer-transparent, aria-hidden layer for transient particles. */
+function fxLayer() {
+    if (layer?.isConnected)
+        return layer;
+    layer = document.createElement('div');
+    layer.setAttribute('aria-hidden', 'true');
+    layer.setAttribute('data-usa-fx-layer', '');
+    layer.style.cssText = 'position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2147483000;contain:strict';
+    document.body.appendChild(layer);
+    return layer;
+}
+/** Client point of the triggering pointer event, or the element's center. */
+function origin(el, ctx) {
+    const e = ctx.event;
+    const r = el.getBoundingClientRect();
+    return e && typeof e.clientX === 'number' && (e.clientX || e.clientY) ? { x: e.clientX, y: e.clientY } : { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+}
+/** Spawn an absolutely positioned node in the fx layer at (x, y); removed when its animation ends. */
+function spawn(x, y, css, ctx, frames, opts, text = '') {
+    const n = document.createElement('span');
+    n.style.cssText = `position:absolute;left:${x}px;top:${y}px;${css}`;
+    if (text)
+        n.textContent = text;
+    fxLayer().appendChild(n);
+    const a = ctx.animate(n, frames, { fill: 'forwards', ...opts });
+    const rm = () => n.remove();
+    if (a)
+        a.finished.then(rm, rm);
+    else
+        rm();
+    return a;
+}
+/** An overlay child covering `el` (makes `el` a positioning context). Returns it and a remover. */
+function overlay(el, css) {
+    const o = document.createElement('span');
+    o.setAttribute('aria-hidden', 'true');
+    o.style.cssText = `position:absolute;inset:0;pointer-events:none;border-radius:inherit;${css}`;
+    if (getComputedStyle(el).position === 'static')
+        el.style.position = 'relative';
+    el.appendChild(o);
+    return [o, () => o.remove()];
+}
+const PALETTE = ['#7c5cff', '#ff5c8a', '#22d3ee', '#facc15', '#34d399'];
+const rand = (a, b) => a + Math.random() * (b - a);
+/** Wait for all animations (ignoring nulls). */
+const all = (anims) => Promise.all(anims.filter(Boolean).map((a) => a.finished.catch(() => undefined)));
+
+const CARD_FX = [
+    {
+        name: 'holo',
+        kind: 'card',
+        description: 'Holographic foil: a rainbow sheen and sparkle that follow the pointer (persistent; bind with trigger="load").',
+        reduced: 'run',
+        defaults: { strength: 0.55 },
+        run: (el, o, ctx) => {
+            const [layer, remove] = overlay(el, `mix-blend-mode:color-dodge;opacity:${o.strength};background:linear-gradient(115deg,transparent 20%,#ff8bd855 35%,#8bf3ff55 45%,#fff58b55 55%,transparent 70%),repeating-linear-gradient(55deg,#ffffff10 0 2px,transparent 2px 6px);background-size:250% 250%,100% 100%;background-position:50% 50%;transition:background-position .2s ease-out`);
+            if (ctx.reduced)
+                return remove;
+            const move = (e) => {
+                const r = el.getBoundingClientRect();
+                const x = ((e.clientX - r.left) / (r.width || 1)) * 100;
+                const y = ((e.clientY - r.top) / (r.height || 1)) * 100;
+                layer.style.backgroundPosition = `${x}% ${y}%, 0 0`;
+                el.style.transform = `perspective(700px) rotateY(${(x - 50) / 8}deg) rotateX(${(50 - y) / 8}deg)`;
+            };
+            const leave = () => {
+                layer.style.backgroundPosition = '50% 50%, 0 0';
+                el.style.transform = '';
+            };
+            el.addEventListener('pointermove', move);
+            el.addEventListener('pointerleave', leave);
+            return () => {
+                el.removeEventListener('pointermove', move);
+                el.removeEventListener('pointerleave', leave);
+                leave();
+                remove();
+            };
+        },
+    },
+    {
+        name: 'glare-sweep',
+        kind: 'card',
+        description: 'A diagonal light streak sweeps across the card once.',
+        defaults: { duration: 900, color: 'rgba(255,255,255,.55)' },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const [g, remove] = overlay(el, `overflow:hidden;background:linear-gradient(105deg,transparent 35%,${o.color} 50%,transparent 65%);background-size:250% 100%`);
+            const a = ctx.animate(g, [{ backgroundPosition: '150% 0' }, { backgroundPosition: '-50% 0' }], { duration: o.duration, easing: 'ease-in-out' });
+            if (a)
+                a.finished.then(remove, remove);
+            else
+                remove();
+            return a;
+        },
+    },
+    {
+        name: 'book-open',
+        kind: 'card',
+        description: 'The card opens like a book cover around its left edge, peeks and closes.',
+        defaults: { angle: 35, duration: 1100 },
+        run: (el, o, ctx) => {
+            el.style.transformOrigin = 'left center';
+            return ctx.animate(el, [{ transform: 'perspective(900px) rotateY(0)' }, { transform: `perspective(900px) rotateY(-${o.angle}deg)`, offset: 0.45 }, { transform: 'perspective(900px) rotateY(0)' }], { duration: o.duration, easing: 'cubic-bezier(0.34, 1.3, 0.64, 1)' });
+        },
+    },
+    {
+        name: 'card-fan',
+        kind: 'card',
+        description: 'The element’s children fan out like a hand of cards, then gather.',
+        defaults: { spread: 14, duration: 900 },
+        run: (el, o, ctx) => {
+            const kids = Array.from(el.children);
+            const mid = (kids.length - 1) / 2;
+            return all(kids.map((k, i) => ctx.animate(k, [{ transform: 'none' }, { transform: `translateX(${(i - mid) * o.spread}px) rotate(${(i - mid) * (o.spread / 2)}deg)`, offset: 0.5 }, { transform: 'none' }], { duration: o.duration, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' })));
+        },
+    },
+    {
+        name: 'topple',
+        kind: 'card',
+        description: 'Tips backwards on its bottom edge and springs upright.',
+        defaults: { duration: 1000 },
+        run: (el, o, ctx) => {
+            el.style.transformOrigin = 'bottom center';
+            return ctx.animate(el, [{ transform: 'perspective(800px) rotateX(0)' }, { transform: 'perspective(800px) rotateX(55deg)', offset: 0.35 }, { transform: 'perspective(800px) rotateX(-12deg)', offset: 0.6 }, { transform: 'perspective(800px) rotateX(5deg)', offset: 0.8 }, { transform: 'perspective(800px) rotateX(0)' }], { duration: o.duration, easing: 'ease-out' });
+        },
+    },
+    {
+        name: 'float-tilt',
+        kind: 'loop',
+        description: 'Idle floating with a slow 3D sway (loop; stops under reduced motion).',
+        defaults: { duration: 4200, distance: 8 },
+        run: (el, o, ctx) => {
+            const a = ctx.animate(el, [{ transform: 'translateY(0) rotateX(0) rotateY(0)' }, { transform: `translateY(-${o.distance}px) rotateX(4deg) rotateY(-5deg)` }, { transform: 'translateY(0) rotateX(0) rotateY(0)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
+            return () => a?.cancel();
+        },
+    },
+];
+const CLICK_FX = [
+    {
+        name: 'shockwave',
+        kind: 'click',
+        description: 'Two expanding rings from the click point.',
+        defaults: { color: '#7c5cff', size: 160, duration: 700 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const { x, y } = origin(el, ctx);
+            return all([0, 120].map((delay) => spawn(x, y, `width:${o.size}px;height:${o.size}px;margin:${-o.size / 2}px 0 0 ${-o.size / 2}px;border:3px solid ${o.color};border-radius:50%`, ctx, [{ transform: 'scale(0)', opacity: 0.9 }, { transform: 'scale(1)', opacity: 0 }], { duration: o.duration, delay, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' })));
+        },
+    },
+    {
+        name: 'ink-splash',
+        kind: 'click',
+        description: 'Ink blobs splatter from the click point and fade.',
+        defaults: { count: 9, colors: PALETTE, duration: 800 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const { x, y } = origin(el, ctx);
+            return all(Array.from({ length: o.count }, (_, i) => {
+                const s = rand(6, 22);
+                const ang = rand(0, Math.PI * 2);
+                const d = rand(20, 70);
+                return spawn(x, y, `width:${s}px;height:${s}px;margin:${-s / 2}px 0 0 ${-s / 2}px;background:${o.colors[i % o.colors.length]};border-radius:${rand(40, 50)}% ${rand(50, 60)}% ${rand(40, 60)}% ${rand(45, 55)}%`, ctx, [{ transform: 'translate(0,0) scale(.3)', opacity: 1 }, { transform: `translate(${Math.cos(ang) * d}px,${Math.sin(ang) * d}px) scale(1)`, opacity: 0.9, offset: 0.5 }, { transform: `translate(${Math.cos(ang) * d}px,${Math.sin(ang) * d + 8}px) scale(1.1)`, opacity: 0 }], { duration: o.duration, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' });
+            }));
+        },
+    },
+    {
+        name: 'star-burst',
+        kind: 'click',
+        description: 'Spinning stars burst outward.',
+        defaults: { count: 10, colors: ['#facc15', '#fb923c', '#f472b6'], duration: 900 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const { x, y } = origin(el, ctx);
+            return all(Array.from({ length: o.count }, (_, i) => {
+                const ang = (i / o.count) * Math.PI * 2;
+                const d = rand(40, 80);
+                const s = rand(12, 22);
+                return spawn(x, y, `font-size:${s}px;line-height:1;margin:${-s / 2}px 0 0 ${-s / 2}px;color:${o.colors[i % o.colors.length]}`, ctx, [{ transform: 'translate(0,0) rotate(0) scale(.2)', opacity: 1 }, { transform: `translate(${Math.cos(ang) * d}px,${Math.sin(ang) * d}px) rotate(${rand(180, 360)}deg) scale(1)`, opacity: 0 }], { duration: o.duration, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' }, '★');
+            }));
+        },
+    },
+    {
+        name: 'jelly-press',
+        kind: 'click',
+        description: 'The pressed element squishes like jelly and wobbles back.',
+        defaults: { duration: 650 },
+        run: (el, o, ctx) => ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.7 }, { opacity: 1 }], { duration: 250 }) : ctx.animate(el, [{ transform: 'scale(1,1)' }, { transform: 'scale(1.15,.85)', offset: 0.2 }, { transform: 'scale(.9,1.1)', offset: 0.4 }, { transform: 'scale(1.05,.95)', offset: 0.6 }, { transform: 'scale(.98,1.02)', offset: 0.8 }, { transform: 'scale(1,1)' }], { duration: o.duration, easing: 'ease-out' }),
+    },
+    {
+        name: 'ring-ripple',
+        kind: 'click',
+        description: 'Concentric outlined rings ripple out like water.',
+        defaults: { rings: 3, color: '#22d3ee', size: 120, duration: 1000 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const { x, y } = origin(el, ctx);
+            return all(Array.from({ length: o.rings }, (_, i) => spawn(x, y, `width:${o.size}px;height:${o.size}px;margin:${-o.size / 2}px 0 0 ${-o.size / 2}px;border:2px solid ${o.color};border-radius:50%`, ctx, [{ transform: 'scale(.1)', opacity: 0.8 }, { transform: 'scale(1)', opacity: 0 }], { duration: o.duration, delay: i * 160, easing: 'ease-out' })));
+        },
+    },
+    {
+        name: 'emoji-rain',
+        kind: 'click',
+        description: 'Emoji pop up and fall around the click (pass `emoji: "🎉✨💜"`).',
+        defaults: { emoji: '🎉✨💜🔥', count: 14, duration: 1300 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const { x, y } = origin(el, ctx);
+            const chars = Array.from(String(o.emoji));
+            return all(Array.from({ length: o.count }, (_, i) => {
+                const dx = rand(-90, 90);
+                return spawn(x, y, `font-size:${rand(16, 28)}px;line-height:1`, ctx, [{ transform: 'translate(0,0) scale(.4)', opacity: 0 }, { transform: `translate(${dx * 0.6}px,${rand(-90, -50)}px) scale(1)`, opacity: 1, offset: 0.35 }, { transform: `translate(${dx}px,${rand(40, 90)}px) rotate(${rand(-60, 60)}deg) scale(.9)`, opacity: 0 }], { duration: o.duration, delay: i * 25, easing: 'cubic-bezier(0.33, 0, 0.67, 1)' }, chars[i % chars.length]);
+            }));
+        },
+    },
+];
+
+/**
+ * use-scroll-animate/components/effects — the 5.x effect packs, all
+ * registered through `registerEffect()` (5.0) and playable with
+ * `playEffect()`, `bindEffect()` or `<usa-fx>`. Kept out of
+ * `use-scroll-animate/components` / `components/lite` so their size budgets
+ * hold; the UMD bundle registers everything.
+ *
+ * ```ts
+ * import { registerAllEffects } from 'use-scroll-animate/components/effects';
+ * registerAllEffects();
+ * ```
+ */
+/** The effect packs by version, in release order. */
+const EFFECT_PACKS = {
+    'cards-click': [...CARD_FX, ...CLICK_FX],
+};
+/** 5.1: card & click effects 2.0. */
+function registerCardClickEffects() {
+    components_fx.registerEffects(EFFECT_PACKS['cards-click']);
+}
+/** Register the built-ins and every pack (idempotent). */
+function registerAllEffects() {
+    components_fx.registerBuiltinEffects();
+    for (const defs of Object.values(EFFECT_PACKS))
+        components_fx.registerEffects(defs);
+}
+
+exports.CARD_FX = CARD_FX;
+exports.CLICK_FX = CLICK_FX;
+exports.EFFECT_PACKS = EFFECT_PACKS;
+exports.fxLayer = fxLayer;
+exports.registerAllEffects = registerAllEffects;
+exports.registerCardClickEffects = registerCardClickEffects;
+//# sourceMappingURL=effects.cjs.map

package/dist/components/effects.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"effects.cjs","sources":["../../src/components/effects/shared.ts","../../src/components/effects/cards-click.ts","../../src/components/effects/index.ts"],"sourcesContent":["/** Helpers shared by the 5.x effect packs. */\nimport type { EffectContext } from '../fx/registry';\n\nlet layer: HTMLElement | null = null;\n/** A fixed, pointer-transparent, aria-hidden layer for transient particles. */\nexport function fxLayer(): HTMLElement {\n  if (layer?.isConnected) return layer;\n  layer = document.createElement('div');\n  layer.setAttribute('aria-hidden', 'true');\n  layer.setAttribute('data-usa-fx-layer', '');\n  layer.style.cssText = 'position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:2147483000;contain:strict';\n  document.body.appendChild(layer);\n  return layer;\n}\n\n/** Client point of the triggering pointer event, or the element's center. */\nexport function origin(el: Element, ctx: EffectContext): { x: number; y: number } {\n  const e = ctx.event as PointerEvent | MouseEvent | undefined;\n  const r = el.getBoundingClientRect();\n  return e && typeof e.clientX === 'number' && (e.clientX || e.clientY) ? { x: e.clientX, y: e.clientY } : { x: r.left + r.width / 2, y: r.top + r.height / 2 };\n}\n\n/** Spawn an absolutely positioned node in the fx layer at (x, y); removed when its animation ends. */\nexport function spawn(x: number, y: number, css: string, ctx: EffectContext, frames: Keyframe[], opts: KeyframeAnimationOptions, text = ''): Animation | null {\n  const n = document.createElement('span');\n  n.style.cssText = `position:absolute;left:${x}px;top:${y}px;${css}`;\n  if (text) n.textContent = text;\n  fxLayer().appendChild(n);\n  const a = ctx.animate(n, frames, { fill: 'forwards', ...opts });\n  const rm = () => n.remove();\n  if (a) a.finished.then(rm, rm);\n  else rm();\n  return a;\n}\n\n/** An overlay child covering `el` (makes `el` a positioning context). Returns it and a remover. */\nexport function overlay(el: HTMLElement, css: string): [HTMLElement, () => void] {\n  const o = document.createElement('span');\n  o.setAttribute('aria-hidden', 'true');\n  o.style.cssText = `position:absolute;inset:0;pointer-events:none;border-radius:inherit;${css}`;\n  if (getComputedStyle(el).position === 'static') el.style.position = 'relative';\n  el.appendChild(o);\n  return [o, () => o.remove()];\n}\n\nexport const PALETTE = ['#7c5cff', '#ff5c8a', '#22d3ee', '#facc15', '#34d399'];\nexport const rand = (a: number, b: number): number => a + Math.random() * (b - a);\n\n/** Wait for all animations (ignoring nulls). */\nexport const all = (anims: (Animation | null)[]): Promise<unknown> => Promise.all(anims.filter(Boolean).map((a) => a!.finished.catch(() => undefined)));\n","/**\n * 5.1 — card & click effects 2.0, registered through `registerEffect()`.\n * Card: `holo` (holographic foil following the pointer), `glare-sweep`,\n * `book-open`, `card-fan`, `topple`, `float-tilt`. Click: `shockwave`,\n * `ink-splash`, `star-burst`, `jelly-press`, `ring-ripple`, `emoji-rain`.\n */\nimport type { EffectDefinition } from '../fx/registry';\nimport { origin, spawn, overlay, PALETTE, rand, all } from './shared';\n\nexport const CARD_FX: EffectDefinition[] = [\n  {\n    name: 'holo',\n    kind: 'card',\n    description: 'Holographic foil: a rainbow sheen and sparkle that follow the pointer (persistent; bind with trigger=\"load\").',\n    reduced: 'run',\n    defaults: { strength: 0.55 },\n    run: (el, o: any, ctx) => {\n      const [layer, remove] = overlay(el, `mix-blend-mode:color-dodge;opacity:${o.strength};background:linear-gradient(115deg,transparent 20%,#ff8bd855 35%,#8bf3ff55 45%,#fff58b55 55%,transparent 70%),repeating-linear-gradient(55deg,#ffffff10 0 2px,transparent 2px 6px);background-size:250% 250%,100% 100%;background-position:50% 50%;transition:background-position .2s ease-out`);\n      if (ctx.reduced) return remove;\n      const move = (e: PointerEvent) => {\n        const r = el.getBoundingClientRect();\n        const x = ((e.clientX - r.left) / (r.width || 1)) * 100;\n        const y = ((e.clientY - r.top) / (r.height || 1)) * 100;\n        layer.style.backgroundPosition = `${x}% ${y}%, 0 0`;\n        el.style.transform = `perspective(700px) rotateY(${(x - 50) / 8}deg) rotateX(${(50 - y) / 8}deg)`;\n      };\n      const leave = () => {\n        layer.style.backgroundPosition = '50% 50%, 0 0';\n        el.style.transform = '';\n      };\n      el.addEventListener('pointermove', move);\n      el.addEventListener('pointerleave', leave);\n      return () => {\n        el.removeEventListener('pointermove', move);\n        el.removeEventListener('pointerleave', leave);\n        leave();\n        remove();\n      };\n    },\n  },\n  {\n    name: 'glare-sweep',\n    kind: 'card',\n    description: 'A diagonal light streak sweeps across the card once.',\n    defaults: { duration: 900, color: 'rgba(255,255,255,.55)' },\n    run: (el, o: any, ctx) => {\n      if (ctx.reduced) return;\n      const [g, remove] = overlay(el, `overflow:hidden;background:linear-gradient(105deg,transparent 35%,${o.color} 50%,transparent 65%);background-size:250% 100%`);\n      const a = ctx.animate(g, [{ backgroundPosition: '150% 0' }, { backgroundPosition: '-50% 0' }], { duration: o.duration, easing: 'ease-in-out' });\n      if (a) a.finished.then(remove, remove);\n      else remove();\n      return a;\n    },\n  },\n  {\n    name: 'book-open',\n    kind: 'card',\n    description: 'The card opens like a book cover around its left edge, peeks and closes.',\n    defaults: { angle: 35, duration: 1100 },\n    run: (el, o: any, ctx) => {\n      el.style.transformOrigin = 'left center';\n      return ctx.animate(el, [{ transform: 'perspective(900px) rotateY(0)' }, { transform: `perspective(900px) rotateY(-${o.angle}deg)`, offset: 0.45 }, { transform: 'perspective(900px) rotateY(0)' }], { duration: o.duration, easing: 'cubic-bezier(0.34, 1.3, 0.64, 1)' });\n    },\n  },\n  {\n    name: 'card-fan',\n    kind: 'card',\n    description: 'The element’s children fan out like a hand of cards, then gather.',\n    defaults: { spread: 14, duration: 900 },\n    run: (el, o: any, ctx) => {\n      const kids = Array.from(el.children) as HTMLElement[];\n      const mid = (kids.length - 1) / 2;\n      return all(kids.map((k, i) => ctx.animate(k, [{ transform: 'none' }, { transform: `translateX(${(i - mid) * o.spread}px) rotate(${(i - mid) * (o.spread / 2)}deg)`, offset: 0.5 }, { transform: 'none' }], { duration: o.duration, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' })));\n    },\n  },\n  {\n    name: 'topple',\n    kind: 'card',\n    description: 'Tips backwards on its bottom edge and springs upright.',\n    defaults: { duration: 1000 },\n    run: (el, o: any, ctx) => {\n      el.style.transformOrigin = 'bottom center';\n      return ctx.animate(el, [{ transform: 'perspective(800px) rotateX(0)' }, { transform: 'perspective(800px) rotateX(55deg)', offset: 0.35 }, { transform: 'perspective(800px) rotateX(-12deg)', offset: 0.6 }, { transform: 'perspective(800px) rotateX(5deg)', offset: 0.8 }, { transform: 'perspective(800px) rotateX(0)' }], { duration: o.duration, easing: 'ease-out' });\n    },\n  },\n  {\n    name: 'float-tilt',\n    kind: 'loop',\n    description: 'Idle floating with a slow 3D sway (loop; stops under reduced motion).',\n    defaults: { duration: 4200, distance: 8 },\n    run: (el, o: any, ctx) => {\n      const a = ctx.animate(el, [{ transform: 'translateY(0) rotateX(0) rotateY(0)' }, { transform: `translateY(-${o.distance}px) rotateX(4deg) rotateY(-5deg)` }, { transform: 'translateY(0) rotateX(0) rotateY(0)' }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n      return () => a?.cancel();\n    },\n  },\n];\n\nexport const CLICK_FX: EffectDefinition[] = [\n  {\n    name: 'shockwave',\n    kind: 'click',\n    description: 'Two expanding rings from the click point.',\n    defaults: { color: '#7c5cff', size: 160, duration: 700 },\n    run: (el, o: any, ctx) => {\n      if (ctx.reduced) return;\n      const { x, y } = origin(el, ctx);\n      return all([0, 120].map((delay) => spawn(x, y, `width:${o.size}px;height:${o.size}px;margin:${-o.size / 2}px 0 0 ${-o.size / 2}px;border:3px solid ${o.color};border-radius:50%`, ctx, [{ transform: 'scale(0)', opacity: 0.9 }, { transform: 'scale(1)', opacity: 0 }], { duration: o.duration, delay, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' })));\n    },\n  },\n  {\n    name: 'ink-splash',\n    kind: 'click',\n    description: 'Ink blobs splatter from the click point and fade.',\n    defaults: { count: 9, colors: PALETTE, duration: 800 },\n    run: (el, o: any, ctx) => {\n      if (ctx.reduced) return;\n      const { x, y } = origin(el, ctx);\n      return all(Array.from({ length: o.count }, (_, i) => {\n        const s = rand(6, 22);\n        const ang = rand(0, Math.PI * 2);\n        const d = rand(20, 70);\n        return spawn(x, y, `width:${s}px;height:${s}px;margin:${-s / 2}px 0 0 ${-s / 2}px;background:${o.colors[i % o.colors.length]};border-radius:${rand(40, 50)}% ${rand(50, 60)}% ${rand(40, 60)}% ${rand(45, 55)}%`, ctx, [{ transform: 'translate(0,0) scale(.3)', opacity: 1 }, { transform: `translate(${Math.cos(ang) * d}px,${Math.sin(ang) * d}px) scale(1)`, opacity: 0.9, offset: 0.5 }, { transform: `translate(${Math.cos(ang) * d}px,${Math.sin(ang) * d + 8}px) scale(1.1)`, opacity: 0 }], { duration: o.duration, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' });\n      }));\n    },\n  },\n  {\n    name: 'star-burst',\n    kind: 'click',\n    description: 'Spinning stars burst outward.',\n    defaults: { count: 10, colors: ['#facc15', '#fb923c', '#f472b6'], duration: 900 },\n    run: (el, o: any, ctx) => {\n      if (ctx.reduced) return;\n      const { x, y } = origin(el, ctx);\n      return all(Array.from({ length: o.count }, (_, i) => {\n        const ang = (i / o.count) * Math.PI * 2;\n        const d = rand(40, 80);\n        const s = rand(12, 22);\n        return spawn(x, y, `font-size:${s}px;line-height:1;margin:${-s / 2}px 0 0 ${-s / 2}px;color:${o.colors[i % o.colors.length]}`, ctx, [{ transform: 'translate(0,0) rotate(0) scale(.2)', opacity: 1 }, { transform: `translate(${Math.cos(ang) * d}px,${Math.sin(ang) * d}px) rotate(${rand(180, 360)}deg) scale(1)`, opacity: 0 }], { duration: o.duration, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' }, '★');\n      }));\n    },\n  },\n  {\n    name: 'jelly-press',\n    kind: 'click',\n    description: 'The pressed element squishes like jelly and wobbles back.',\n    defaults: { duration: 650 },\n    run: (el, o: any, ctx) =>\n      ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.7 }, { opacity: 1 }], { duration: 250 }) : ctx.animate(el, [{ transform: 'scale(1,1)' }, { transform: 'scale(1.15,.85)', offset: 0.2 }, { transform: 'scale(.9,1.1)', offset: 0.4 }, { transform: 'scale(1.05,.95)', offset: 0.6 }, { transform: 'scale(.98,1.02)', offset: 0.8 }, { transform: 'scale(1,1)' }], { duration: o.duration, easing: 'ease-out' }),\n  },\n  {\n    name: 'ring-ripple',\n    kind: 'click',\n    description: 'Concentric outlined rings ripple out like water.',\n    defaults: { rings: 3, color: '#22d3ee', size: 120, duration: 1000 },\n    run: (el, o: any, ctx) => {\n      if (ctx.reduced) return;\n      const { x, y } = origin(el, ctx);\n      return all(Array.from({ length: o.rings }, (_, i) => spawn(x, y, `width:${o.size}px;height:${o.size}px;margin:${-o.size / 2}px 0 0 ${-o.size / 2}px;border:2px solid ${o.color};border-radius:50%`, ctx, [{ transform: 'scale(.1)', opacity: 0.8 }, { transform: 'scale(1)', opacity: 0 }], { duration: o.duration, delay: i * 160, easing: 'ease-out' })));\n    },\n  },\n  {\n    name: 'emoji-rain',\n    kind: 'click',\n    description: 'Emoji pop up and fall around the click (pass `emoji: \"🎉✨💜\"`).',\n    defaults: { emoji: '🎉✨💜🔥', count: 14, duration: 1300 },\n    run: (el, o: any, ctx) => {\n      if (ctx.reduced) return;\n      const { x, y } = origin(el, ctx);\n      const chars = Array.from(String(o.emoji));\n      return all(Array.from({ length: o.count }, (_, i) => {\n        const dx = rand(-90, 90);\n        return spawn(x, y, `font-size:${rand(16, 28)}px;line-height:1`, ctx, [{ transform: 'translate(0,0) scale(.4)', opacity: 0 }, { transform: `translate(${dx * 0.6}px,${rand(-90, -50)}px) scale(1)`, opacity: 1, offset: 0.35 }, { transform: `translate(${dx}px,${rand(40, 90)}px) rotate(${rand(-60, 60)}deg) scale(.9)`, opacity: 0 }], { duration: o.duration, delay: i * 25, easing: 'cubic-bezier(0.33, 0, 0.67, 1)' }, chars[i % chars.length]);\n      }));\n    },\n  },\n];\n","/**\n * use-scroll-animate/components/effects — the 5.x effect packs, all\n * registered through `registerEffect()` (5.0) and playable with\n * `playEffect()`, `bindEffect()` or `<usa-fx>`. Kept out of\n * `use-scroll-animate/components` / `components/lite` so their size budgets\n * hold; the UMD bundle registers everything.\n *\n * ```ts\n * import { registerAllEffects } from 'use-scroll-animate/components/effects';\n * registerAllEffects();\n * ```\n */\nimport { registerEffects, registerBuiltinEffects } from '../fx/index';\nimport type { EffectDefinition } from '../fx/registry';\nimport { CARD_FX, CLICK_FX } from './cards-click';\n\nexport { CARD_FX, CLICK_FX };\nexport { fxLayer } from './shared';\n\n/** The effect packs by version, in release order. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n  'cards-click': [...CARD_FX, ...CLICK_FX],\n};\n\n/** 5.1: card & click effects 2.0. */\nexport function registerCardClickEffects(): void {\n  registerEffects(EFFECT_PACKS['cards-click']);\n}\n\n/** Register the built-ins and every pack (idempotent). */\nexport function registerAllEffects(): void {\n  registerBuiltinEffects();\n  for (const defs of Object.values(EFFECT_PACKS)) registerEffects(defs);\n}\n"],"names":["registerEffects","registerBuiltinEffects"],"mappings":"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"}

package/dist/components/effects.d.cts

@@ -0,0 +1,66 @@
+type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
+type Cleanup = () => void;
+
+/**
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
+ * yours) is a plain object registered once and played the same way:
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
+ * already applies reduced motion, motion sensitivity, intensity and the
+ * animation budget.
+ */
+
+declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
+type EffectKind = (typeof EFFECT_KINDS)[number];
+interface EffectContext {
+    /** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
+    readonly reduced: boolean;
+    readonly sensitivity: MotionSensitivity;
+    /** The triggering event (pointer position for click effects), if any. */
+    readonly event?: Event;
+    /** `el.animate()` with the library's motion rules (may return `null`). */
+    animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+    /** Register teardown for long-running effects (loops, listeners). */
+    onCleanup(fn: Cleanup): void;
+}
+interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
+    /** Unique, kebab-case. */
+    name: string;
+    kind: EffectKind;
+    /** One line for docs and the gallery. */
+    description?: string;
+    /** Option defaults (merged under the caller's options). */
+    defaults?: Partial<O>;
+    /**
+     * Under reduced motion: `'skip'` (do nothing — default for loop, background
+     * and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
+     * effect degrades itself — default for everything else).
+     */
+    reduced?: 'skip' | 'run';
+    /** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
+    run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
+}
+
+/**
+ * 5.1 — card & click effects 2.0, registered through `registerEffect()`.
+ * Card: `holo` (holographic foil following the pointer), `glare-sweep`,
+ * `book-open`, `card-fan`, `topple`, `float-tilt`. Click: `shockwave`,
+ * `ink-splash`, `star-burst`, `jelly-press`, `ring-ripple`, `emoji-rain`.
+ */
+
+declare const CARD_FX: EffectDefinition[];
+declare const CLICK_FX: EffectDefinition[];
+
+/** Helpers shared by the 5.x effect packs. */
+
+/** A fixed, pointer-transparent, aria-hidden layer for transient particles. */
+declare function fxLayer(): HTMLElement;
+
+/** The effect packs by version, in release order. */
+declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
+/** 5.1: card & click effects 2.0. */
+declare function registerCardClickEffects(): void;
+/** Register the built-ins and every pack (idempotent). */
+declare function registerAllEffects(): void;
+
+export { CARD_FX, CLICK_FX, EFFECT_PACKS, fxLayer, registerAllEffects, registerCardClickEffects };

package/dist/components/effects.d.ts

@@ -0,0 +1,66 @@
+type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
+type Cleanup = () => void;
+
+/**
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
+ * yours) is a plain object registered once and played the same way:
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
+ * already applies reduced motion, motion sensitivity, intensity and the
+ * animation budget.
+ */
+
+declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
+type EffectKind = (typeof EFFECT_KINDS)[number];
+interface EffectContext {
+    /** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
+    readonly reduced: boolean;
+    readonly sensitivity: MotionSensitivity;
+    /** The triggering event (pointer position for click effects), if any. */
+    readonly event?: Event;
+    /** `el.animate()` with the library's motion rules (may return `null`). */
+    animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+    /** Register teardown for long-running effects (loops, listeners). */
+    onCleanup(fn: Cleanup): void;
+}
+interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
+    /** Unique, kebab-case. */
+    name: string;
+    kind: EffectKind;
+    /** One line for docs and the gallery. */
+    description?: string;
+    /** Option defaults (merged under the caller's options). */
+    defaults?: Partial<O>;
+    /**
+     * Under reduced motion: `'skip'` (do nothing — default for loop, background
+     * and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
+     * effect degrades itself — default for everything else).
+     */
+    reduced?: 'skip' | 'run';
+    /** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
+    run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
+}
+
+/**
+ * 5.1 — card & click effects 2.0, registered through `registerEffect()`.
+ * Card: `holo` (holographic foil following the pointer), `glare-sweep`,
+ * `book-open`, `card-fan`, `topple`, `float-tilt`. Click: `shockwave`,
+ * `ink-splash`, `star-burst`, `jelly-press`, `ring-ripple`, `emoji-rain`.
+ */
+
+declare const CARD_FX: EffectDefinition[];
+declare const CLICK_FX: EffectDefinition[];
+
+/** Helpers shared by the 5.x effect packs. */
+
+/** A fixed, pointer-transparent, aria-hidden layer for transient particles. */
+declare function fxLayer(): HTMLElement;
+
+/** The effect packs by version, in release order. */
+declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
+/** 5.1: card & click effects 2.0. */
+declare function registerCardClickEffects(): void;
+/** Register the built-ins and every pack (idempotent). */
+declare function registerAllEffects(): void;
+
+export { CARD_FX, CLICK_FX, EFFECT_PACKS, fxLayer, registerAllEffects, registerCardClickEffects };