use-scroll-animate 6.4.0 → 6.5.0

package/CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [6.5.0] - 2026-10-08
+
+### Added
+- **4 new components (6.5)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`; the existing `<usa-timeline>`, `<usa-masonry>` and `<usa-cube>` are unchanged):
+  - `<usa-milestones>` — scroll-drawn timeline: the rail fills as you scroll, each milestone pops its dot and slides its card in when reached; `layout="alternate | left"` (one column below 640 px), `data-date` labels; `role="list"`; `usa:reach`.
+  - `<usa-masonry-flow>` — masonry grid with FLIP layout animation on resize, insert / remove, `filter()`, `shuffle()`, `sort()`; `min` column width, `gap`; `usa:layout`.
+  - `<usa-compare>` — before / after compare slider: drag, click-to-jump (eased), `hover` mode, keyboard (`role="slider"`), `orientation="vertical"`, `labels`, one-time `intro` sweep; `usa:change`.
+  - `<usa-cube-gallery>` — slides on adjacent faces of a 3D cube that turns between them; swipe, arrow keys, buttons, `autoplay` (pauses on hover / focus / off screen), `axis="x"`; `usa:change`.
+- **3D scene cards — `motionary/components/fx-3d`** (5 effects, `register3dEffects()`, also in `registerFx2()`): `depth-stack` (layers separate in Z and parallax with the tilt), `product-spin` (drag-to-rotate 360° viewer with inertia + idle turntable), `card-flip-3d` (thick card flip, faces swap `aria-hidden`), `origami` (panel-by-panel unfold), `orbit-camera` (scroll-linked camera orbit, `--usa-orbit` progress variable).
+- Showcase: 7 new gallery cards (shuffle / filter buttons for the masonry) with copyable code; Animation Store “Components 6.x” 21 → 28 entries (248 → 255 items).
+
+### Accessibility
+- Milestones are a list, the compare slider and cube gallery are keyboard operable with ARIA roles. Reduced motion: milestones are shown at once, the cube fades, masonry items jump, 3D tilt / spin / orbit / origami are off and the flip crossfades.
+
 ## [6.4.0] - 2026-10-08
 
 ### Added

package/dist/components/fx-3d.cjs

@@ -0,0 +1,236 @@
+'use strict';
+
+var registry = require('../chunks/registry-DehBVRDV.cjs');
+var shared = require('../chunks/shared-jkgRH-Hx.cjs');
+var components_fxLight = require('./fx-light.cjs');
+require('../chunks/base-BaQV-2ha.cjs');
+require('../chunks/generative-BHIj-NU0.cjs');
+
+const layers = (el) => {
+    const marked = Array.from(el.querySelectorAll('[data-depth]'));
+    return marked.length ? marked : Array.from(el.children);
+};
+const raf = (f) => (typeof requestAnimationFrame === 'function' ? requestAnimationFrame(f) : 0);
+const caf = (h) => {
+    if (h && typeof cancelAnimationFrame === 'function')
+        cancelAnimationFrame(h);
+};
+const DEPTH3_FX = [
+    {
+        name: 'depth-stack',
+        kind: 'card',
+        reduced: 'run',
+        description: 'The children (or `[data-depth]` layers) separate in Z and parallax as the card tilts toward the pointer (persistent; `tilt` deg, `depth` px between layers).',
+        defaults: { tilt: 14, depth: 28 },
+        run: (el, o, ctx) => {
+            const prev = [el.style.transform, el.style.transformStyle, el.style.transition];
+            el.style.transformStyle = 'preserve-3d';
+            el.style.transition = 'transform .25s ease-out';
+            const ls = layers(el);
+            const saved = ls.map((l) => [l.style.transform, l.style.transition]);
+            ls.forEach((l) => (l.style.transition = 'transform .3s ease-out'));
+            const stop = components_fxLight.trackPointer(el, ctx, (x, y, inside) => {
+                const rx = (0.5 - y) * 2 * o.tilt;
+                const ry = (x - 0.5) * 2 * o.tilt;
+                el.style.transform = ctx.reduced ? '' : inside ? `perspective(800px) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg)` : 'perspective(800px) rotateX(6deg) rotateY(-8deg)';
+                ls.forEach((l, i) => {
+                    const d = ctx.reduced ? 0 : Number(l.dataset.depth || i + 1) * o.depth * (inside ? 1 : 0.5);
+                    l.style.transform = `translateZ(${d.toFixed(1)}px)`;
+                });
+            }, 0.5, 0.5);
+            return () => {
+                stop();
+                [el.style.transform, el.style.transformStyle, el.style.transition] = prev;
+                ls.forEach((l, i) => ([l.style.transform, l.style.transition] = saved[i]));
+            };
+        },
+    },
+    {
+        name: 'product-spin',
+        kind: 'card',
+        description: 'A 360° product viewer: drag to turn the element in 3D with inertia; idles with a slow turntable spin (persistent; `idle` deg/s, `friction`, `tilt`).',
+        defaults: { idle: 18, friction: 0.94, tilt: -8 },
+        run: (el, o, ctx) => {
+            const prev = [el.style.transform, el.style.touchAction, el.style.cursor];
+            el.style.touchAction = 'pan-y';
+            el.style.cursor = 'grab';
+            let a = 0;
+            let v = 0;
+            let drag = false;
+            let lx = 0;
+            let h = 0;
+            let last = performance.now();
+            const paint = () => (el.style.transform = `perspective(900px) rotateX(${o.tilt}deg) rotateY(${a.toFixed(2)}deg)`);
+            paint();
+            const tick = (now) => {
+                const dt = Math.min(64, now - last) / 1000;
+                last = now;
+                if (!drag) {
+                    v *= o.friction;
+                    a += v * dt + (Math.abs(v) < 4 ? o.idle * dt : 0);
+                }
+                paint();
+                h = raf(tick);
+            };
+            h = raf(tick);
+            const down = (e) => {
+                drag = true;
+                lx = e.clientX;
+                v = 0;
+                el.style.cursor = 'grabbing';
+                el.setPointerCapture?.(e.pointerId);
+            };
+            const move = (e) => {
+                if (!drag)
+                    return;
+                const dx = e.clientX - lx;
+                lx = e.clientX;
+                a += dx * 0.6;
+                v = dx * 36;
+            };
+            const up = () => {
+                drag = false;
+                el.style.cursor = 'grab';
+            };
+            el.addEventListener('pointerdown', down);
+            el.addEventListener('pointermove', move);
+            el.addEventListener('pointerup', up);
+            el.addEventListener('pointercancel', up);
+            return () => {
+                caf(h);
+                el.removeEventListener('pointerdown', down);
+                el.removeEventListener('pointermove', move);
+                el.removeEventListener('pointerup', up);
+                el.removeEventListener('pointercancel', up);
+                [el.style.transform, el.style.touchAction, el.style.cursor] = prev;
+            };
+        },
+    },
+    {
+        name: 'card-flip-3d',
+        kind: 'click',
+        description: 'A thick card flips to its back face (second child) and back, showing its edge (`duration`, `axis` y | x). The faces swap `aria-hidden`.',
+        defaults: { duration: 800, axis: 'y', thickness: 6 },
+        run: (el, o, ctx) => {
+            const [front, back] = Array.from(el.children);
+            if (!front || !back)
+                return null;
+            const R = o.axis === 'x' ? 'rotateX' : 'rotateY';
+            if (!el.dataset.usaFlip) {
+                el.dataset.usaFlip = 'front';
+                el.style.display = 'grid';
+                el.style.transformStyle = 'preserve-3d';
+                for (const f of [front, back]) {
+                    f.style.gridArea = '1 / 1';
+                    f.style.backfaceVisibility = 'hidden';
+                }
+                back.setAttribute('aria-hidden', 'true');
+                back.style.transform = `${R}(180deg)`;
+            }
+            const toBack = el.dataset.usaFlip === 'front';
+            el.dataset.usaFlip = toBack ? 'back' : 'front';
+            front.setAttribute('aria-hidden', String(toBack));
+            back.setAttribute('aria-hidden', String(!toBack));
+            const from = toBack ? 0 : 180;
+            const to = toBack ? 180 : 0;
+            el.style.transform = `perspective(1000px) ${R}(${to}deg)`;
+            if (ctx.reduced)
+                return ctx.animate(toBack ? back : front, [{ opacity: 0 }, { opacity: 1 }], { duration: 200 });
+            return ctx.animate(el, [
+                { transform: `perspective(1000px) ${R}(${from}deg) scale(1)` },
+                { transform: `perspective(1000px) ${R}(${(from + to) / 2}deg) scale(1.08) translateZ(${o.thickness * 4}px)`, offset: 0.5 },
+                { transform: `perspective(1000px) ${R}(${to}deg) scale(1)` },
+            ], { duration: o.duration, easing: 'cubic-bezier(.45,.05,.25,1)' });
+        },
+    },
+    {
+        name: 'origami',
+        kind: 'enter',
+        description: 'The element unfolds panel by panel like folded paper (`panels`, `duration` per fold). Uses clipped copies during the fold.',
+        defaults: { panels: 4, duration: 420 },
+        reduced: 'skip',
+        run: (el, o, ctx) => {
+            if (el.dataset.usaOrigami)
+                return null;
+            el.dataset.usaOrigami = '1';
+            const n = Math.max(2, Math.min(8, Math.round(o.panels)));
+            if (getComputedStyle(el).position === 'static')
+                el.style.position = 'relative';
+            const prevVis = el.style.visibility;
+            const wrap = document.createElement('div');
+            wrap.setAttribute('aria-hidden', 'true');
+            wrap.style.cssText = 'position:absolute;inset:0;pointer-events:none;perspective:900px;visibility:visible';
+            const anims = [];
+            for (let i = 0; i < n; i++) {
+                const slice = el.cloneNode(true);
+                slice.removeAttribute('id');
+                slice.querySelectorAll('[id]').forEach((x) => x.removeAttribute('id'));
+                const top = (i / n) * 100;
+                const bottom = 100 - ((i + 1) / n) * 100;
+                slice.style.cssText += `;position:absolute;inset:0;margin:0;width:100%;height:100%;box-sizing:border-box;clip-path:inset(${top}% 0 ${bottom}% 0);transform-origin:50% ${top}%;visibility:visible`;
+                wrap.appendChild(slice);
+                const dir = i % 2 ? 1 : -1;
+                anims.push(ctx.animate(slice, [
+                    { transform: `rotateX(${dir * 92}deg)`, filter: 'brightness(.55)', opacity: 0 },
+                    { opacity: 1, offset: 0.15 },
+                    { transform: 'rotateX(0)', filter: 'brightness(1)', opacity: 1 },
+                ], { duration: o.duration, delay: i * o.duration * 0.55, easing: 'cubic-bezier(.3,.7,.3,1)', fill: 'backwards' }));
+            }
+            el.style.visibility = 'hidden';
+            el.appendChild(wrap);
+            const done = () => {
+                wrap.remove();
+                el.style.visibility = prevVis;
+                delete el.dataset.usaOrigami;
+            };
+            return shared.all(anims).then(done, done);
+        },
+    },
+    {
+        name: 'orbit-camera',
+        kind: 'scroll',
+        description: 'While the element scrolls through the viewport the camera orbits its 3D children (persistent; `range` deg of orbit, `tilt`, `depth` px between layers).',
+        defaults: { range: 70, tilt: 10, depth: 60 },
+        run: (el, o, ctx) => {
+            const prev = [el.style.transform, el.style.transformStyle];
+            const ls = layers(el);
+            el.style.transformStyle = 'preserve-3d';
+            if (!ctx.reduced)
+                ls.forEach((l, i) => (l.style.transform = `translateZ(${((i - (ls.length - 1) / 2) * o.depth).toFixed(0)}px)`));
+            let h = 0;
+            const paint = () => {
+                h = 0;
+                const r = el.getBoundingClientRect();
+                const vh = window.innerHeight || 800;
+                const p = Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height)));
+                el.style.setProperty('--usa-orbit', p.toFixed(3));
+                if (!ctx.reduced)
+                    el.style.transform = `perspective(1000px) rotateX(${o.tilt}deg) rotateY(${((p - 0.5) * o.range).toFixed(2)}deg)`;
+            };
+            paint();
+            const on = () => {
+                if (!h)
+                    h = raf(paint);
+            };
+            if (!ctx.reduced) {
+                window.addEventListener('scroll', on, { passive: true });
+                window.addEventListener('resize', on);
+            }
+            return () => {
+                caf(h);
+                window.removeEventListener('scroll', on);
+                window.removeEventListener('resize', on);
+                [el.style.transform, el.style.transformStyle] = prev;
+                ls.forEach((l) => (l.style.transform = ''));
+            };
+        },
+    },
+];
+/** Register the 6.5 3D pack (idempotent). */
+function register3dEffects() {
+    registry.registerEffects(DEPTH3_FX);
+}
+
+exports.DEPTH3_FX = DEPTH3_FX;
+exports.register3dEffects = register3dEffects;
+//# sourceMappingURL=fx-3d.cjs.map

package/dist/components/fx-3d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fx-3d.cjs","sources":["../../src/components/fx2/depth3.ts"],"sourcesContent":["/**\n * 6.5 — 3D scene cards (`motionary/components/fx-3d`), registered through\n * `registerEffect()`:\n *\n * - `depth-stack` (card, persistent) — the children (or `[data-depth]`\n *   layers) separate in Z and parallax against each other as the card tilts\n *   toward the pointer.\n * - `product-spin` (card, persistent) — a 360° product viewer: drag to turn\n *   the element in 3D with inertia, idles with a slow turntable spin.\n * - `card-flip-3d` (click) — a thick card flips to its back face (second\n *   child) with an edge that shows its depth.\n * - `origami` (enter) — the element unfolds panel by panel like folded paper.\n * - `orbit-camera` (scroll, persistent) — while the element scrolls through\n *   the viewport the camera orbits its 3D children.\n *\n * Reduced motion: no tilt, spin, orbit or fold; the flip swaps faces with a\n * crossfade.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\nimport { all } from '../effects/shared';\nimport { trackPointer } from './light';\n\nconst layers = (el: HTMLElement): HTMLElement[] => {\n  const marked = Array.from(el.querySelectorAll<HTMLElement>('[data-depth]'));\n  return marked.length ? marked : (Array.from(el.children) as HTMLElement[]);\n};\n\nconst raf = (f: FrameRequestCallback): number => (typeof requestAnimationFrame === 'function' ? requestAnimationFrame(f) : 0);\nconst caf = (h: number): void => {\n  if (h && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(h);\n};\n\nexport const DEPTH3_FX: EffectDefinition[] = [\n  {\n    name: 'depth-stack',\n    kind: 'card',\n    reduced: 'run',\n    description: 'The children (or `[data-depth]` layers) separate in Z and parallax as the card tilts toward the pointer (persistent; `tilt` deg, `depth` px between layers).',\n    defaults: { tilt: 14, depth: 28 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const prev = [el.style.transform, el.style.transformStyle, el.style.transition];\n      el.style.transformStyle = 'preserve-3d';\n      el.style.transition = 'transform .25s ease-out';\n      const ls = layers(el);\n      const saved = ls.map((l) => [l.style.transform, l.style.transition] as const);\n      ls.forEach((l) => (l.style.transition = 'transform .3s ease-out'));\n      const stop = trackPointer(el, ctx, (x, y, inside) => {\n        const rx = (0.5 - y) * 2 * o.tilt;\n        const ry = (x - 0.5) * 2 * o.tilt;\n        el.style.transform = ctx.reduced ? '' : inside ? `perspective(800px) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg)` : 'perspective(800px) rotateX(6deg) rotateY(-8deg)';\n        ls.forEach((l, i) => {\n          const d = ctx.reduced ? 0 : Number(l.dataset.depth || i + 1) * o.depth * (inside ? 1 : 0.5);\n          l.style.transform = `translateZ(${d.toFixed(1)}px)`;\n        });\n      }, 0.5, 0.5);\n      return () => {\n        stop();\n        [el.style.transform, el.style.transformStyle, el.style.transition] = prev;\n        ls.forEach((l, i) => ([l.style.transform, l.style.transition] = saved[i]));\n      };\n    },\n  },\n  {\n    name: 'product-spin',\n    kind: 'card',\n    description: 'A 360° product viewer: drag to turn the element in 3D with inertia; idles with a slow turntable spin (persistent; `idle` deg/s, `friction`, `tilt`).',\n    defaults: { idle: 18, friction: 0.94, tilt: -8 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const prev = [el.style.transform, el.style.touchAction, el.style.cursor];\n      el.style.touchAction = 'pan-y';\n      el.style.cursor = 'grab';\n      let a = 0;\n      let v = 0;\n      let drag = false;\n      let lx = 0;\n      let h = 0;\n      let last = performance.now();\n      const paint = () => (el.style.transform = `perspective(900px) rotateX(${o.tilt}deg) rotateY(${a.toFixed(2)}deg)`);\n      paint();\n      const tick = (now: number) => {\n        const dt = Math.min(64, now - last) / 1000;\n        last = now;\n        if (!drag) {\n          v *= o.friction;\n          a += v * dt + (Math.abs(v) < 4 ? o.idle * dt : 0);\n        }\n        paint();\n        h = raf(tick);\n      };\n      h = raf(tick);\n      const down = (e: PointerEvent) => {\n        drag = true;\n        lx = e.clientX;\n        v = 0;\n        el.style.cursor = 'grabbing';\n        el.setPointerCapture?.(e.pointerId);\n      };\n      const move = (e: PointerEvent) => {\n        if (!drag) return;\n        const dx = e.clientX - lx;\n        lx = e.clientX;\n        a += dx * 0.6;\n        v = dx * 36;\n      };\n      const up = () => {\n        drag = false;\n        el.style.cursor = 'grab';\n      };\n      el.addEventListener('pointerdown', down);\n      el.addEventListener('pointermove', move);\n      el.addEventListener('pointerup', up);\n      el.addEventListener('pointercancel', up);\n      return () => {\n        caf(h);\n        el.removeEventListener('pointerdown', down);\n        el.removeEventListener('pointermove', move);\n        el.removeEventListener('pointerup', up);\n        el.removeEventListener('pointercancel', up);\n        [el.style.transform, el.style.touchAction, el.style.cursor] = prev;\n      };\n    },\n  },\n  {\n    name: 'card-flip-3d',\n    kind: 'click',\n    description: 'A thick card flips to its back face (second child) and back, showing its edge (`duration`, `axis` y | x). The faces swap `aria-hidden`.',\n    defaults: { duration: 800, axis: 'y', thickness: 6 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const [front, back] = Array.from(el.children) as HTMLElement[];\n      if (!front || !back) return null;\n      const R = o.axis === 'x' ? 'rotateX' : 'rotateY';\n      if (!el.dataset.usaFlip) {\n        el.dataset.usaFlip = 'front';\n        el.style.display = 'grid';\n        el.style.transformStyle = 'preserve-3d';\n        for (const f of [front, back]) {\n          f.style.gridArea = '1 / 1';\n          f.style.backfaceVisibility = 'hidden';\n        }\n        back.setAttribute('aria-hidden', 'true');\n        back.style.transform = `${R}(180deg)`;\n      }\n      const toBack = el.dataset.usaFlip === 'front';\n      el.dataset.usaFlip = toBack ? 'back' : 'front';\n      front.setAttribute('aria-hidden', String(toBack));\n      back.setAttribute('aria-hidden', String(!toBack));\n      const from = toBack ? 0 : 180;\n      const to = toBack ? 180 : 0;\n      el.style.transform = `perspective(1000px) ${R}(${to}deg)`;\n      if (ctx.reduced) return ctx.animate(toBack ? back : front, [{ opacity: 0 }, { opacity: 1 }], { duration: 200 });\n      return ctx.animate(el, [\n        { transform: `perspective(1000px) ${R}(${from}deg) scale(1)` },\n        { transform: `perspective(1000px) ${R}(${(from + to) / 2}deg) scale(1.08) translateZ(${o.thickness * 4}px)`, offset: 0.5 },\n        { transform: `perspective(1000px) ${R}(${to}deg) scale(1)` },\n      ], { duration: o.duration, easing: 'cubic-bezier(.45,.05,.25,1)' });\n    },\n  },\n  {\n    name: 'origami',\n    kind: 'enter',\n    description: 'The element unfolds panel by panel like folded paper (`panels`, `duration` per fold). Uses clipped copies during the fold.',\n    defaults: { panels: 4, duration: 420 },\n    reduced: 'skip',\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (el.dataset.usaOrigami) return null;\n      el.dataset.usaOrigami = '1';\n      const n = Math.max(2, Math.min(8, Math.round(o.panels)));\n      if (getComputedStyle(el).position === 'static') el.style.position = 'relative';\n      const prevVis = el.style.visibility;\n      const wrap = document.createElement('div');\n      wrap.setAttribute('aria-hidden', 'true');\n      wrap.style.cssText = 'position:absolute;inset:0;pointer-events:none;perspective:900px;visibility:visible';\n      const anims: (Animation | null)[] = [];\n      for (let i = 0; i < n; i++) {\n        const slice = el.cloneNode(true) as HTMLElement;\n        slice.removeAttribute('id');\n        slice.querySelectorAll('[id]').forEach((x) => x.removeAttribute('id'));\n        const top = (i / n) * 100;\n        const bottom = 100 - ((i + 1) / n) * 100;\n        slice.style.cssText += `;position:absolute;inset:0;margin:0;width:100%;height:100%;box-sizing:border-box;clip-path:inset(${top}% 0 ${bottom}% 0);transform-origin:50% ${top}%;visibility:visible`;\n        wrap.appendChild(slice);\n        const dir = i % 2 ? 1 : -1;\n        anims.push(ctx.animate(slice, [\n          { transform: `rotateX(${dir * 92}deg)`, filter: 'brightness(.55)', opacity: 0 },\n          { opacity: 1, offset: 0.15 },\n          { transform: 'rotateX(0)', filter: 'brightness(1)', opacity: 1 },\n        ], { duration: o.duration, delay: i * o.duration * 0.55, easing: 'cubic-bezier(.3,.7,.3,1)', fill: 'backwards' }));\n      }\n      el.style.visibility = 'hidden';\n      el.appendChild(wrap);\n      const done = () => {\n        wrap.remove();\n        el.style.visibility = prevVis;\n        delete el.dataset.usaOrigami;\n      };\n      return all(anims).then(done, done);\n    },\n  },\n  {\n    name: 'orbit-camera',\n    kind: 'scroll',\n    description: 'While the element scrolls through the viewport the camera orbits its 3D children (persistent; `range` deg of orbit, `tilt`, `depth` px between layers).',\n    defaults: { range: 70, tilt: 10, depth: 60 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const prev = [el.style.transform, el.style.transformStyle];\n      const ls = layers(el);\n      el.style.transformStyle = 'preserve-3d';\n      if (!ctx.reduced) ls.forEach((l, i) => (l.style.transform = `translateZ(${((i - (ls.length - 1) / 2) * o.depth).toFixed(0)}px)`));\n      let h = 0;\n      const paint = () => {\n        h = 0;\n        const r = el.getBoundingClientRect();\n        const vh = window.innerHeight || 800;\n        const p = Math.min(1, Math.max(0, (vh - r.top) / (vh + r.height)));\n        el.style.setProperty('--usa-orbit', p.toFixed(3));\n        if (!ctx.reduced) el.style.transform = `perspective(1000px) rotateX(${o.tilt}deg) rotateY(${((p - 0.5) * o.range).toFixed(2)}deg)`;\n      };\n      paint();\n      const on = () => {\n        if (!h) h = raf(paint);\n      };\n      if (!ctx.reduced) {\n        window.addEventListener('scroll', on, { passive: true });\n        window.addEventListener('resize', on);\n      }\n      return () => {\n        caf(h);\n        window.removeEventListener('scroll', on);\n        window.removeEventListener('resize', on);\n        [el.style.transform, el.style.transformStyle] = prev;\n        ls.forEach((l) => (l.style.transform = ''));\n      };\n    },\n  },\n];\n\n/** Register the 6.5 3D pack (idempotent). */\nexport function register3dEffects(): void {\n  registerEffects(DEPTH3_FX);\n}\n"],"names":["trackPointer","all","registerEffects"],"mappings":"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"}

package/dist/components/fx-3d.d.cts

@@ -0,0 +1,67 @@
+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>;
+}
+
+/**
+ * 6.5 — 3D scene cards (`motionary/components/fx-3d`), registered through
+ * `registerEffect()`:
+ *
+ * - `depth-stack` (card, persistent) — the children (or `[data-depth]`
+ *   layers) separate in Z and parallax against each other as the card tilts
+ *   toward the pointer.
+ * - `product-spin` (card, persistent) — a 360° product viewer: drag to turn
+ *   the element in 3D with inertia, idles with a slow turntable spin.
+ * - `card-flip-3d` (click) — a thick card flips to its back face (second
+ *   child) with an edge that shows its depth.
+ * - `origami` (enter) — the element unfolds panel by panel like folded paper.
+ * - `orbit-camera` (scroll, persistent) — while the element scrolls through
+ *   the viewport the camera orbits its 3D children.
+ *
+ * Reduced motion: no tilt, spin, orbit or fold; the flip swaps faces with a
+ * crossfade.
+ */
+
+declare const DEPTH3_FX: EffectDefinition[];
+/** Register the 6.5 3D pack (idempotent). */
+declare function register3dEffects(): void;
+
+export { DEPTH3_FX, register3dEffects };

package/dist/components/fx-3d.d.ts

@@ -0,0 +1,67 @@
+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>;
+}
+
+/**
+ * 6.5 — 3D scene cards (`motionary/components/fx-3d`), registered through
+ * `registerEffect()`:
+ *
+ * - `depth-stack` (card, persistent) — the children (or `[data-depth]`
+ *   layers) separate in Z and parallax against each other as the card tilts
+ *   toward the pointer.
+ * - `product-spin` (card, persistent) — a 360° product viewer: drag to turn
+ *   the element in 3D with inertia, idles with a slow turntable spin.
+ * - `card-flip-3d` (click) — a thick card flips to its back face (second
+ *   child) with an edge that shows its depth.
+ * - `origami` (enter) — the element unfolds panel by panel like folded paper.
+ * - `orbit-camera` (scroll, persistent) — while the element scrolls through
+ *   the viewport the camera orbits its 3D children.
+ *
+ * Reduced motion: no tilt, spin, orbit or fold; the flip swaps faces with a
+ * crossfade.
+ */
+
+declare const DEPTH3_FX: EffectDefinition[];
+/** Register the 6.5 3D pack (idempotent). */
+declare function register3dEffects(): void;
+
+export { DEPTH3_FX, register3dEffects };