use-scroll-animate 2.1.0 → 2.3.0

package/dist/chunks/base-CuvCgqLy.js

@@ -0,0 +1,219 @@
+/**
+ * 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.
+ */
+const config = { injectStyles: true, reducedMotion: 'user' };
+/** Change global component settings (call before `define*()` for `injectStyles`). */
+function configureComponents(options) {
+    Object.assign(config, options);
+}
+const canDefine = () => typeof customElements !== 'undefined' && typeof HTMLElement !== 'undefined';
+/** `true` when animations should be reduced (OS setting or `configureComponents`). */
+function prefersReducedMotion() {
+    if (config.reducedMotion !== 'user')
+        return config.reducedMotion === 'reduce';
+    return typeof matchMedia === 'function' && !!matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+const injected = new Set();
+/** Add a component's stylesheet to the document once. */
+function adoptStyles(id, css) {
+    if (!config.injectStyles || !css || injected.has(id) || typeof document === 'undefined')
+        return;
+    injected.add(id);
+    try {
+        if (typeof CSSStyleSheet === 'function' && 'adoptedStyleSheets' in document) {
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(css);
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+            return;
+        }
+    }
+    catch {
+        /* fall through to <style> */
+    }
+    const style = document.createElement('style');
+    style.setAttribute('data-usa', id);
+    style.textContent = css;
+    (document.head || document.documentElement).appendChild(style);
+}
+/** Attach `css` to a shadow root (constructable sheet where supported, else `<style>`). */
+function shadowStyles(root, css) {
+    try {
+        if (typeof CSSStyleSheet === 'function' && 'adoptedStyleSheets' in root) {
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(css);
+            root.adoptedStyleSheets = [sheet];
+            return;
+        }
+    }
+    catch {
+        /* fall through */
+    }
+    const style = document.createElement('style');
+    style.textContent = css;
+    root.prepend(style);
+}
+let baseClass = null;
+/** The lazily created base class (needs `HTMLElement`). */
+function getBase() {
+    if (baseClass)
+        return baseClass;
+    class Base extends HTMLElement {
+        constructor() {
+            super(...arguments);
+            this._cleanups = [];
+            this._connected = false;
+        }
+        get reduced() {
+            return prefersReducedMotion();
+        }
+        connectedCallback() {
+            if (this._connected)
+                return;
+            this._connected = true;
+            // Upgraded while the parser is still inside us (a <script> in <head>
+            // defined the element): children/text are not there yet, so wait.
+            if (typeof document !== 'undefined' && document.readyState === 'loading' && !this.nextSibling && !this.childNodes.length) {
+                const go = () => {
+                    if (this._connected && this.isConnected)
+                        this.mount();
+                };
+                document.addEventListener('DOMContentLoaded', go, { once: true });
+                this._cleanups.push(() => document.removeEventListener('DOMContentLoaded', go));
+                return;
+            }
+            this.mount();
+        }
+        disconnectedCallback() {
+            this._connected = false;
+            this.teardown();
+        }
+        attributeChangedCallback(_name, oldValue, value) {
+            if (!this._connected || oldValue === value)
+                return;
+            this.changed(_name);
+        }
+        /** Re-mount on attribute change (override for finer updates). */
+        changed(_name) {
+            this.teardown();
+            this.mount();
+        }
+        teardown() {
+            this._cleanups.splice(0).reverse().forEach((fn) => fn());
+            this.unmount();
+        }
+        mount() { }
+        unmount() { }
+        str(name, fallback = '') {
+            const v = this.getAttribute(name);
+            return v === null ? fallback : v;
+        }
+        num(name, fallback) {
+            const v = this.getAttribute(name);
+            const n = v === null || v.trim() === '' ? NaN : Number(v);
+            return Number.isFinite(n) ? n : fallback;
+        }
+        /** Boolean attribute: present and not `"false"`. */
+        flag(name) {
+            const v = this.getAttribute(name);
+            return v !== null && v !== 'false';
+        }
+        setFlag(name, on) {
+            if (on)
+                this.setAttribute(name, '');
+            else
+                this.removeAttribute(name);
+        }
+        onCleanup(fn) {
+            this._cleanups.push(fn);
+        }
+        listen(target, type, fn, options) {
+            target.addEventListener(type, fn, options);
+            this.onCleanup(() => target.removeEventListener(type, fn, options));
+        }
+        /** Calls `cb(true/false)` as the element enters / leaves the viewport. */
+        inView(cb, init, target = this) {
+            if (typeof IntersectionObserver === 'undefined') {
+                cb(true);
+                return;
+            }
+            const io = new IntersectionObserver((entries) => {
+                for (const e of entries)
+                    cb(e.isIntersecting, e);
+            }, init);
+            io.observe(target);
+            this.onCleanup(() => io.disconnect());
+        }
+        /** `el.animate()` that returns `null` (and applies the last frame) without WAAPI. */
+        motion(el, keyframes, options) {
+            if (typeof el.animate !== 'function') {
+                applyFrame(el, keyframes[keyframes.length - 1]);
+                return null;
+            }
+            return el.animate(keyframes, options);
+        }
+        emit(type, detail) {
+            return this.dispatchEvent(new CustomEvent(`usa:${type}`, { detail, bubbles: true, cancelable: true }));
+        }
+    }
+    baseClass = Base;
+    return baseClass;
+}
+/** Write a keyframe's properties as inline styles (no-WAAPI fallback). */
+function applyFrame(el, frame) {
+    if (!frame)
+        return;
+    for (const [k, v] of Object.entries(frame)) {
+        if (k === 'offset' || k === 'easing' || k === 'composite' || v == null)
+            continue;
+        el.style[k] = String(v);
+    }
+}
+/**
+ * Register `tag` with the class built by `make(Base)`. Returns the
+ * constructor, the already registered one, or `undefined` without DOM.
+ */
+function defineElement(tag, make, css) {
+    if (!canDefine())
+        return undefined;
+    adoptStyles('base', BASE_CSS);
+    if (css)
+        adoptStyles(css.id, css.text);
+    const existing = customElements.get(tag);
+    if (existing)
+        return existing;
+    const ctor = make(getBase());
+    customElements.define(tag, ctor);
+    return ctor;
+}
+const BASE_CSS = '.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}';
+/** A visually hidden copy of `text` for screen readers (the animated copy is `aria-hidden`). */
+function srText(text) {
+    const s = document.createElement('span');
+    s.className = 'usa-sr';
+    s.textContent = text;
+    return s;
+}
+/** requestAnimationFrame with a timeout fallback (jsdom / hidden documents). */
+const raf = (cb) => typeof requestAnimationFrame === 'function' ? requestAnimationFrame(cb) : setTimeout(() => cb(Date.now()), 16);
+/** Monotonic time in ms (rAF callback timestamps differ between environments, so loops use this). */
+const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now());
+const caf = (id) => {
+    if (typeof cancelAnimationFrame === 'function')
+        cancelAnimationFrame(id);
+    else
+        clearTimeout(id);
+};
+/** Spring-ish easing used across the components. */
+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 clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+
+export { EASE_OUT as E, FLUENT_DECELERATE as F, clamp as a, caf as b, configureComponents as c, defineElement as d, EASE_SPRING as e, shadowStyles as f, applyFrame as g, now as n, prefersReducedMotion as p, raf as r, srText as s };
+//# sourceMappingURL=base-CuvCgqLy.js.map

package/dist/chunks/base-CuvCgqLy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-CuvCgqLy.js","sources":["../../src/components/base.ts"],"sourcesContent":["/**\n * use-scroll-animate/components — shared base for the `<usa-*>` custom elements.\n *\n * Everything here is lazy: nothing touches `window`, `document`,\n * `HTMLElement` or `matchMedia` at import time, so the components can be\n * imported during SSR (Next, Nuxt, Astro…) and in Electron/Tauri preload\n * scripts. Classes are created the first time a `define*()` function runs.\n */\n\nexport interface ComponentsConfig {\n  /**\n   * Inject each component's CSS when it is defined (default `true`). Uses a\n   * constructable stylesheet (`document.adoptedStyleSheets`, which a strict\n   * `style-src` CSP does not block) and falls back to a `<style>` tag. Set\n   * to `false` when you load `use-scroll-animate/components.css` yourself.\n   */\n  injectStyles?: boolean;\n  /**\n   * `'user'` (default) follows `prefers-reduced-motion`; `'reduce'` always\n   * uses the reduced variants (e.g. a kiosk / battery-saver mode);\n   * `'no-preference'` ignores the OS setting (only for demos — respect your users).\n   */\n  reducedMotion?: 'user' | 'reduce' | 'no-preference';\n}\n\nconst config: Required<ComponentsConfig> = { injectStyles: true, reducedMotion: 'user' };\n\n/** Change global component settings (call before `define*()` for `injectStyles`). */\nexport function configureComponents(options: ComponentsConfig): void {\n  Object.assign(config, options);\n}\n\nexport const canDefine = (): boolean => typeof customElements !== 'undefined' && typeof HTMLElement !== 'undefined';\n\n/** `true` when animations should be reduced (OS setting or `configureComponents`). */\nexport function prefersReducedMotion(): boolean {\n  if (config.reducedMotion !== 'user') return config.reducedMotion === 'reduce';\n  return typeof matchMedia === 'function' && !!matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\nconst injected = new Set<string>();\n\n/** Add a component's stylesheet to the document once. */\nexport function adoptStyles(id: string, css: string): void {\n  if (!config.injectStyles || !css || injected.has(id) || typeof document === 'undefined') return;\n  injected.add(id);\n  try {\n    if (typeof CSSStyleSheet === 'function' && 'adoptedStyleSheets' in document) {\n      const sheet = new CSSStyleSheet();\n      sheet.replaceSync(css);\n      document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];\n      return;\n    }\n  } catch {\n    /* fall through to <style> */\n  }\n  const style = document.createElement('style');\n  style.setAttribute('data-usa', id);\n  style.textContent = css;\n  (document.head || document.documentElement).appendChild(style);\n}\n\n/** Attach `css` to a shadow root (constructable sheet where supported, else `<style>`). */\nexport function shadowStyles(root: ShadowRoot, css: string): void {\n  try {\n    if (typeof CSSStyleSheet === 'function' && 'adoptedStyleSheets' in root) {\n      const sheet = new CSSStyleSheet();\n      sheet.replaceSync(css);\n      root.adoptedStyleSheets = [sheet];\n      return;\n    }\n  } catch {\n    /* fall through */\n  }\n  const style = document.createElement('style');\n  style.textContent = css;\n  root.prepend(style);\n}\n\nexport type Cleanup = () => void;\n\n/**\n * Members shared by every `<usa-*>` element. Attribute helpers, a cleanup\n * bag that is emptied on disconnect, and motion helpers that degrade to the\n * final state without WAAPI or under reduced motion.\n */\nexport interface UsaElement extends HTMLElement {\n  /** `true` while reduced motion applies to this element. */\n  readonly reduced: boolean;\n}\n\nexport interface UsaBase extends UsaElement {\n  mount(): void;\n  changed(name: string): void;\n  unmount(): void;\n  str(name: string, fallback?: string): string;\n  num(name: string, fallback: number): number;\n  flag(name: string): boolean;\n  setFlag(name: string, on: boolean): void;\n  onCleanup(fn: Cleanup): void;\n  listen<K extends keyof HTMLElementEventMap>(\n    target: EventTarget,\n    type: K | string,\n    fn: (e: any) => void,\n    options?: AddEventListenerOptions\n  ): void;\n  inView(cb: (visible: boolean, entry?: IntersectionObserverEntry) => void, init?: IntersectionObserverInit, target?: Element): void;\n  motion(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;\n  emit(type: string, detail?: unknown): boolean;\n}\n\ntype BaseCtor = new () => UsaBase;\nlet baseClass: BaseCtor | null = null;\n\n/** The lazily created base class (needs `HTMLElement`). */\nexport function getBase(): BaseCtor {\n  if (baseClass) return baseClass;\n  class Base extends HTMLElement {\n    private _cleanups: Cleanup[] = [];\n    private _connected = false;\n\n    get reduced(): boolean {\n      return prefersReducedMotion();\n    }\n\n    connectedCallback(): void {\n      if (this._connected) return;\n      this._connected = true;\n      // Upgraded while the parser is still inside us (a <script> in <head>\n      // defined the element): children/text are not there yet, so wait.\n      if (typeof document !== 'undefined' && document.readyState === 'loading' && !this.nextSibling && !this.childNodes.length) {\n        const go = () => {\n          if (this._connected && this.isConnected) this.mount();\n        };\n        document.addEventListener('DOMContentLoaded', go, { once: true });\n        this._cleanups.push(() => document.removeEventListener('DOMContentLoaded', go));\n        return;\n      }\n      this.mount();\n    }\n\n    disconnectedCallback(): void {\n      this._connected = false;\n      this.teardown();\n    }\n\n    attributeChangedCallback(_name: string, oldValue: string | null, value: string | null): void {\n      if (!this._connected || oldValue === value) return;\n      this.changed(_name);\n    }\n\n    /** Re-mount on attribute change (override for finer updates). */\n    changed(_name: string): void {\n      this.teardown();\n      this.mount();\n    }\n\n    private teardown(): void {\n      this._cleanups.splice(0).reverse().forEach((fn) => fn());\n      this.unmount();\n    }\n\n    mount(): void {}\n    unmount(): void {}\n\n    str(name: string, fallback = ''): string {\n      const v = this.getAttribute(name);\n      return v === null ? fallback : v;\n    }\n\n    num(name: string, fallback: number): number {\n      const v = this.getAttribute(name);\n      const n = v === null || v.trim() === '' ? NaN : Number(v);\n      return Number.isFinite(n) ? n : fallback;\n    }\n\n    /** Boolean attribute: present and not `\"false\"`. */\n    flag(name: string): boolean {\n      const v = this.getAttribute(name);\n      return v !== null && v !== 'false';\n    }\n\n    setFlag(name: string, on: boolean): void {\n      if (on) this.setAttribute(name, '');\n      else this.removeAttribute(name);\n    }\n\n    onCleanup(fn: Cleanup): void {\n      this._cleanups.push(fn);\n    }\n\n    listen(target: EventTarget, type: string, fn: (e: any) => void, options?: AddEventListenerOptions): void {\n      target.addEventListener(type, fn, options);\n      this.onCleanup(() => target.removeEventListener(type, fn, options));\n    }\n\n    /** Calls `cb(true/false)` as the element enters / leaves the viewport. */\n    inView(cb: (visible: boolean, entry?: IntersectionObserverEntry) => void, init?: IntersectionObserverInit, target: Element = this): void {\n      if (typeof IntersectionObserver === 'undefined') {\n        cb(true);\n        return;\n      }\n      const io = new IntersectionObserver((entries) => {\n        for (const e of entries) cb(e.isIntersecting, e);\n      }, init);\n      io.observe(target);\n      this.onCleanup(() => io.disconnect());\n    }\n\n    /** `el.animate()` that returns `null` (and applies the last frame) without WAAPI. */\n    motion(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null {\n      if (typeof (el as HTMLElement).animate !== 'function') {\n        applyFrame(el as HTMLElement, keyframes[keyframes.length - 1]);\n        return null;\n      }\n      return (el as HTMLElement).animate(keyframes, options);\n    }\n\n    emit(type: string, detail?: unknown): boolean {\n      return this.dispatchEvent(new CustomEvent(`usa:${type}`, { detail, bubbles: true, cancelable: true }));\n    }\n  }\n  baseClass = Base as unknown as BaseCtor;\n  return baseClass;\n}\n\n/** Write a keyframe's properties as inline styles (no-WAAPI fallback). */\nexport function applyFrame(el: HTMLElement, frame?: Keyframe): void {\n  if (!frame) return;\n  for (const [k, v] of Object.entries(frame)) {\n    if (k === 'offset' || k === 'easing' || k === 'composite' || v == null) continue;\n    (el.style as any)[k] = String(v);\n  }\n}\n\n/**\n * Register `tag` with the class built by `make(Base)`. Returns the\n * constructor, the already registered one, or `undefined` without DOM.\n */\nexport function defineElement(\n  tag: string,\n  make: (Base: BaseCtor) => CustomElementConstructor,\n  css?: { id: string; text: string }\n): CustomElementConstructor | undefined {\n  if (!canDefine()) return undefined;\n  adoptStyles('base', BASE_CSS);\n  if (css) adoptStyles(css.id, css.text);\n  const existing = customElements.get(tag);\n  if (existing) return existing;\n  const ctor = make(getBase());\n  customElements.define(tag, ctor);\n  return ctor;\n}\n\nconst BASE_CSS = '.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}';\n\n/** A visually hidden copy of `text` for screen readers (the animated copy is `aria-hidden`). */\nexport function srText(text: string): HTMLSpanElement {\n  const s = document.createElement('span');\n  s.className = 'usa-sr';\n  s.textContent = text;\n  return s;\n}\n\n/** requestAnimationFrame with a timeout fallback (jsdom / hidden documents). */\nexport const raf = (cb: FrameRequestCallback): number =>\n  typeof requestAnimationFrame === 'function' ? requestAnimationFrame(cb) : (setTimeout(() => cb(Date.now()), 16) as unknown as number);\n/** Monotonic time in ms (rAF callback timestamps differ between environments, so loops use this). */\nexport const now = (): number => (typeof performance !== 'undefined' ? performance.now() : Date.now());\nexport const caf = (id: number): void => {\n  if (typeof cancelAnimationFrame === 'function') cancelAnimationFrame(id);\n  else clearTimeout(id);\n};\n\n/** Spring-ish easing used across the components. */\nexport const EASE_OUT = 'cubic-bezier(0.22, 1, 0.36, 1)';\nexport const EASE_SPRING = 'cubic-bezier(0.34, 1.56, 0.64, 1)';\n/** Windows Fluent \"decelerate\" / \"point-to-point\" curves. */\nexport const FLUENT_DECELERATE = 'cubic-bezier(0.1, 0.9, 0.2, 1)';\n\nexport const clamp = (v: number, min: number, max: number): number => Math.min(max, Math.max(min, v));\n"],"names":[],"mappings":"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"}

package/dist/components/background.cjs

@@ -0,0 +1,395 @@
+'use strict';
+
+var base = require('../chunks/base-CJ7XfidP.cjs');
+
+var css$4 = "usa-aurora{position:relative;display:block;isolation:isolate;overflow:hidden}usa-aurora .usa-aurora-layer{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--usa-aurora-opacity,0.7);overflow:hidden;contain:strict}usa-aurora .usa-aurora-layer i{position:absolute;display:block;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);will-change:transform;animation:usa-aurora-a var(--usa-aurora-speed,18s) ease-in-out infinite alternate}usa-aurora .usa-aurora-layer i:nth-child(1){left:-15%;top:-30%}usa-aurora .usa-aurora-layer i:nth-child(2){right:-20%;top:-10%;animation-name:usa-aurora-b;animation-duration:calc(var(--usa-aurora-speed,18s) * 1.3)}usa-aurora .usa-aurora-layer i:nth-child(3){left:10%;bottom:-45%;animation-name:usa-aurora-c;animation-duration:calc(var(--usa-aurora-speed,18s) * 0.9)}usa-aurora .usa-aurora-layer i:nth-child(4){right:0;bottom:-30%;width:50%;animation-name:usa-aurora-b;animation-direction:alternate-reverse}usa-aurora[paused] .usa-aurora-layer i,usa-aurora[data-offscreen] .usa-aurora-layer i{animation-play-state:paused}@keyframes usa-aurora-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(30%,20%,0) scale(1.25)}}@keyframes usa-aurora-b{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-35%,25%,0) scale(0.85)}}@keyframes usa-aurora-c{from{transform:translate3d(0,0,0) rotate(0deg) scale(1)}to{transform:translate3d(25%,-30%,0) rotate(40deg) scale(1.2)}}@media (prefers-reduced-motion:reduce){usa-aurora .usa-aurora-layer i,usa-grain .usa-grain-layer,usa-acrylic::after{animation:none !important}}";
+
+function defineAurora(tag = 'usa-aurora') {
+    return base.defineElement(tag, (Base) => class UsaAurora extends Base {
+        constructor() {
+            super(...arguments);
+            this._layer = null;
+        }
+        static get observedAttributes() {
+            return ['colors', 'speed', 'intensity'];
+        }
+        mount() {
+            if (!this._layer) {
+                this._layer = document.createElement('div');
+                this._layer.className = 'usa-aurora-layer';
+                this._layer.setAttribute('aria-hidden', 'true');
+                this._layer.innerHTML = '<i></i><i></i><i></i><i></i>';
+                this.prepend(this._layer);
+            }
+            const colors = this.str('colors', '#7c5cff,#22d3ee,#f472b6,#34d399').split(',').map((c) => c.trim()).filter(Boolean);
+            Array.from(this._layer.children).forEach((blob, i) => {
+                blob.style.setProperty('--c', colors[i % colors.length]);
+            });
+            const speed = this.num('speed', 1);
+            this.style.setProperty('--usa-aurora-speed', `${(18 / Math.max(0.05, speed)).toFixed(2)}s`);
+            this.style.setProperty('--usa-aurora-opacity', String(this.num('intensity', 0.7)));
+            this.inView((v) => this.toggleAttribute('data-offscreen', !v));
+        }
+    }, { id: 'aurora', text: css$4 });
+}
+
+var css$3 = "usa-particles{position:relative;display:block;min-height:120px;overflow:hidden}usa-particles>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}";
+
+function defineParticles(tag = 'usa-particles') {
+    return base.defineElement(tag, (Base) => class UsaParticles extends Base {
+        constructor() {
+            super(...arguments);
+            this._canvas = null;
+            this._ctx = null;
+            this._ps = [];
+            this._frame = 0;
+            this._w = 0;
+            this._h = 0;
+            this._visible = false;
+            this._mx = -1e4;
+            this._color = '#888';
+            this._my = -1e4;
+        }
+        static get observedAttributes() {
+            return ['count', 'color', 'size', 'speed', 'links', 'interactive', 'paused'];
+        }
+        mount() {
+            if (!this._canvas) {
+                this._canvas = document.createElement('canvas');
+                this._canvas.setAttribute('aria-hidden', 'true');
+                this.prepend(this._canvas);
+            }
+            this._ctx = this._canvas.getContext?.('2d') ?? null;
+            if (!this._ctx)
+                return;
+            this.resize();
+            if (typeof ResizeObserver !== 'undefined') {
+                const ro = new ResizeObserver(() => {
+                    this.resize();
+                    if (!this._frame)
+                        this.draw();
+                });
+                ro.observe(this);
+                this.onCleanup(() => ro.disconnect());
+            }
+            this.inView((v) => {
+                this._visible = v;
+                this.loop();
+            });
+            this.listen(document, 'visibilitychange', () => this.loop());
+            if (this.flag('interactive')) {
+                this.listen(window, 'pointermove', (e) => {
+                    const r = this.getBoundingClientRect();
+                    this._mx = e.clientX - r.left;
+                    this._my = e.clientY - r.top;
+                }, { passive: true });
+            }
+            this.draw();
+        }
+        unmount() {
+            base.caf(this._frame);
+            this._frame = 0;
+        }
+        reset() {
+            this._ps = [];
+            this.resize();
+            this.draw();
+        }
+        resize() {
+            const c = this._canvas;
+            if (!c || !this._ctx)
+                return;
+            const w = this.clientWidth || 300;
+            const h = this.clientHeight || 150;
+            const dpr = Math.min(2, (typeof devicePixelRatio === 'number' && devicePixelRatio) || 1);
+            c.width = Math.round(w * dpr);
+            c.height = Math.round(h * dpr);
+            this._ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            this._w = w;
+            this._h = h;
+            this._color = this.getAttribute('color') || (typeof getComputedStyle === 'function' ? getComputedStyle(this).color : '') || '#888';
+            const want = Math.round(Math.min(1, (w * h) / (900 * 500)) * Math.max(1, this.num('count', 60))) || 1;
+            const speed = this.num('speed', 0.35);
+            const size = this.num('size', 2.2);
+            while (this._ps.length < want) {
+                const a = Math.random() * Math.PI * 2;
+                const s = speed * (0.3 + Math.random() * 0.7);
+                this._ps.push({ x: Math.random() * w, y: Math.random() * h, vx: Math.cos(a) * s, vy: Math.sin(a) * s, r: 0.6 + Math.random() * (size - 0.6) });
+            }
+            this._ps.length = want;
+        }
+        loop() {
+            const run = this._visible && !this.reduced && !this.flag('paused') && !(typeof document !== 'undefined' && document.hidden);
+            if (run && !this._frame) {
+                const tick = () => {
+                    this.step();
+                    this.draw();
+                    this._frame = base.raf(tick);
+                };
+                this._frame = base.raf(tick);
+            }
+            else if (!run && this._frame) {
+                base.caf(this._frame);
+                this._frame = 0;
+            }
+        }
+        step() {
+            const { _w: w, _h: h } = this;
+            for (const p of this._ps) {
+                const dx = p.x - this._mx;
+                const dy = p.y - this._my;
+                const d2 = dx * dx + dy * dy;
+                if (d2 < 8100 && d2 > 0.01) {
+                    const f = (1 - Math.sqrt(d2) / 90) * 0.6;
+                    p.x += (dx / Math.sqrt(d2)) * f;
+                    p.y += (dy / Math.sqrt(d2)) * f;
+                }
+                p.x += p.vx;
+                p.y += p.vy;
+                if (p.x < -5)
+                    p.x = w + 5;
+                else if (p.x > w + 5)
+                    p.x = -5;
+                if (p.y < -5)
+                    p.y = h + 5;
+                else if (p.y > h + 5)
+                    p.y = -5;
+            }
+        }
+        draw() {
+            const ctx = this._ctx;
+            if (!ctx)
+                return;
+            const color = this._color;
+            ctx.clearRect(0, 0, this._w, this._h);
+            ctx.fillStyle = color;
+            ctx.strokeStyle = color;
+            const ps = this._ps;
+            const link = this.num('links', 110);
+            if (link > 0) {
+                const l2 = link * link;
+                ctx.lineWidth = 0.6;
+                for (let i = 0; i < ps.length; i++) {
+                    for (let j = i + 1; j < ps.length; j++) {
+                        const dx = ps[i].x - ps[j].x;
+                        const dy = ps[i].y - ps[j].y;
+                        const d2 = dx * dx + dy * dy;
+                        if (d2 < l2) {
+                            ctx.globalAlpha = (1 - d2 / l2) * 0.35;
+                            ctx.beginPath();
+                            ctx.moveTo(ps[i].x, ps[i].y);
+                            ctx.lineTo(ps[j].x, ps[j].y);
+                            ctx.stroke();
+                        }
+                    }
+                }
+            }
+            ctx.globalAlpha = 0.85;
+            for (const p of ps) {
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+                ctx.fill();
+            }
+            ctx.globalAlpha = 1;
+        }
+    }, { id: 'particles', text: css$3 });
+}
+
+var css$2 = "usa-grain{position:relative;display:block;isolation:isolate;overflow:hidden}usa-grain .usa-grain-layer{position:absolute;inset:-100%;z-index:1;pointer-events:none}usa-grain[animated] .usa-grain-layer{animation:usa-grain 0.8s steps(10) infinite}@keyframes usa-grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-8%)}20%{transform:translate(-12%,4%)}30%{transform:translate(6%,-16%)}40%{transform:translate(-4%,18%)}50%{transform:translate(-12%,8%)}60%{transform:translate(14%,0)}70%{transform:translate(0,12%)}80%{transform:translate(3%,25%)}90%{transform:translate(-8%,8%)}}";
+
+const noise = (freq) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${freq}' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.6 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`;
+function defineGrain(tag = 'usa-grain') {
+    return base.defineElement(tag, (Base) => class UsaGrain extends Base {
+        constructor() {
+            super(...arguments);
+            this._layer = null;
+        }
+        static get observedAttributes() {
+            return ['opacity', 'blend', 'scale'];
+        }
+        mount() {
+            if (!this._layer) {
+                this._layer = document.createElement('div');
+                this._layer.className = 'usa-grain-layer';
+                this._layer.setAttribute('aria-hidden', 'true');
+                this.append(this._layer);
+            }
+            const s = this._layer.style;
+            s.backgroundImage = noise(0.8);
+            s.backgroundSize = `${this.num('scale', 180)}px`;
+            s.opacity = String(this.num('opacity', 0.12));
+            s.mixBlendMode = this.str('blend', 'overlay');
+        }
+    }, { id: 'grain', text: css$2 });
+}
+
+var css$1 = "usa-marquee{--usa-marquee-gap:32px;display:block;overflow:hidden;contain:content}usa-marquee[fade]{-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}usa-marquee[fade][data-vertical]{-webkit-mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}usa-marquee .usa-marquee-track{display:flex;width:max-content;gap:var(--usa-marquee-gap);will-change:transform}usa-marquee .usa-marquee-group{display:flex;flex:none;align-items:center;gap:var(--usa-marquee-gap)}usa-marquee[data-vertical] .usa-marquee-track,usa-marquee[data-vertical] .usa-marquee-group{flex-direction:column;width:auto}usa-marquee[data-vertical]{height:var(--usa-marquee-height,240px)}usa-marquee[data-static]{overflow:auto;scrollbar-width:thin}";
+
+function defineMarquee(tag = 'usa-marquee') {
+    return base.defineElement(tag, (Base) => class UsaMarquee extends Base {
+        constructor() {
+            super(...arguments);
+            this._track = null;
+            this._anim = null;
+            this._hover = false;
+            this._visible = true;
+            this._size = 0;
+        }
+        static get observedAttributes() {
+            return ['speed', 'direction', 'gap', 'paused'];
+        }
+        get vertical() {
+            const d = this.str('direction', 'left');
+            return d === 'up' || d === 'down';
+        }
+        mount() {
+            if (!this._track) {
+                const track = document.createElement('div');
+                track.className = 'usa-marquee-track';
+                const group = document.createElement('div');
+                group.className = 'usa-marquee-group';
+                group.append(...Array.from(this.childNodes));
+                track.append(group);
+                this.append(track);
+                this._track = track;
+            }
+            this.toggleAttribute('data-vertical', this.vertical);
+            this.style.setProperty('--usa-marquee-gap', `${this.num('gap', 32)}px`);
+            if (this.reduced) {
+                this.setAttribute('data-static', '');
+                this.syncClones(1);
+                return;
+            }
+            this.removeAttribute('data-static');
+            this.build();
+            if (typeof ResizeObserver !== 'undefined') {
+                const ro = new ResizeObserver(() => this.build());
+                ro.observe(this._track.firstElementChild);
+                this.onCleanup(() => ro.disconnect());
+            }
+            this.inView((v) => {
+                this._visible = v;
+                this.sync();
+            });
+            this.listen(this, 'pointerenter', () => ((this._hover = true), this.sync()));
+            this.listen(this, 'pointerleave', () => ((this._hover = false), this.sync()));
+            this.listen(this, 'focusin', () => ((this._hover = true), this.sync()));
+            this.listen(this, 'focusout', () => ((this._hover = false), this.sync()));
+        }
+        unmount() {
+            this._anim?.cancel();
+            this._anim = null;
+            this._size = 0;
+        }
+        syncClones(n) {
+            const track = this._track;
+            const group = track.firstElementChild;
+            while (track.children.length > n)
+                track.lastElementChild.remove();
+            while (track.children.length < n) {
+                const clone = group.cloneNode(true);
+                clone.setAttribute('aria-hidden', 'true');
+                clone.setAttribute('inert', '');
+                track.append(clone);
+            }
+        }
+        build() {
+            const track = this._track;
+            const group = track.firstElementChild;
+            const vertical = this.vertical;
+            const gap = this.num('gap', 32);
+            const measured = vertical ? group.offsetHeight : group.offsetWidth;
+            if (!measured)
+                return; // not laid out yet: the ResizeObserver calls back
+            const size = measured + gap;
+            if (this._anim && this._size === size)
+                return;
+            this._size = size;
+            const box = (vertical ? this.clientHeight : this.clientWidth) || size;
+            // Enough copies to cover the box twice
+            this.syncClones(Math.min(50, Math.max(2, Math.ceil(box / size) + 1)));
+            const progress = this._anim?.effect?.getComputedTiming().progress ?? 0;
+            this._anim?.cancel();
+            const axis = vertical ? 'Y' : 'X';
+            const reverse = ['right', 'down'].includes(this.str('direction', 'left'));
+            const frames = [{ transform: `translate${axis}(0)` }, { transform: `translate${axis}(${-size}px)` }];
+            this._anim = this.motion(track, reverse ? frames.reverse() : frames, {
+                duration: (Math.max(1, size) / Math.max(1, this.num('speed', 50))) * 1000,
+                iterations: Infinity,
+            });
+            if (this._anim && progress)
+                this._anim.currentTime = progress * Number(this._anim.effect?.getTiming().duration || 0);
+            this.sync();
+        }
+        sync() {
+            const a = this._anim;
+            if (!a)
+                return;
+            const stop = this.flag('paused') || !this._visible || (this._hover && this.flag('pause-on-hover'));
+            if (stop && a.playState === 'running')
+                a.pause();
+            else if (!stop && a.playState === 'paused')
+                a.play();
+        }
+        pause() {
+            this.setAttribute('paused', '');
+        }
+        resume() {
+            this.removeAttribute('paused');
+        }
+        changed(name) {
+            if (name === 'paused')
+                this.sync();
+            else
+                super.changed(name);
+        }
+    }, { id: 'marquee', text: css$1 });
+}
+
+var css = "usa-acrylic{--usa-acrylic-tint:#f3f3f3;--usa-acrylic-opacity:55%;--usa-acrylic-blur:30px;position:relative;display:block;isolation:isolate;overflow:hidden;background-color:color-mix(in srgb,var(--usa-acrylic-tint) var(--usa-acrylic-opacity),transparent);-webkit-backdrop-filter:blur(var(--usa-acrylic-blur)) saturate(1.6);backdrop-filter:blur(var(--usa-acrylic-blur)) saturate(1.6);border:1px solid color-mix(in srgb,#fff 22%,transparent)}@media (prefers-color-scheme:dark){usa-acrylic{--usa-acrylic-tint:#2c2c2c}}usa-acrylic::before{content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0.035;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")}usa-acrylic::after{content:\"\";position:absolute;inset:0;z-index:1;pointer-events:none;transform:translateX(-120%);background:linear-gradient(105deg,transparent 30%,rgb(255 255 255 / 0.28) 50%,transparent 70%)}usa-acrylic[shimmer=\"hover\"]:hover::after,usa-acrylic[data-shine]::after{animation:usa-acrylic-shine 1.1s cubic-bezier(0.22,1,0.36,1) both}@keyframes usa-acrylic-shine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}usa-acrylic[variant=\"mica\"]{--usa-acrylic-opacity:80%;-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(color-mix(in srgb,var(--usa-acrylic-tint) var(--usa-acrylic-opacity),transparent),color-mix(in srgb,var(--usa-acrylic-tint) var(--usa-acrylic-opacity),transparent)),var(--usa-mica-source,linear-gradient(135deg,#b8c6ff,#ffd6e8));border-color:transparent}@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){usa-acrylic{background-color:var(--usa-acrylic-tint)}}@media (prefers-reduced-transparency:reduce){usa-acrylic{background:var(--usa-acrylic-tint);-webkit-backdrop-filter:none;backdrop-filter:none}}@media (forced-colors:active){usa-acrylic{background:Canvas;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:CanvasText}usa-acrylic::before,usa-acrylic::after{display:none}}";
+
+function defineAcrylic(tag = 'usa-acrylic') {
+    return base.defineElement(tag, (Base) => class UsaAcrylic extends Base {
+        static get observedAttributes() {
+            return ['tint', 'tint-opacity', 'blur', 'shimmer'];
+        }
+        mount() {
+            const tint = this.getAttribute('tint');
+            if (tint)
+                this.style.setProperty('--usa-acrylic-tint', tint);
+            else
+                this.style.removeProperty('--usa-acrylic-tint');
+            this.style.setProperty('--usa-acrylic-opacity', `${Math.round(this.num('tint-opacity', 0.55) * 100)}%`);
+            this.style.setProperty('--usa-acrylic-blur', `${this.num('blur', 30)}px`);
+            if (this.str('shimmer') === 'load' && !this.reduced) {
+                this.removeAttribute('data-shine');
+                void this.offsetWidth;
+                this.setAttribute('data-shine', '');
+            }
+        }
+    }, { id: 'acrylic', text: css });
+}
+
+/**
+ * use-scroll-animate/components/background — backgrounds & decoration.
+ * `<usa-aurora>`, `<usa-particles>`, `<usa-grain>`, `<usa-marquee>`,
+ * `<usa-acrylic>`.
+ */
+/** Register every component of this category under its default tag. */
+function defineBackgroundComponents() {
+    defineAurora();
+    defineParticles();
+    defineGrain();
+    defineMarquee();
+    defineAcrylic();
+}
+
+exports.configureComponents = base.configureComponents;
+exports.prefersReducedMotion = base.prefersReducedMotion;
+exports.defineAcrylic = defineAcrylic;
+exports.defineAurora = defineAurora;
+exports.defineBackgroundComponents = defineBackgroundComponents;
+exports.defineGrain = defineGrain;
+exports.defineMarquee = defineMarquee;
+exports.defineParticles = defineParticles;
+//# sourceMappingURL=background.cjs.map