use-scroll-animate 4.8.0 → 5.0.0

package/dist/components/lite.js

@@ -7,10 +7,16 @@
  * scripts. Classes are created the first time a `define*()` function runs.
  */
 const MOTION_SENSITIVITY_LEVELS = ['full', 'gentle', 'minimal', 'static'];
-const MOTION_SCALE = { off: 0, low: 0.6, normal: 1, high: 1.25 };
+const MOTION_SCALE = { low: 0.6, normal: 1, high: 1.25 };
 const config = { injectStyles: true, reducedMotion: 'user', motionIntensity: 'normal', motionSensitivity: 'full' };
 /** Change global component settings (call before `define*()` for `injectStyles`). */
 function configureComponents(options) {
+    options = { ...options };
+    // 5.0: removed values are ignored (see docs/upgrading-5.md)
+    if (options.motionIntensity && !(options.motionIntensity in MOTION_SCALE))
+        delete options.motionIntensity;
+    if (options.reducedMotion && options.reducedMotion !== 'reduce')
+        options.reducedMotion = 'user';
     Object.assign(config, options);
     if (options.motionIntensity && typeof document !== 'undefined') {
         document.documentElement.style.setProperty('--usa-motion', String(MOTION_SCALE[options.motionIntensity] ?? 1));
@@ -55,6 +61,14 @@ function adaptKeyframes(frames, level = config.motionSensitivity) {
         return out;
     });
 }
+/** Run `fn` without 4.9 deprecation warnings (library-internal calls). */
+function withoutDeprecations(fn) {
+    try {
+        return fn();
+    }
+    finally {
+    }
+}
 /** The current global motion intensity. */
 function getMotionIntensity() {
     return config.motionIntensity;
@@ -66,10 +80,10 @@ function motionScale() {
 const canDefine = () => typeof customElements !== 'undefined' && typeof HTMLElement !== 'undefined';
 /** `true` when animations should be reduced (OS setting or `configureComponents`). */
 function prefersReducedMotion() {
-    if (config.motionIntensity === 'off' || config.motionSensitivity === 'minimal' || config.motionSensitivity === 'static')
+    if (config.motionSensitivity === 'minimal' || config.motionSensitivity === 'static')
+        return true;
+    if (config.reducedMotion === 'reduce')
         return true;
-    if (config.reducedMotion !== 'user')
-        return config.reducedMotion === 'reduce';
     return typeof matchMedia === 'function' && !!matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
 const injected = new Set();
@@ -205,31 +219,7 @@ function getBase() {
         }
         /** `el.animate()` that returns `null` (and applies the last frame) without WAAPI. */
         motion(el, keyframes, options) {
-            if (typeof el.animate !== 'function' || config.motionSensitivity === 'static') {
-                applyFrame(el, keyframes[keyframes.length - 1]);
-                return null;
-            }
-            keyframes = adaptKeyframes(keyframes);
-            if (active$1 >= maxActive) {
-                applyFrame(el, keyframes[keyframes.length - 1]);
-                return null;
-            }
-            const k = motionScale();
-            if (k !== 1 && k > 0 && typeof options.duration === 'number')
-                options = { ...options, duration: options.duration * k, delay: (options.delay || 0) * k };
-            const a = el.animate(keyframes, options);
-            if (options.iterations !== Infinity) {
-                active$1++;
-                let done = false;
-                const end = () => {
-                    if (!done) {
-                        done = true;
-                        active$1--;
-                    }
-                };
-                a?.finished?.then(end, end);
-            }
-            return a;
+            return animateWithMotion(el, keyframes, options);
         }
         emit(type, detail) {
             return this.dispatchEvent(new CustomEvent(`usa:${type}`, { detail, bubbles: true, cancelable: true }));
@@ -238,6 +228,39 @@ function getBase() {
     baseClass = Base;
     return baseClass;
 }
+/**
+ * `el.animate()` with the library's motion rules (5.0, shared by elements and
+ * registered effects): motion sensitivity (keyframes adapted, `static` →
+ * final frame), intensity (duration scale) and the animation budget. Returns
+ * `null` (final frame applied) when nothing should animate.
+ */
+function animateWithMotion(el, keyframes, options) {
+    if (typeof el.animate !== 'function' || config.motionSensitivity === 'static') {
+        applyFrame(el, keyframes[keyframes.length - 1]);
+        return null;
+    }
+    keyframes = adaptKeyframes(keyframes);
+    if (active$1 >= maxActive) {
+        applyFrame(el, keyframes[keyframes.length - 1]);
+        return null;
+    }
+    const k = motionScale();
+    if (k !== 1 && k > 0 && typeof options.duration === 'number')
+        options = { ...options, duration: options.duration * k, delay: (options.delay || 0) * k };
+    const a = el.animate(keyframes, options);
+    if (options.iterations !== Infinity) {
+        active$1++;
+        let done = false;
+        const end = () => {
+            if (!done) {
+                done = true;
+                active$1--;
+            }
+        };
+        a?.finished?.then(end, end);
+    }
+    return a;
+}
 /** Write a keyframe's properties as inline styles (no-WAAPI fallback). */
 function applyFrame(el, frame) {
     if (!frame)
@@ -358,6 +381,15 @@ const EASE_OUT = 'cubic-bezier(0.22, 1, 0.36, 1)';
 const EASE_SPRING = 'cubic-bezier(0.34, 1.56, 0.64, 1)';
 /** Windows Fluent "decelerate" / "point-to-point" curves. */
 const FLUENT_DECELERATE = 'cubic-bezier(0.1, 0.9, 0.2, 1)';
+const warned = new Set();
+/** Log a deprecation once per key (console.warn). */
+function deprecate(key, message) {
+    if (warned.has(key))
+        return;
+    warned.add(key);
+    if (typeof console !== 'undefined')
+        console.warn(`[use-scroll-animate] ${message}`);
+}
 /**
  * The `kind` attribute of `<usa-spinner>`, `<usa-check>`, `<usa-dialog>` and
  * `<usa-acrylic>` (3.0: `variant` only selects a style variant).
@@ -389,6 +421,7 @@ const COMPONENT_CATEGORIES = {
     depth: ['usa-cube', 'usa-depth'],
     layout: ['usa-auto-animate', 'usa-masonry'],
     packs: ['usa-pack'],
+    fx: ['usa-fx'],
 };
 
 /**
@@ -424,8 +457,7 @@ function autoDegrade(options = {}) {
         state.reason = reason;
         if (degraded) {
             prev = { intensity: getMotionIntensity(), budget: animationBudget() };
-            if (prev.intensity !== 'off')
-                configureComponents({ motionIntensity: 'low' });
+            configureComponents({ motionIntensity: 'low' });
             setAnimationBudget(Math.max(4, Math.floor(maxActive / 2)));
         }
         else if (prev) {
@@ -7941,18 +7973,23 @@ function defineAutoSkeleton(tag = 'usa-auto-skeleton') {
 
 var css$7 = "";
 
+const INTENSITIES = ['low', 'normal', 'high'];
 const LEVELS = ['off', 'low', 'normal', 'high'];
 const KEY$1 = 'usa:motion';
 /**
  * Set the global motion intensity for every `<usa-*>` component:
- * `'off'` (like reduced motion), `'low'`, `'normal'` (default), `'high'`.
- * Sets `--usa-motion` and `data-usa-motion` on `<html>`; with `persist`
- * the choice is remembered (localStorage) and restored by `restoreMotionIntensity()`.
+ * `'low'`, `'normal'` (default), `'high'`. Sets `--usa-motion` and
+ * `data-usa-motion` on `<html>`; with `persist` the choice is remembered
+ * (localStorage) and restored by `restoreMotionIntensity()`.
+ * 5.0: `'off'` was removed — use `setMotionSensitivity('minimal')`.
  */
 function setMotionIntensity(level, persist = false) {
-    if (!LEVELS.includes(level))
+    if (!INTENSITIES.includes(level))
         return;
     configureComponents({ motionIntensity: level });
+    store(level, persist);
+}
+function store(level, persist) {
     if (persist) {
         try {
             localStorage.setItem(KEY$1, level);
@@ -7964,12 +8001,26 @@ function setMotionIntensity(level, persist = false) {
     if (typeof document !== 'undefined')
         document.dispatchEvent(new CustomEvent('usa:motion', { detail: { level } }));
 }
-/** Re-apply a persisted intensity (call early on page load). Returns it. */
+/** Apply a switch level: `'off'` = motion sensitivity `minimal`, otherwise full motion at that intensity. */
+function setMotionLevel(level, persist = false) {
+    if (!LEVELS.includes(level))
+        return;
+    if (level === 'off')
+        configureComponents({ motionSensitivity: 'minimal' });
+    else
+        configureComponents({ motionIntensity: level, ...(getMotionSensitivity() === 'minimal' ? { motionSensitivity: 'full' } : {}) });
+    store(level, persist);
+}
+/** The current switch level. */
+function getMotionLevel() {
+    return getMotionSensitivity() === 'minimal' || getMotionSensitivity() === 'static' ? 'off' : getMotionIntensity();
+}
+/** Re-apply a persisted level (call early on page load). Returns the active intensity. */
 function restoreMotionIntensity() {
     try {
         const v = localStorage.getItem(KEY$1);
         if (v && LEVELS.includes(v))
-            setMotionIntensity(v);
+            setMotionLevel(v);
     }
     catch {
         /* ignore */
@@ -7979,10 +8030,10 @@ function restoreMotionIntensity() {
 function defineMotionSwitch(tag = 'usa-motion-switch') {
     return defineElement(tag, (Base) => class UsaMotionSwitch extends Base {
         get value() {
-            return getMotionIntensity();
+            return getMotionLevel();
         }
         set value(v) {
-            setMotionIntensity(v, true);
+            setMotionLevel(v, true);
             this.sync();
         }
         mount() {
@@ -8173,7 +8224,7 @@ function defineTimeline(tag = 'usa-timeline') {
                 // (0–0.95) or `scrub="js"` opt into the JS engine, `scrub="scroll"`
                 // follows this element's own scroll position.
                 const v = this.str('scrub');
-                const stop = tl.scrub(this, { smooth: this.num('smooth', 0), engine: v === 'js' ? 'js' : 'auto', source: v === 'scroll' ? 'scroll' : 'view' });
+                const stop = tl.scrub(this, { smooth: this.num('smooth', 0), engine: 'auto', source: v === 'scroll' ? 'scroll' : 'view' });
                 this.toggleAttribute('data-native', stop.native);
                 this.onCleanup(stop);
                 return;
@@ -8970,7 +9021,7 @@ function supportsWebGL() {
         return support;
     try {
         const c = typeof document !== 'undefined' ? document.createElement('canvas') : null;
-        support = !!(c && (c.getContext('webgl') || c.getContext('experimental-webgl')));
+        support = !!(c && (c.getContext('webgl')));
     }
     catch {
         support = false;
@@ -8981,7 +9032,7 @@ function supportsWebGL() {
 function glQuad(canvas, frag) {
     let gl = null;
     try {
-        gl = (canvas.getContext('webgl', { premultipliedAlpha: false, antialias: false }) || canvas.getContext('experimental-webgl'));
+        gl = (canvas.getContext('webgl', { premultipliedAlpha: false, antialias: false }));
     }
     catch {
         gl = null;
@@ -10039,6 +10090,304 @@ function definePacksComponents() {
     definePack();
 }
 
+/**
+ * 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.
+ */
+const EFFECT_KINDS = ['enter', 'exit', 'attention', 'click', 'hover', 'card', 'loop', 'page', 'background', 'text', 'cursor', 'scroll'];
+const EFFECT_TRIGGERS = ['click', 'hover', 'enter', 'load', 'loop', 'manual'];
+const registry = new Map();
+/** Register an effect (throws on a duplicate name unless `override`). Returns an unregister function. */
+function registerEffect(def, opts = {}) {
+    if (!/^[a-z][a-z0-9-]*$/.test(def.name))
+        throw new Error(`[use-scroll-animate] invalid effect name "${def.name}"`);
+    if (!EFFECT_KINDS.includes(def.kind))
+        throw new Error(`[use-scroll-animate] unknown effect kind "${def.kind}"`);
+    if (registry.has(def.name) && !opts.override)
+        throw new Error(`[use-scroll-animate] effect "${def.name}" is already registered`);
+    registry.set(def.name, def);
+    return () => {
+        if (registry.get(def.name) === def)
+            registry.delete(def.name);
+    };
+}
+/** Register several effects at once (already-registered names are skipped). */
+function registerEffects(defs) {
+    for (const d of defs)
+        if (!registry.has(d.name))
+            registerEffect(d);
+}
+const getEffect = (name) => registry.get(name);
+const hasEffect = (name) => registry.has(name);
+/** Registered effects (optionally of one kind), sorted by name. */
+function listEffects(kind) {
+    return Array.from(registry.values())
+        .filter((d) => !kind || d.kind === kind)
+        .sort((a, b) => a.name.localeCompare(b.name));
+}
+const SKIP_BY_DEFAULT = ['loop', 'background', 'cursor'];
+function context(event) {
+    const cleanups = [];
+    return {
+        reduced: prefersReducedMotion(),
+        sensitivity: getMotionSensitivity(),
+        event,
+        animate: animateWithMotion,
+        onCleanup: (fn) => cleanups.push(fn),
+        cleanups,
+    };
+}
+/**
+ * Play a registered effect once on `el`. Resolves when it finishes (or
+ * immediately for fire-and-forget effects). Unknown names reject.
+ */
+async function playEffect(el, name, options = {}, event) {
+    const def = registry.get(name);
+    if (!def)
+        throw new Error(`[use-scroll-animate] unknown effect "${name}" — registered: ${Array.from(registry.keys()).join(', ')}`);
+    const ctx = context(event);
+    if (ctx.reduced && (def.reduced ?? (SKIP_BY_DEFAULT.includes(def.kind) ? 'skip' : 'run')) === 'skip')
+        return;
+    const out = def.run(el, { ...(def.defaults || {}), ...options }, ctx);
+    if (out && typeof out.finished?.then === 'function')
+        await out.finished.catch(() => undefined);
+    else if (out && typeof out.then === 'function')
+        await out;
+}
+/**
+ * Bind an effect to a trigger on `el`: `click`, `hover` (pointerenter / focus),
+ * `enter` (scrolls into view; `once` by default), `load` (now), `loop`
+ * (starts now, cleanup stops it) or `manual` (nothing). Returns an unbind.
+ */
+function bindEffect(el, name, options = {}) {
+    const { trigger = 'click', once, ...opts } = options;
+    const def = registry.get(name);
+    if (!def)
+        throw new Error(`[use-scroll-animate] unknown effect "${name}"`);
+    const offs = [];
+    const fire = (e) => {
+        if (trigger === 'loop' || def.kind === 'loop' || def.kind === 'background' || def.kind === 'cursor') {
+            const ctx = context(e);
+            if (ctx.reduced && (def.reduced ?? 'skip') === 'skip')
+                return;
+            const out = def.run(el, { ...(def.defaults || {}), ...opts }, ctx);
+            if (typeof out === 'function')
+                offs.push(out);
+            offs.push(...ctx.cleanups);
+            return;
+        }
+        void playEffect(el, name, opts, e).catch(() => undefined);
+    };
+    const on = (type, opt) => {
+        el.addEventListener(type, fire, opt);
+        offs.push(() => el.removeEventListener(type, fire, opt));
+    };
+    if (trigger === 'click')
+        on('click', { once: !!once });
+    else if (trigger === 'hover')
+        (on('pointerenter'), on('focusin'));
+    else if (trigger === 'load' || trigger === 'loop')
+        fire();
+    else if (trigger === 'enter' && typeof IntersectionObserver !== 'undefined') {
+        const io = new IntersectionObserver((entries) => {
+            for (const en of entries)
+                if (en.isIntersecting) {
+                    fire();
+                    if (once !== false)
+                        io.disconnect();
+                }
+        }, { threshold: 0.15 });
+        io.observe(el);
+        offs.push(() => io.disconnect());
+    }
+    return () => offs.splice(0).reverse().forEach((f) => f());
+}
+
+function defineFx(tag = 'usa-fx') {
+    return defineElement(tag, (Base) => class UsaFx extends Base {
+        static get observedAttributes() {
+            return ['effect', 'trigger', 'options'];
+        }
+        get target() {
+            return this.flag('self') ? this : (this.firstElementChild || this);
+        }
+        opts() {
+            try {
+                return JSON.parse(this.str('options', '{}')) || {};
+            }
+            catch {
+                return {};
+            }
+        }
+        play() {
+            return playEffect(this.target, this.str('effect', 'pop'), this.opts()).catch(() => undefined);
+        }
+        mount() {
+            if (!this.style.display)
+                this.style.display = 'inline-block';
+            const name = this.str('effect', 'pop');
+            const t = this.str('trigger', 'click');
+            try {
+                this.onCleanup(bindEffect(this.target, name, { ...this.opts(), trigger: EFFECT_TRIGGERS.includes(t) ? t : 'click', once: this.flag('once') }));
+                this.removeAttribute('data-unknown');
+            }
+            catch {
+                this.setAttribute('data-unknown', name); // not registered (yet)
+            }
+        }
+    });
+}
+
+/**
+ * 5.0 built-in effects, all registered through `registerEffect()`:
+ * every timeline preset as an `enter` effect, attention seekers, and the
+ * click effects (burst, confetti, shake, ripple).
+ */
+const enter = Object.entries(TIMELINE_PRESETS).map(([name, frames]) => ({
+    name,
+    kind: 'enter',
+    description: `Entrance: ${name} (same keyframes as the timeline preset).`,
+    defaults: { duration: 600, delay: 0, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' },
+    run: (el, o, ctx) => ctx.animate(el, ctx.reduced ? [{ opacity: 0 }, { opacity: 1 }] : frames, { duration: o.duration, delay: o.delay, easing: o.easing, fill: 'backwards' }),
+}));
+const A = (name, description, frames, duration = 700, easing = 'ease-in-out') => ({
+    name,
+    kind: 'attention',
+    description,
+    defaults: { duration, iterations: 1 },
+    run: (el, o, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.6 }, { opacity: 1 }], { duration: 400 }) : ctx.animate(el, frames, { duration: o.duration, easing, iterations: o.iterations })),
+});
+const attention = [
+    A('pulse', 'Gentle scale pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.08)' }, { transform: 'scale(1)' }], 600),
+    A('pop', 'Quick overshoot pop.', [{ transform: 'scale(1)' }, { transform: 'scale(1.18)', offset: 0.4 }, { transform: 'scale(0.96)', offset: 0.7 }, { transform: 'scale(1)' }], 450, 'cubic-bezier(0.34, 1.56, 0.64, 1)'),
+    A('jelly', 'Rubbery squash-and-stretch.', [{ transform: 'scale(1,1)' }, { transform: 'scale(1.25,0.75)', offset: 0.3 }, { transform: 'scale(0.75,1.25)', offset: 0.4 }, { transform: 'scale(1.15,0.85)', offset: 0.5 }, { transform: 'scale(0.95,1.05)', offset: 0.65 }, { transform: 'scale(1.05,0.95)', offset: 0.75 }, { transform: 'scale(1,1)' }], 900),
+    A('wiggle', 'Playful rotate wiggle.', [{ transform: 'rotate(0)' }, { transform: 'rotate(-8deg)', offset: 0.2 }, { transform: 'rotate(7deg)', offset: 0.4 }, { transform: 'rotate(-5deg)', offset: 0.6 }, { transform: 'rotate(3deg)', offset: 0.8 }, { transform: 'rotate(0)' }], 650),
+    A('heartbeat', 'Double-beat heart pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.2)', offset: 0.14 }, { transform: 'scale(1)', offset: 0.28 }, { transform: 'scale(1.2)', offset: 0.42 }, { transform: 'scale(1)', offset: 0.7 }], 1100),
+    A('bounce', 'Hop up and settle with a squash.', [{ transform: 'translateY(0) scale(1,1)' }, { transform: 'translateY(-22px) scale(0.95,1.05)', offset: 0.35 }, { transform: 'translateY(0) scale(1.08,0.92)', offset: 0.6 }, { transform: 'translateY(-6px) scale(1,1)', offset: 0.8 }, { transform: 'translateY(0) scale(1,1)' }], 800),
+    A('flash', 'Two soft flashes (well under 3 per second).', [{ opacity: 1 }, { opacity: 0.25, offset: 0.25 }, { opacity: 1, offset: 0.5 }, { opacity: 0.25, offset: 0.75 }, { opacity: 1 }], 1400),
+    A('tada', 'Scale + shake celebration.', [{ transform: 'scale(1) rotate(0)' }, { transform: 'scale(0.9) rotate(-3deg)', offset: 0.1 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.3 }, { transform: 'scale(1.1) rotate(-3deg)', offset: 0.5 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.7 }, { transform: 'scale(1) rotate(0)' }], 1000),
+];
+const click = [
+    {
+        name: 'burst',
+        kind: 'click',
+        description: 'Particle burst from the click point (or the element center).',
+        defaults: { count: 12 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const r = el.getBoundingClientRect();
+            const e = ctx.event;
+            burst(e?.clientX ?? r.left + r.width / 2, e?.clientY ?? r.top + r.height / 2, o);
+        },
+    },
+    {
+        name: 'confetti',
+        kind: 'click',
+        description: 'Confetti cannon from the element.',
+        defaults: { count: 80 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const r = el.getBoundingClientRect();
+            confetti({ x: r.left + r.width / 2, y: r.top + r.height / 2, ...o });
+        },
+    },
+    {
+        name: 'shake',
+        kind: 'attention',
+        description: 'Horizontal "no" shake (errors, wrong password).',
+        defaults: { intensity: 8, duration: 480 },
+        run: (el, o, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.5 }, { opacity: 1 }], { duration: 300 }) : shake(el, o.intensity, o.duration)),
+    },
+    {
+        name: 'ripple',
+        kind: 'click',
+        description: 'Material-style ink ripple from the pointer.',
+        defaults: { color: 'currentColor', duration: 600 },
+        run: (el, o, ctx) => {
+            var _a;
+            if (ctx.reduced)
+                return;
+            const r = el.getBoundingClientRect();
+            const e = ctx.event;
+            const d = Math.hypot(r.width, r.height) * 2;
+            const dot = document.createElement('span');
+            dot.setAttribute('aria-hidden', 'true');
+            Object.assign(dot.style, { position: 'absolute', left: `${(e?.clientX ?? r.left + r.width / 2) - r.left - d / 2}px`, top: `${(e?.clientY ?? r.top + r.height / 2) - r.top - d / 2}px`, width: `${d}px`, height: `${d}px`, borderRadius: '50%', background: o.color, opacity: '0.25', pointerEvents: 'none' });
+            if (getComputedStyle(el).position === 'static')
+                el.style.position = 'relative';
+            (_a = el.style).overflow || (_a.overflow = 'hidden');
+            el.appendChild(dot);
+            const a = ctx.animate(dot, [{ transform: 'scale(0)', opacity: 0.3 }, { transform: 'scale(1)', opacity: 0 }], { duration: o.duration, easing: 'ease-out' });
+            const done = () => dot.remove();
+            if (a)
+                a.finished.then(done, done);
+            else
+                done();
+            return a;
+        },
+    },
+];
+/** Every built-in 5.0 effect definition. */
+const BUILTIN_EFFECTS = [...enter, ...attention, ...click];
+
+/**
+ * use-scroll-animate/components/fx — unified plugin-style effects (5.0).
+ * `registerEffect({ name, kind, run })`, `playEffect(el, name)`,
+ * `bindEffect(el, name, { trigger })`, `<usa-fx effect trigger>`. Built-ins:
+ * every timeline preset (`enter`), `pulse` · `pop` · `jelly` · `wiggle` ·
+ * `heartbeat` · `bounce` · `flash` · `tada` · `shake` (attention),
+ * `burst` · `confetti` · `ripple` (click). More packs: `use-scroll-animate/components/effects`.
+ */
+/** Register the built-in effects (idempotent; `defineFxComponents()` calls it). */
+function registerBuiltinEffects() {
+    registerEffects(BUILTIN_EFFECTS);
+}
+/** Register every component of this category under its default tag (+ the built-in effects). */
+function defineFxComponents() {
+    registerBuiltinEffects();
+    defineFx();
+}
+
+/**
+ * 4.9 — the 5.0 modern-browser baseline. `baselineReport()` lists which
+ * required / progressive features this browser has; `warnBaseline()` logs
+ * once in development when a required one is missing.
+ */
+/** Required in 5.0: Custom Elements, WAAPI, IntersectionObserver, ResizeObserver, adoptedStyleSheets. Progressive: View Transitions, scroll-driven animations, WebGL. */
+function baselineReport() {
+    const w = (typeof window !== 'undefined' ? window : {});
+    const d = (typeof document !== 'undefined' ? document : {});
+    const css = (q) => typeof w.CSS?.supports === 'function' && w.CSS.supports(q);
+    return [
+        { id: 'custom-elements', required: true, supported: !!w.customElements },
+        { id: 'web-animations', required: true, supported: typeof w.Element?.prototype?.animate === 'function' },
+        { id: 'intersection-observer', required: true, supported: typeof w.IntersectionObserver === 'function' },
+        { id: 'resize-observer', required: true, supported: typeof w.ResizeObserver === 'function' },
+        { id: 'adopted-stylesheets', required: true, supported: 'adoptedStyleSheets' in d },
+        { id: 'view-transitions', required: false, supported: typeof d.startViewTransition === 'function' },
+        { id: 'scroll-driven-animations', required: false, supported: css('animation-timeline: view()') },
+        { id: 'webgl', required: false, supported: !!(d.createElement && (() => { try {
+                return d.createElement('canvas').getContext('webgl');
+            }
+            catch {
+                return null;
+            } })()) },
+    ];
+}
+/** Log (once) which required 5.0 features are missing here. Returns the missing ids. */
+function warnBaseline() {
+    const missing = baselineReport().filter((f) => f.required && !f.supported).map((f) => f.id);
+    if (missing.length)
+        deprecate('baseline', `this browser lacks ${missing.join(', ')}; use-scroll-animate 5.0 requires them (modern-browser baseline, see docs/upgrading-5.md).`);
+    return missing;
+}
+
 /**
  * use-scroll-animate/components/a11y — accessibility toolkit (4.4).
  *
@@ -10129,6 +10478,7 @@ const STATIC_ALTERNATIVES = {
     depth: 'Flat, front-facing layout.',
     layout: 'Items reflow instantly.',
     packs: 'Roles are styled but not animated.',
+    fx: 'Effects are skipped or reduced to a short fade; the content is unchanged.',
 };
 /**
  * Freeze a subtree at its static alternative: finishes running animations
@@ -10439,6 +10789,7 @@ const BY_CATEGORY = {
     depth: defineDepthComponents,
     layout: defineLayoutComponents,
     packs: definePacksComponents,
+    fx: defineFxComponents,
 };
 /**
  * Register every `<usa-*>` component (or only the given categories).
@@ -10466,5 +10817,5 @@ function defineComponents(categories) {
 const STYLE_BASE = new URL('../', import.meta.url).href;
 onDemandStyles(STYLE_BASE);
 
-export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, GL_FALLBACKS, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, PARTICLE_PRESETS, POST_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, STYLE_BASE, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, burst, categoryOf, confetti, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePostFx, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, detectNativeHost, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getMotionIntensity, getMotionSensitivity, getMotionTokens, glFallbackCss, glGovernor, glQuad, graphemes, haptic, importMotionTokens, interpolatePath, linearEasing, liveRegion, loadCategoryStyles, loadedStyles, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, onDemandStyles, onFrame, orientationToTilt, pageTransition, parseDuration, parseEasing, parseNativeSettings, pathsCompatible, pinchScale, postFxShader, postToNative, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, schedulerStats, scrambleFrame, scrollToTarget, setAnimationBudget, setMotionIntensity, setMotionSensitivity, setVariant, shake, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition, watchPowerSaver };
+export { ALL_TAGS, AMBIENT_EFFECTS, ANIM_ICONS, BRIDGE_PROTOCOL_VERSION, BUILTIN_EFFECTS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, EFFECT_KINDS, EFFECT_TRIGGERS, GL_FALLBACKS, JOINING_SCRIPT, LIVE_REGION_IDS, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, MOTION_SENSITIVITY, MOTION_SENSITIVITY_LEVELS, MOTION_TOKENS, PACKS, PACK_PRIMITIVES, PAGE_EFFECTS, PARTICLE_PRESETS, POST_EFFECTS, REVEAL_EFFECTS, SENSITIVITY_CSS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, STATIC_ALTERNATIVES, STYLE_BASE, TIMELINE_PRESETS, VARIANTS, activeAnimations, adaptKeyframes, adoptVariants, animateWithMotion, animationBudget, announce, applyMotionTokens, applyNativeSettings, applyPack, auditMotionA11y, autoAnimate, autoDegrade, baselineReport, bindEffect, burst, categoryOf, confetti, configureComponents, connectNativeShell, countUp, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoAnimate, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCube, defineCursor, defineDepth, defineDepthComponents, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFullpage, defineFx, defineFxComponents, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePack, definePacksComponents, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, definePostFx, definePress, defineProgress, definePullRefresh, defineRating, defineReveal, defineRevealComponents, defineRipple, defineScramble, defineScrollHighlight, defineScrollProgress, defineScrolly, defineShader, defineShimmerText, defineSkeleton, defineSlider, defineSpinner, defineSplash, defineSplitText, defineSpotlight, defineSpring, defineStagger, defineStickyStack, defineSvgComponents, defineSwipeable, defineTabs, defineTextComponents, defineTextRotate, defineTilt, defineTimeline, defineTimelineComponents, defineToaster, defineToggle, defineTooltip, defineTransitionComponents, defineTypewriter, defineUiComponents, defineViewSwitch, defineWaterRipple, defineWaveText, defineWebglComponents, detectNativeHost, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, flyToCart, fragmentSource, gesture, getEffect, getMotionIntensity, getMotionLevel, getMotionSensitivity, getMotionTokens, glFallbackCss, glGovernor, glQuad, graphemes, haptic, hasEffect, importMotionTokens, interpolatePath, linearEasing, listEffects, liveRegion, loadCategoryStyles, loadedStyles, loadingBar, masonryLayout, mergeMotionTokens, morphPath, morphTo, motionAllowed, motionScale, motionToken, motionTokensToCss, motionTokensToJSON, motionTokensToVars, motionVar, onDemandStyles, onFrame, orientationToTilt, pageTransition, parseDuration, parseEasing, parseNativeSettings, pathsCompatible, pinchScale, playEffect, postFxShader, postToNative, prefersReducedMotion, projectInertia, readScrollProgress, registerBuiltinEffects, registerEffect, registerEffects, requestOrientationPermission, resolveDurationToken, resolveEasingToken, resolvePosition, resolveSpring, restoreMotionIntensity, restoreMotionSensitivity, revealKeyframes, rubberBand, schedulerStats, scrambleFrame, scrollToTarget, setAnimationBudget, setMotionIntensity, setMotionLevel, setMotionSensitivity, setVariant, shake, sharedTransition, smoothScroll, snapTo, splitOrder, splitText, splitTimeline, words as splitWords, spring, springEasing, springEffectKeyframes, springSamples, staticAlternative, stepSpring, supportsLinearEasing, supportsNativeScrub, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition, warnBaseline, watchPowerSaver, withoutDeprecations };
 //# sourceMappingURL=lite.js.map