use-scroll-animate 3.7.0 → 3.9.0

package/dist/components/packs.cjs

@@ -0,0 +1,194 @@
+'use strict';
+
+var base = require('../chunks/base-Dm6ee5ug.cjs');
+
+const anim = (el, frames, o) => {
+    if (typeof el.animate !== 'function')
+        return null;
+    const k = base.motionScale();
+    return el.animate(frames, { ...o, duration: (o.duration ?? 400) * k, delay: (o.delay ?? 0) * k });
+};
+const on = (el, type, fn) => {
+    el.addEventListener(type, fn);
+    return () => el.removeEventListener(type, fn);
+};
+const io = (el, cb) => {
+    if (typeof IntersectionObserver === 'undefined')
+        return void cb();
+    const o = new IntersectionObserver((es) => es.some((e) => e.isIntersecting) && (o.disconnect(), cb()), { threshold: 0.15 });
+    o.observe(el);
+    return () => o.disconnect();
+};
+/** Count `el`'s number up from 0 when it enters the view (keeps prefix / suffix / decimals). */
+function countUp(el, duration = 1200) {
+    const text = el.textContent || '';
+    const m = /(-?[\d,]*\.?\d+)/.exec(text);
+    if (!m || base.prefersReducedMotion())
+        return () => { };
+    const target = Number(m[1].replace(/,/g, ''));
+    const dec = (m[1].split('.')[1] || '').length;
+    const fmt = (v) => text.replace(m[1], v.toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec }));
+    el.setAttribute('aria-label', text.trim());
+    el.textContent = fmt(0);
+    let stop = false;
+    const off = io(el, () => {
+        const t0 = base.now();
+        const d = duration * base.motionScale() || 1;
+        const step = () => {
+            if (stop)
+                return;
+            const p = base.clamp((base.now() - t0) / d, 0, 1);
+            el.textContent = fmt(target * (1 - Math.pow(1 - p, 3)));
+            if (p < 1)
+                base.raf(step);
+        };
+        base.raf(step);
+    });
+    return () => {
+        stop = true;
+        off();
+        el.textContent = text;
+    };
+}
+/**
+ * Fly a copy of `from` (e.g. a product image) into `to` (the cart icon) along
+ * an arc, then bump the target. Resolves when it lands. Instant under
+ * reduced motion (only the bump's state change, no flight).
+ */
+async function flyToCart(from, to, o = {}) {
+    if (base.prefersReducedMotion() || typeof document === 'undefined')
+        return;
+    const a = from.getBoundingClientRect();
+    const b = to.getBoundingClientRect();
+    const ghost = from.cloneNode(true);
+    ghost.setAttribute('aria-hidden', 'true');
+    Object.assign(ghost.style, { position: 'fixed', left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, height: `${a.height}px`, margin: '0', zIndex: '2147483000', pointerEvents: 'none' });
+    document.body.appendChild(ghost);
+    const dx = b.left + b.width / 2 - (a.left + a.width / 2);
+    const dy = b.top + b.height / 2 - (a.top + a.height / 2);
+    const f = anim(ghost, [
+        { transform: 'translate(0, 0) scale(1)', opacity: 1 },
+        { transform: `translate(${dx * 0.5}px, ${dy * 0.5 - 80}px) scale(0.6)`, opacity: 0.9, offset: 0.5 },
+        { transform: `translate(${dx}px, ${dy}px) scale(0.15)`, opacity: 0.4 },
+    ], { duration: o.duration ?? 700, easing: 'cubic-bezier(0.5, 0, 0.5, 1)' });
+    await f?.finished.catch(() => undefined);
+    ghost.remove();
+    anim(to, [{ transform: 'scale(1)' }, { transform: 'scale(1.3)' }, { transform: 'scale(1)' }], { duration: 380, easing: base.EASE_SPRING });
+}
+const PRIMITIVES = {
+    reveal: (el, c) => {
+        if (c.reduced)
+            return;
+        el.style.opacity = '0';
+        const off = io(el, () => {
+            el.style.opacity = '';
+            anim(el, [{ opacity: 0, transform: 'translateY(24px)' }, { opacity: 1, transform: 'none' }], { duration: 600, delay: Math.min(c.index, 8) * 70, easing: base.EASE_OUT, fill: 'backwards' });
+        });
+        return () => (off(), (el.style.opacity = ''));
+    },
+    lift: (el, c) => {
+        if (c.reduced)
+            return;
+        const a = on(el, 'pointerenter', () => anim(el, [{ transform: 'none' }, { transform: 'translateY(-6px) scale(1.02)' }], { duration: 220, easing: base.EASE_OUT, fill: 'forwards' }));
+        const b = on(el, 'pointerleave', () => anim(el, [{ transform: 'translateY(-6px) scale(1.02)' }, { transform: 'none' }], { duration: 260, easing: base.EASE_OUT, fill: 'forwards' }));
+        return () => (a(), b());
+    },
+    press: (el, c) => (c.reduced ? undefined : on(el, 'pointerdown', () => anim(el, [{ transform: 'scale(1)' }, { transform: 'scale(0.94)' }, { transform: 'scale(1)' }], { duration: 260, easing: base.EASE_SPRING }))),
+    'count-up': (el) => countUp(el),
+    pulse: (el, c) => {
+        if (c.reduced)
+            return;
+        const a = anim(el, [{ boxShadow: '0 0 0 0 rgba(124, 92, 255, 0.55)' }, { boxShadow: '0 0 0 14px rgba(124, 92, 255, 0)' }], { duration: 1600, iterations: Infinity });
+        return () => a?.cancel();
+    },
+    float: (el, c) => {
+        if (c.reduced)
+            return;
+        const a = anim(el, [{ transform: 'translateY(0)' }, { transform: 'translateY(-8px)' }, { transform: 'translateY(0)' }], { duration: 3000, delay: c.index * 300, iterations: Infinity, easing: 'ease-in-out' });
+        return () => a?.cancel();
+    },
+    shake: (el, c) => (c.reduced ? undefined : on(el, 'click', () => anim(el, [0, -8, 8, -6, 6, -3, 0].map((x) => ({ transform: `translateX(${x}px)` })), { duration: 420 }))),
+    bump: (el, c) => (c.reduced ? undefined : on(el, 'usa:bump', () => anim(el, [{ transform: 'scale(1)' }, { transform: 'scale(1.25)' }, { transform: 'scale(1)' }], { duration: 360, easing: base.EASE_SPRING }))),
+    'fly-to-cart': (el, c) => on(el, 'click', () => {
+        const cart = c.root.querySelector('[data-role="cart"]') || document.querySelector('[data-role="cart"]');
+        const item = el.closest('[data-role="product"]')?.querySelector('img, [data-role="thumb"]') || el;
+        if (cart)
+            void flyToCart(item, cart).then(() => cart.dispatchEvent(new CustomEvent('usa:added', { bubbles: true })));
+    }),
+};
+/** The five effect packs: `data-role` → primitives. */
+const PACKS = {
+    ecommerce: { product: ['reveal', 'lift'], 'add-to-cart': ['press', 'fly-to-cart'], cart: ['bump'], price: ['count-up'], badge: ['pulse'] },
+    portfolio: { project: ['reveal', 'lift'], heading: ['reveal'], stat: ['count-up'], contact: ['press', 'pulse'] },
+    dashboard: { card: ['reveal'], stat: ['count-up'], alert: ['pulse'], action: ['press'] },
+    game: { button: ['press'], score: ['count-up', 'bump'], item: ['float'], hit: ['shake'], reward: ['pulse'] },
+    landing: { hero: ['reveal'], feature: ['reveal', 'lift'], cta: ['press', 'pulse'], logo: ['float'], stat: ['count-up'] },
+};
+/**
+ * Apply an effect pack to `root`: every descendant with a `data-role` the
+ * pack knows gets its effects (staggered by index). Returns an undo function.
+ * Reduced motion: only non-motion behaviour (e.g. the cart event) remains.
+ *
+ * @example
+ * applyPack('ecommerce', document.querySelector('main'));
+ * // <article data-role="product">… <button data-role="add-to-cart"> … <a data-role="cart">
+ */
+function applyPack(name, root = document) {
+    const pack = PACKS[name];
+    if (!pack || typeof document === 'undefined')
+        return () => { };
+    const r = root.documentElement ? root.body : root;
+    const reduced = base.prefersReducedMotion();
+    const cleanups = [];
+    for (const [role, fx] of Object.entries(pack)) {
+        r.querySelectorAll(`[data-role="${role}"]`).forEach((el, index) => {
+            for (const f of fx) {
+                const c = PRIMITIVES[f]?.(el, { root: r, index, reduced });
+                if (c)
+                    cleanups.push(c);
+            }
+        });
+    }
+    return () => cleanups.splice(0).forEach((c) => c());
+}
+/** Primitive names a pack uses (for docs / tooling). */
+const PACK_PRIMITIVES = Object.keys(PRIMITIVES);
+
+function definePack(tag = 'usa-pack') {
+    return base.defineElement(tag, (Base) => class UsaPack extends Base {
+        static get observedAttributes() {
+            return ['name'];
+        }
+        get roles() {
+            return Object.keys(PACKS[this.str('name', 'landing')] || {});
+        }
+        mount() {
+            var _a;
+            (_a = this.style).display || (_a.display = 'block');
+            this.onCleanup(applyPack(this.str('name', 'landing'), this));
+        }
+    });
+}
+
+/**
+ * use-scroll-animate/components/packs — effect packs (v3.9).
+ * Ready-made motion for e-commerce, portfolio, dashboard, game UI and
+ * landing pages: mark elements with `data-role` and apply a pack with
+ * `<usa-pack name="…">` or `applyPack(name, root)`. Includes `flyToCart()`
+ * and `countUp()`.
+ */
+/** Register every component of this category under its default tag. */
+function definePacksComponents() {
+    definePack();
+}
+
+exports.configureComponents = base.configureComponents;
+exports.prefersReducedMotion = base.prefersReducedMotion;
+exports.PACKS = PACKS;
+exports.PACK_PRIMITIVES = PACK_PRIMITIVES;
+exports.applyPack = applyPack;
+exports.countUp = countUp;
+exports.definePack = definePack;
+exports.definePacksComponents = definePacksComponents;
+exports.flyToCart = flyToCart;
+//# sourceMappingURL=packs.cjs.map

package/dist/components/packs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"packs.cjs","sources":["../../src/components/packs/core.ts","../../src/components/packs/pack-el.ts","../../src/components/packs/index.ts"],"sourcesContent":["import { prefersReducedMotion, motionScale, EASE_OUT, EASE_SPRING, raf, now, clamp } from '../base';\n\ntype Cleanup = () => void;\n/** A pack primitive: wire one element, return a cleanup. */\ntype Effect = (el: HTMLElement, ctx: PackContext) => Cleanup | void;\n\nexport interface PackContext {\n  root: HTMLElement;\n  /** Index of the element among those with the same role (for staggering). */\n  index: number;\n  reduced: boolean;\n}\n\nconst anim = (el: Element, frames: Keyframe[], o: KeyframeAnimationOptions): Animation | null => {\n  if (typeof (el as HTMLElement).animate !== 'function') return null;\n  const k = motionScale();\n  return (el as HTMLElement).animate(frames, { ...o, duration: ((o.duration as number) ?? 400) * k, delay: (o.delay ?? 0) * k });\n};\nconst on = (el: EventTarget, type: string, fn: (e: any) => void): Cleanup => {\n  el.addEventListener(type, fn);\n  return () => el.removeEventListener(type, fn);\n};\nconst io = (el: Element, cb: () => void): Cleanup => {\n  if (typeof IntersectionObserver === 'undefined') return void cb() as unknown as Cleanup;\n  const o = new IntersectionObserver((es) => es.some((e) => e.isIntersecting) && (o.disconnect(), cb()), { threshold: 0.15 });\n  o.observe(el);\n  return () => o.disconnect();\n};\n\n/** Count `el`'s number up from 0 when it enters the view (keeps prefix / suffix / decimals). */\nexport function countUp(el: HTMLElement, duration = 1200): Cleanup {\n  const text = el.textContent || '';\n  const m = /(-?[\\d,]*\\.?\\d+)/.exec(text);\n  if (!m || prefersReducedMotion()) return () => {};\n  const target = Number(m[1].replace(/,/g, ''));\n  const dec = (m[1].split('.')[1] || '').length;\n  const fmt = (v: number) => text.replace(m[1], v.toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec }));\n  el.setAttribute('aria-label', text.trim());\n  el.textContent = fmt(0);\n  let stop = false;\n  const off = io(el, () => {\n    const t0 = now();\n    const d = duration * motionScale() || 1;\n    const step = () => {\n      if (stop) return;\n      const p = clamp((now() - t0) / d, 0, 1);\n      el.textContent = fmt(target * (1 - Math.pow(1 - p, 3)));\n      if (p < 1) raf(step);\n    };\n    raf(step);\n  });\n  return () => {\n    stop = true;\n    off();\n    el.textContent = text;\n  };\n}\n\n/**\n * Fly a copy of `from` (e.g. a product image) into `to` (the cart icon) along\n * an arc, then bump the target. Resolves when it lands. Instant under\n * reduced motion (only the bump's state change, no flight).\n */\nexport async function flyToCart(from: Element, to: Element, o: { duration?: number } = {}): Promise<void> {\n  if (prefersReducedMotion() || typeof document === 'undefined') return;\n  const a = from.getBoundingClientRect();\n  const b = to.getBoundingClientRect();\n  const ghost = from.cloneNode(true) as HTMLElement;\n  ghost.setAttribute('aria-hidden', 'true');\n  Object.assign(ghost.style, { position: 'fixed', left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, height: `${a.height}px`, margin: '0', zIndex: '2147483000', pointerEvents: 'none' });\n  document.body.appendChild(ghost);\n  const dx = b.left + b.width / 2 - (a.left + a.width / 2);\n  const dy = b.top + b.height / 2 - (a.top + a.height / 2);\n  const f = anim(ghost, [\n    { transform: 'translate(0, 0) scale(1)', opacity: 1 },\n    { transform: `translate(${dx * 0.5}px, ${dy * 0.5 - 80}px) scale(0.6)`, opacity: 0.9, offset: 0.5 },\n    { transform: `translate(${dx}px, ${dy}px) scale(0.15)`, opacity: 0.4 },\n  ], { duration: o.duration ?? 700, easing: 'cubic-bezier(0.5, 0, 0.5, 1)' });\n  await f?.finished.catch(() => undefined);\n  ghost.remove();\n  anim(to, [{ transform: 'scale(1)' }, { transform: 'scale(1.3)' }, { transform: 'scale(1)' }], { duration: 380, easing: EASE_SPRING });\n}\n\nconst PRIMITIVES: Record<string, Effect> = {\n  reveal: (el, c) => {\n    if (c.reduced) return;\n    el.style.opacity = '0';\n    const off = io(el, () => {\n      el.style.opacity = '';\n      anim(el, [{ opacity: 0, transform: 'translateY(24px)' }, { opacity: 1, transform: 'none' }], { duration: 600, delay: Math.min(c.index, 8) * 70, easing: EASE_OUT, fill: 'backwards' });\n    });\n    return () => (off(), (el.style.opacity = ''));\n  },\n  lift: (el, c) => {\n    if (c.reduced) return;\n    const a = on(el, 'pointerenter', () => anim(el, [{ transform: 'none' }, { transform: 'translateY(-6px) scale(1.02)' }], { duration: 220, easing: EASE_OUT, fill: 'forwards' }));\n    const b = on(el, 'pointerleave', () => anim(el, [{ transform: 'translateY(-6px) scale(1.02)' }, { transform: 'none' }], { duration: 260, easing: EASE_OUT, fill: 'forwards' }));\n    return () => (a(), b());\n  },\n  press: (el, c) => (c.reduced ? undefined : on(el, 'pointerdown', () => anim(el, [{ transform: 'scale(1)' }, { transform: 'scale(0.94)' }, { transform: 'scale(1)' }], { duration: 260, easing: EASE_SPRING }))),\n  'count-up': (el) => countUp(el),\n  pulse: (el, c) => {\n    if (c.reduced) return;\n    const a = anim(el, [{ boxShadow: '0 0 0 0 rgba(124, 92, 255, 0.55)' }, { boxShadow: '0 0 0 14px rgba(124, 92, 255, 0)' }], { duration: 1600, iterations: Infinity });\n    return () => a?.cancel();\n  },\n  float: (el, c) => {\n    if (c.reduced) return;\n    const a = anim(el, [{ transform: 'translateY(0)' }, { transform: 'translateY(-8px)' }, { transform: 'translateY(0)' }], { duration: 3000, delay: c.index * 300, iterations: Infinity, easing: 'ease-in-out' });\n    return () => a?.cancel();\n  },\n  shake: (el, c) => (c.reduced ? undefined : on(el, 'click', () => anim(el, [0, -8, 8, -6, 6, -3, 0].map((x) => ({ transform: `translateX(${x}px)` })), { duration: 420 }))),\n  bump: (el, c) => (c.reduced ? undefined : on(el, 'usa:bump', () => anim(el, [{ transform: 'scale(1)' }, { transform: 'scale(1.25)' }, { transform: 'scale(1)' }], { duration: 360, easing: EASE_SPRING }))),\n  'fly-to-cart': (el, c) =>\n    on(el, 'click', () => {\n      const cart = c.root.querySelector('[data-role=\"cart\"]') || document.querySelector('[data-role=\"cart\"]');\n      const item = el.closest('[data-role=\"product\"]')?.querySelector('img, [data-role=\"thumb\"]') || el;\n      if (cart) void flyToCart(item, cart).then(() => cart.dispatchEvent(new CustomEvent('usa:added', { bubbles: true })));\n    }),\n};\n\n/** The five effect packs: `data-role` → primitives. */\nexport const PACKS: Record<string, Record<string, string[]>> = {\n  ecommerce: { product: ['reveal', 'lift'], 'add-to-cart': ['press', 'fly-to-cart'], cart: ['bump'], price: ['count-up'], badge: ['pulse'] },\n  portfolio: { project: ['reveal', 'lift'], heading: ['reveal'], stat: ['count-up'], contact: ['press', 'pulse'] },\n  dashboard: { card: ['reveal'], stat: ['count-up'], alert: ['pulse'], action: ['press'] },\n  game: { button: ['press'], score: ['count-up', 'bump'], item: ['float'], hit: ['shake'], reward: ['pulse'] },\n  landing: { hero: ['reveal'], feature: ['reveal', 'lift'], cta: ['press', 'pulse'], logo: ['float'], stat: ['count-up'] },\n};\n\nexport type PackName = keyof typeof PACKS;\n\n/**\n * Apply an effect pack to `root`: every descendant with a `data-role` the\n * pack knows gets its effects (staggered by index). Returns an undo function.\n * Reduced motion: only non-motion behaviour (e.g. the cart event) remains.\n *\n * @example\n * applyPack('ecommerce', document.querySelector('main'));\n * // <article data-role=\"product\">… <button data-role=\"add-to-cart\"> … <a data-role=\"cart\">\n */\nexport function applyPack(name: PackName | string, root: HTMLElement | Document = document): Cleanup {\n  const pack = PACKS[name];\n  if (!pack || typeof document === 'undefined') return () => {};\n  const r = (root as Document).documentElement ? (root as Document).body : (root as HTMLElement);\n  const reduced = prefersReducedMotion();\n  const cleanups: Cleanup[] = [];\n  for (const [role, fx] of Object.entries(pack)) {\n    r.querySelectorAll<HTMLElement>(`[data-role=\"${role}\"]`).forEach((el, index) => {\n      for (const f of fx) {\n        const c = PRIMITIVES[f]?.(el, { root: r, index, reduced });\n        if (c) cleanups.push(c);\n      }\n    });\n  }\n  return () => cleanups.splice(0).forEach((c) => c());\n}\n\n/** Primitive names a pack uses (for docs / tooling). */\nexport const PACK_PRIMITIVES = Object.keys(PRIMITIVES);\n","import { defineElement, type UsaElement } from '../base';\nimport { applyPack, PACKS } from './core';\n\n/**\n * `<usa-pack name=\"ecommerce\">` — applies an effect pack (`ecommerce` ·\n * `portfolio` · `dashboard` · `game` · `landing`) to its subtree:\n * descendants opt in with `data-role` (see `PACKS`). Re-applies when\n * `name` changes; undone on disconnect.\n */\nexport interface UsaPackElement extends UsaElement {\n  readonly roles: string[];\n}\n\nexport function definePack(tag = 'usa-pack'): CustomElementConstructor | undefined {\n  return defineElement(tag, (Base) =>\n    class UsaPack extends Base {\n      static get observedAttributes(): string[] {\n        return ['name'];\n      }\n      get roles(): string[] {\n        return Object.keys(PACKS[this.str('name', 'landing')] || {});\n      }\n      mount(): void {\n        this.style.display ||= 'block';\n        this.onCleanup(applyPack(this.str('name', 'landing'), this));\n      }\n    }\n  );\n}\n","/**\n * use-scroll-animate/components/packs — effect packs (v3.9).\n * Ready-made motion for e-commerce, portfolio, dashboard, game UI and\n * landing pages: mark elements with `data-role` and apply a pack with\n * `<usa-pack name=\"…\">` or `applyPack(name, root)`. Includes `flyToCart()`\n * and `countUp()`.\n */\nimport { definePack, type UsaPackElement } from './pack-el';\n\nexport { definePack };\nexport { applyPack, flyToCart, countUp, PACKS, PACK_PRIMITIVES } from './core';\nexport type { PackName, PackContext } from './core';\nexport type { UsaPackElement };\nexport { configureComponents, prefersReducedMotion } from '../base';\nexport type { ComponentsConfig, UsaElement } from '../base';\n\n/** Register every component of this category under its default tag. */\nexport function definePacksComponents(): void {\n  definePack();\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'usa-pack': UsaPackElement;\n  }\n}\n"],"names":["motionScale","prefersReducedMotion","now","clamp","raf","EASE_SPRING","EASE_OUT","defineElement"],"mappings":"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"}

package/dist/components/packs.css

@@ -0,0 +1,3 @@
+/* use-scroll-animate/components/packs */
+.usa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
+

package/dist/components/packs.d.cts

@@ -0,0 +1,107 @@
+/**
+ * use-scroll-animate/components — shared base for the `<usa-*>` custom elements.
+ *
+ * Everything here is lazy: nothing touches `window`, `document`,
+ * `HTMLElement` or `matchMedia` at import time, so the components can be
+ * imported during SSR (Next, Nuxt, Astro…) and in Electron/Tauri preload
+ * scripts. Classes are created the first time a `define*()` function runs.
+ */
+interface ComponentsConfig {
+    /**
+     * Inject each component's CSS when it is defined (default `true`). Uses a
+     * constructable stylesheet (`document.adoptedStyleSheets`, which a strict
+     * `style-src` CSP does not block) and falls back to a `<style>` tag. Set
+     * to `false` when you load `use-scroll-animate/components.css` yourself.
+     */
+    injectStyles?: boolean;
+    /**
+     * `'user'` (default) follows `prefers-reduced-motion`; `'reduce'` always
+     * uses the reduced variants (e.g. a kiosk / battery-saver mode);
+     * `'no-preference'` ignores the OS setting (only for demos — respect your users).
+     */
+    reducedMotion?: 'user' | 'reduce' | 'no-preference';
+    /**
+     * Global motion intensity (v2.7): `'off'` (same as reduced motion),
+     * `'low'` (shorter, calmer), `'normal'` (default) or `'high'`. Scales every
+     * component animation's duration and sets `--usa-motion` (0 / 0.6 / 1 /
+     * 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
+     */
+    motionIntensity?: MotionIntensity;
+}
+type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
+/** Change global component settings (call before `define*()` for `injectStyles`). */
+declare function configureComponents(options: ComponentsConfig): void;
+/** `true` when animations should be reduced (OS setting or `configureComponents`). */
+declare function prefersReducedMotion(): boolean;
+/**
+ * Members shared by every `<usa-*>` element. Attribute helpers, a cleanup
+ * bag that is emptied on disconnect, and motion helpers that degrade to the
+ * final state without WAAPI or under reduced motion.
+ */
+interface UsaElement extends HTMLElement {
+    /** `true` while reduced motion applies to this element. */
+    readonly reduced: boolean;
+}
+
+/**
+ * `<usa-pack name="ecommerce">` — applies an effect pack (`ecommerce` ·
+ * `portfolio` · `dashboard` · `game` · `landing`) to its subtree:
+ * descendants opt in with `data-role` (see `PACKS`). Re-applies when
+ * `name` changes; undone on disconnect.
+ */
+interface UsaPackElement extends UsaElement {
+    readonly roles: string[];
+}
+declare function definePack(tag?: string): CustomElementConstructor | undefined;
+
+type Cleanup = () => void;
+interface PackContext {
+    root: HTMLElement;
+    /** Index of the element among those with the same role (for staggering). */
+    index: number;
+    reduced: boolean;
+}
+/** Count `el`'s number up from 0 when it enters the view (keeps prefix / suffix / decimals). */
+declare function countUp(el: HTMLElement, duration?: number): Cleanup;
+/**
+ * Fly a copy of `from` (e.g. a product image) into `to` (the cart icon) along
+ * an arc, then bump the target. Resolves when it lands. Instant under
+ * reduced motion (only the bump's state change, no flight).
+ */
+declare function flyToCart(from: Element, to: Element, o?: {
+    duration?: number;
+}): Promise<void>;
+/** The five effect packs: `data-role` → primitives. */
+declare const PACKS: Record<string, Record<string, string[]>>;
+type PackName = keyof typeof PACKS;
+/**
+ * Apply an effect pack to `root`: every descendant with a `data-role` the
+ * pack knows gets its effects (staggered by index). Returns an undo function.
+ * Reduced motion: only non-motion behaviour (e.g. the cart event) remains.
+ *
+ * @example
+ * applyPack('ecommerce', document.querySelector('main'));
+ * // <article data-role="product">… <button data-role="add-to-cart"> … <a data-role="cart">
+ */
+declare function applyPack(name: PackName | string, root?: HTMLElement | Document): Cleanup;
+/** Primitive names a pack uses (for docs / tooling). */
+declare const PACK_PRIMITIVES: string[];
+
+/**
+ * use-scroll-animate/components/packs — effect packs (v3.9).
+ * Ready-made motion for e-commerce, portfolio, dashboard, game UI and
+ * landing pages: mark elements with `data-role` and apply a pack with
+ * `<usa-pack name="…">` or `applyPack(name, root)`. Includes `flyToCart()`
+ * and `countUp()`.
+ */
+
+/** Register every component of this category under its default tag. */
+declare function definePacksComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-pack': UsaPackElement;
+    }
+}
+
+export { PACKS, PACK_PRIMITIVES, applyPack, configureComponents, countUp, definePack, definePacksComponents, flyToCart, prefersReducedMotion };
+export type { ComponentsConfig, PackContext, PackName, UsaElement, UsaPackElement };

package/dist/components/packs.d.ts

@@ -0,0 +1,107 @@
+/**
+ * use-scroll-animate/components — shared base for the `<usa-*>` custom elements.
+ *
+ * Everything here is lazy: nothing touches `window`, `document`,
+ * `HTMLElement` or `matchMedia` at import time, so the components can be
+ * imported during SSR (Next, Nuxt, Astro…) and in Electron/Tauri preload
+ * scripts. Classes are created the first time a `define*()` function runs.
+ */
+interface ComponentsConfig {
+    /**
+     * Inject each component's CSS when it is defined (default `true`). Uses a
+     * constructable stylesheet (`document.adoptedStyleSheets`, which a strict
+     * `style-src` CSP does not block) and falls back to a `<style>` tag. Set
+     * to `false` when you load `use-scroll-animate/components.css` yourself.
+     */
+    injectStyles?: boolean;
+    /**
+     * `'user'` (default) follows `prefers-reduced-motion`; `'reduce'` always
+     * uses the reduced variants (e.g. a kiosk / battery-saver mode);
+     * `'no-preference'` ignores the OS setting (only for demos — respect your users).
+     */
+    reducedMotion?: 'user' | 'reduce' | 'no-preference';
+    /**
+     * Global motion intensity (v2.7): `'off'` (same as reduced motion),
+     * `'low'` (shorter, calmer), `'normal'` (default) or `'high'`. Scales every
+     * component animation's duration and sets `--usa-motion` (0 / 0.6 / 1 /
+     * 1.25) on `<html>` for your own CSS. See `setMotionIntensity()`.
+     */
+    motionIntensity?: MotionIntensity;
+}
+type MotionIntensity = 'off' | 'low' | 'normal' | 'high';
+/** Change global component settings (call before `define*()` for `injectStyles`). */
+declare function configureComponents(options: ComponentsConfig): void;
+/** `true` when animations should be reduced (OS setting or `configureComponents`). */
+declare function prefersReducedMotion(): boolean;
+/**
+ * Members shared by every `<usa-*>` element. Attribute helpers, a cleanup
+ * bag that is emptied on disconnect, and motion helpers that degrade to the
+ * final state without WAAPI or under reduced motion.
+ */
+interface UsaElement extends HTMLElement {
+    /** `true` while reduced motion applies to this element. */
+    readonly reduced: boolean;
+}
+
+/**
+ * `<usa-pack name="ecommerce">` — applies an effect pack (`ecommerce` ·
+ * `portfolio` · `dashboard` · `game` · `landing`) to its subtree:
+ * descendants opt in with `data-role` (see `PACKS`). Re-applies when
+ * `name` changes; undone on disconnect.
+ */
+interface UsaPackElement extends UsaElement {
+    readonly roles: string[];
+}
+declare function definePack(tag?: string): CustomElementConstructor | undefined;
+
+type Cleanup = () => void;
+interface PackContext {
+    root: HTMLElement;
+    /** Index of the element among those with the same role (for staggering). */
+    index: number;
+    reduced: boolean;
+}
+/** Count `el`'s number up from 0 when it enters the view (keeps prefix / suffix / decimals). */
+declare function countUp(el: HTMLElement, duration?: number): Cleanup;
+/**
+ * Fly a copy of `from` (e.g. a product image) into `to` (the cart icon) along
+ * an arc, then bump the target. Resolves when it lands. Instant under
+ * reduced motion (only the bump's state change, no flight).
+ */
+declare function flyToCart(from: Element, to: Element, o?: {
+    duration?: number;
+}): Promise<void>;
+/** The five effect packs: `data-role` → primitives. */
+declare const PACKS: Record<string, Record<string, string[]>>;
+type PackName = keyof typeof PACKS;
+/**
+ * Apply an effect pack to `root`: every descendant with a `data-role` the
+ * pack knows gets its effects (staggered by index). Returns an undo function.
+ * Reduced motion: only non-motion behaviour (e.g. the cart event) remains.
+ *
+ * @example
+ * applyPack('ecommerce', document.querySelector('main'));
+ * // <article data-role="product">… <button data-role="add-to-cart"> … <a data-role="cart">
+ */
+declare function applyPack(name: PackName | string, root?: HTMLElement | Document): Cleanup;
+/** Primitive names a pack uses (for docs / tooling). */
+declare const PACK_PRIMITIVES: string[];
+
+/**
+ * use-scroll-animate/components/packs — effect packs (v3.9).
+ * Ready-made motion for e-commerce, portfolio, dashboard, game UI and
+ * landing pages: mark elements with `data-role` and apply a pack with
+ * `<usa-pack name="…">` or `applyPack(name, root)`. Includes `flyToCart()`
+ * and `countUp()`.
+ */
+
+/** Register every component of this category under its default tag. */
+declare function definePacksComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-pack': UsaPackElement;
+    }
+}
+
+export { PACKS, PACK_PRIMITIVES, applyPack, configureComponents, countUp, definePack, definePacksComponents, flyToCart, prefersReducedMotion };
+export type { ComponentsConfig, PackContext, PackName, UsaElement, UsaPackElement };

package/dist/components/packs.js

@@ -0,0 +1,185 @@
+import { p as prefersReducedMotion, n as now, m as motionScale, r as raf, h as EASE_OUT, b as clamp, E as EASE_SPRING, i as defineElement } from '../chunks/base-BRIPyPtX.js';
+export { a as configureComponents } from '../chunks/base-BRIPyPtX.js';
+
+const anim = (el, frames, o) => {
+    if (typeof el.animate !== 'function')
+        return null;
+    const k = motionScale();
+    return el.animate(frames, { ...o, duration: (o.duration ?? 400) * k, delay: (o.delay ?? 0) * k });
+};
+const on = (el, type, fn) => {
+    el.addEventListener(type, fn);
+    return () => el.removeEventListener(type, fn);
+};
+const io = (el, cb) => {
+    if (typeof IntersectionObserver === 'undefined')
+        return void cb();
+    const o = new IntersectionObserver((es) => es.some((e) => e.isIntersecting) && (o.disconnect(), cb()), { threshold: 0.15 });
+    o.observe(el);
+    return () => o.disconnect();
+};
+/** Count `el`'s number up from 0 when it enters the view (keeps prefix / suffix / decimals). */
+function countUp(el, duration = 1200) {
+    const text = el.textContent || '';
+    const m = /(-?[\d,]*\.?\d+)/.exec(text);
+    if (!m || prefersReducedMotion())
+        return () => { };
+    const target = Number(m[1].replace(/,/g, ''));
+    const dec = (m[1].split('.')[1] || '').length;
+    const fmt = (v) => text.replace(m[1], v.toLocaleString('en-US', { minimumFractionDigits: dec, maximumFractionDigits: dec }));
+    el.setAttribute('aria-label', text.trim());
+    el.textContent = fmt(0);
+    let stop = false;
+    const off = io(el, () => {
+        const t0 = now();
+        const d = duration * motionScale() || 1;
+        const step = () => {
+            if (stop)
+                return;
+            const p = clamp((now() - t0) / d, 0, 1);
+            el.textContent = fmt(target * (1 - Math.pow(1 - p, 3)));
+            if (p < 1)
+                raf(step);
+        };
+        raf(step);
+    });
+    return () => {
+        stop = true;
+        off();
+        el.textContent = text;
+    };
+}
+/**
+ * Fly a copy of `from` (e.g. a product image) into `to` (the cart icon) along
+ * an arc, then bump the target. Resolves when it lands. Instant under
+ * reduced motion (only the bump's state change, no flight).
+ */
+async function flyToCart(from, to, o = {}) {
+    if (prefersReducedMotion() || typeof document === 'undefined')
+        return;
+    const a = from.getBoundingClientRect();
+    const b = to.getBoundingClientRect();
+    const ghost = from.cloneNode(true);
+    ghost.setAttribute('aria-hidden', 'true');
+    Object.assign(ghost.style, { position: 'fixed', left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, height: `${a.height}px`, margin: '0', zIndex: '2147483000', pointerEvents: 'none' });
+    document.body.appendChild(ghost);
+    const dx = b.left + b.width / 2 - (a.left + a.width / 2);
+    const dy = b.top + b.height / 2 - (a.top + a.height / 2);
+    const f = anim(ghost, [
+        { transform: 'translate(0, 0) scale(1)', opacity: 1 },
+        { transform: `translate(${dx * 0.5}px, ${dy * 0.5 - 80}px) scale(0.6)`, opacity: 0.9, offset: 0.5 },
+        { transform: `translate(${dx}px, ${dy}px) scale(0.15)`, opacity: 0.4 },
+    ], { duration: o.duration ?? 700, easing: 'cubic-bezier(0.5, 0, 0.5, 1)' });
+    await f?.finished.catch(() => undefined);
+    ghost.remove();
+    anim(to, [{ transform: 'scale(1)' }, { transform: 'scale(1.3)' }, { transform: 'scale(1)' }], { duration: 380, easing: EASE_SPRING });
+}
+const PRIMITIVES = {
+    reveal: (el, c) => {
+        if (c.reduced)
+            return;
+        el.style.opacity = '0';
+        const off = io(el, () => {
+            el.style.opacity = '';
+            anim(el, [{ opacity: 0, transform: 'translateY(24px)' }, { opacity: 1, transform: 'none' }], { duration: 600, delay: Math.min(c.index, 8) * 70, easing: EASE_OUT, fill: 'backwards' });
+        });
+        return () => (off(), (el.style.opacity = ''));
+    },
+    lift: (el, c) => {
+        if (c.reduced)
+            return;
+        const a = on(el, 'pointerenter', () => anim(el, [{ transform: 'none' }, { transform: 'translateY(-6px) scale(1.02)' }], { duration: 220, easing: EASE_OUT, fill: 'forwards' }));
+        const b = on(el, 'pointerleave', () => anim(el, [{ transform: 'translateY(-6px) scale(1.02)' }, { transform: 'none' }], { duration: 260, easing: EASE_OUT, fill: 'forwards' }));
+        return () => (a(), b());
+    },
+    press: (el, c) => (c.reduced ? undefined : on(el, 'pointerdown', () => anim(el, [{ transform: 'scale(1)' }, { transform: 'scale(0.94)' }, { transform: 'scale(1)' }], { duration: 260, easing: EASE_SPRING }))),
+    'count-up': (el) => countUp(el),
+    pulse: (el, c) => {
+        if (c.reduced)
+            return;
+        const a = anim(el, [{ boxShadow: '0 0 0 0 rgba(124, 92, 255, 0.55)' }, { boxShadow: '0 0 0 14px rgba(124, 92, 255, 0)' }], { duration: 1600, iterations: Infinity });
+        return () => a?.cancel();
+    },
+    float: (el, c) => {
+        if (c.reduced)
+            return;
+        const a = anim(el, [{ transform: 'translateY(0)' }, { transform: 'translateY(-8px)' }, { transform: 'translateY(0)' }], { duration: 3000, delay: c.index * 300, iterations: Infinity, easing: 'ease-in-out' });
+        return () => a?.cancel();
+    },
+    shake: (el, c) => (c.reduced ? undefined : on(el, 'click', () => anim(el, [0, -8, 8, -6, 6, -3, 0].map((x) => ({ transform: `translateX(${x}px)` })), { duration: 420 }))),
+    bump: (el, c) => (c.reduced ? undefined : on(el, 'usa:bump', () => anim(el, [{ transform: 'scale(1)' }, { transform: 'scale(1.25)' }, { transform: 'scale(1)' }], { duration: 360, easing: EASE_SPRING }))),
+    'fly-to-cart': (el, c) => on(el, 'click', () => {
+        const cart = c.root.querySelector('[data-role="cart"]') || document.querySelector('[data-role="cart"]');
+        const item = el.closest('[data-role="product"]')?.querySelector('img, [data-role="thumb"]') || el;
+        if (cart)
+            void flyToCart(item, cart).then(() => cart.dispatchEvent(new CustomEvent('usa:added', { bubbles: true })));
+    }),
+};
+/** The five effect packs: `data-role` → primitives. */
+const PACKS = {
+    ecommerce: { product: ['reveal', 'lift'], 'add-to-cart': ['press', 'fly-to-cart'], cart: ['bump'], price: ['count-up'], badge: ['pulse'] },
+    portfolio: { project: ['reveal', 'lift'], heading: ['reveal'], stat: ['count-up'], contact: ['press', 'pulse'] },
+    dashboard: { card: ['reveal'], stat: ['count-up'], alert: ['pulse'], action: ['press'] },
+    game: { button: ['press'], score: ['count-up', 'bump'], item: ['float'], hit: ['shake'], reward: ['pulse'] },
+    landing: { hero: ['reveal'], feature: ['reveal', 'lift'], cta: ['press', 'pulse'], logo: ['float'], stat: ['count-up'] },
+};
+/**
+ * Apply an effect pack to `root`: every descendant with a `data-role` the
+ * pack knows gets its effects (staggered by index). Returns an undo function.
+ * Reduced motion: only non-motion behaviour (e.g. the cart event) remains.
+ *
+ * @example
+ * applyPack('ecommerce', document.querySelector('main'));
+ * // <article data-role="product">… <button data-role="add-to-cart"> … <a data-role="cart">
+ */
+function applyPack(name, root = document) {
+    const pack = PACKS[name];
+    if (!pack || typeof document === 'undefined')
+        return () => { };
+    const r = root.documentElement ? root.body : root;
+    const reduced = prefersReducedMotion();
+    const cleanups = [];
+    for (const [role, fx] of Object.entries(pack)) {
+        r.querySelectorAll(`[data-role="${role}"]`).forEach((el, index) => {
+            for (const f of fx) {
+                const c = PRIMITIVES[f]?.(el, { root: r, index, reduced });
+                if (c)
+                    cleanups.push(c);
+            }
+        });
+    }
+    return () => cleanups.splice(0).forEach((c) => c());
+}
+/** Primitive names a pack uses (for docs / tooling). */
+const PACK_PRIMITIVES = Object.keys(PRIMITIVES);
+
+function definePack(tag = 'usa-pack') {
+    return defineElement(tag, (Base) => class UsaPack extends Base {
+        static get observedAttributes() {
+            return ['name'];
+        }
+        get roles() {
+            return Object.keys(PACKS[this.str('name', 'landing')] || {});
+        }
+        mount() {
+            var _a;
+            (_a = this.style).display || (_a.display = 'block');
+            this.onCleanup(applyPack(this.str('name', 'landing'), this));
+        }
+    });
+}
+
+/**
+ * use-scroll-animate/components/packs — effect packs (v3.9).
+ * Ready-made motion for e-commerce, portfolio, dashboard, game UI and
+ * landing pages: mark elements with `data-role` and apply a pack with
+ * `<usa-pack name="…">` or `applyPack(name, root)`. Includes `flyToCart()`
+ * and `countUp()`.
+ */
+/** Register every component of this category under its default tag. */
+function definePacksComponents() {
+    definePack();
+}
+
+export { PACKS, PACK_PRIMITIVES, applyPack, countUp, definePack, definePacksComponents, flyToCart, prefersReducedMotion };
+//# sourceMappingURL=packs.js.map