use-scroll-animate 3.4.0 → 3.6.0

package/dist/components/timeline.js

@@ -1,5 +1,5 @@
-import { p as prefersReducedMotion, d as caf, f as clamp, b as applyFrame, r as raf, m as motionScale, n as now, h as defineElement } from '../chunks/base-Cu-86Z31.js';
-export { a as configureComponents } from '../chunks/base-Cu-86Z31.js';
+import { p as prefersReducedMotion, e as caf, b as clamp, d as applyFrame, r as raf, m as motionScale, n as now, h as defineElement } from '../chunks/base-BpROOcey.js';
+export { a as configureComponents } from '../chunks/base-BpROOcey.js';
 
 /** Keyframe presets usable by name in `to()` and `data-tl`. */
 const TIMELINE_PRESETS = {

package/dist/components/transitions.js

@@ -1,5 +1,5 @@
-import { h as defineElement, k as kindOf, s as shadowStyles, i as EASE_OUT, F as FLUENT_DECELERATE, p as prefersReducedMotion } from '../chunks/base-Cu-86Z31.js';
-export { a as configureComponents } from '../chunks/base-Cu-86Z31.js';
+import { h as defineElement, k as kindOf, s as shadowStyles, i as EASE_OUT, F as FLUENT_DECELERATE, p as prefersReducedMotion } from '../chunks/base-BpROOcey.js';
+export { a as configureComponents } from '../chunks/base-BpROOcey.js';
 
 var shadowCss = ":host{display:contents}dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:hidden}dialog:not([open]){display:none}dialog::backdrop{background:transparent}[part=\"backdrop\"]{position:absolute;inset:0;background:var(--usa-dialog-backdrop,rgb(0 0 0 / 0.42))}[part=\"panel\"]{position:absolute;left:50%;top:50%;translate:-50% -50%;box-sizing:border-box;width:min(var(--usa-dialog-width,480px),calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:var(--usa-dialog-padding,24px);border-radius:var(--usa-dialog-radius,12px);background:var(--usa-dialog-bg,Canvas);color:var(--usa-dialog-fg,CanvasText);box-shadow:0 32px 64px -12px rgb(0 0 0 / 0.45),0 0 0 1px rgb(127 127 127 / 0.18)}dialog[data-kind^=\"drawer\"] [part=\"panel\"]{top:0;bottom:0;translate:none;max-height:none;height:100%;border-radius:0;width:min(var(--usa-dialog-width,380px),88vw)}dialog[data-kind=\"drawer-start\"] [part=\"panel\"]{left:0}dialog[data-kind=\"drawer-end\"] [part=\"panel\"]{left:auto;right:0}dialog[data-kind=\"drawer-bottom\"] [part=\"panel\"],dialog[data-kind=\"sheet\"] [part=\"panel\"]{top:auto;bottom:0;left:0;right:0;translate:none;width:100%;height:auto;max-height:85vh;border-radius:var(--usa-dialog-radius,16px) var(--usa-dialog-radius,16px) 0 0}dialog[data-kind=\"sheet\"] [part=\"panel\"]{left:50%;translate:-50% 0;width:min(var(--usa-dialog-width,560px),100vw)}";
 

package/dist/components/ui.js

@@ -1,8 +1,8 @@
-import { h as defineElement, f as clamp, d as caf, r as raf } from '../chunks/base-Cu-86Z31.js';
-export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-Cu-86Z31.js';
-import { d as springEasing, c as createSpring, p as projectInertia, s as snapTo, a as rubberBand } from '../chunks/spring-BV-cpTHC.js';
-import { a as adoptVariants } from '../chunks/variants-BQ3gCb5L.js';
-export { V as VARIANTS, s as setVariant } from '../chunks/variants-BQ3gCb5L.js';
+import { h as defineElement, b as clamp, e as caf, r as raf } from '../chunks/base-BpROOcey.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-BpROOcey.js';
+import { d as springEasing, c as createSpring, p as projectInertia, s as snapTo, a as rubberBand } from '../chunks/spring-C-fw7_9f.js';
+import { a as adoptVariants } from '../chunks/variants-CHe1VbSn.js';
+export { V as VARIANTS, s as setVariant } from '../chunks/variants-CHe1VbSn.js';
 
 /** Position a fixed `floating` element next to `anchor`, flipping when it would leave the viewport. */
 function place(floating, anchor, placement = 'top', gap = 8) {

package/dist/components/vue.cjs

@@ -17,9 +17,12 @@ require('./ui.cjs');
 require('./page.cjs');
 require('./timeline.cjs');
 require('./gesture.cjs');
+require('../chunks/core-IaorbTdu.cjs');
 require('./svg.cjs');
 require('./webgl.cjs');
-require('../chunks/index-tags-BKcHAxBK.cjs');
+require('./depth.cjs');
+require('./layout.cjs');
+require('../chunks/index-tags-wbuPiMR6.cjs');
 
 /**
  * use-scroll-animate/components/vue — Vue integration (v2.9).

package/dist/components/vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"vue.cjs","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":["defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAAA,2BAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;;"}
+{"version":3,"file":"vue.cjs","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":["defineComponents"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAAA,2BAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;;"}

package/dist/components/vue.d.cts

@@ -1510,6 +1510,86 @@ declare global {
     }
 }
 
+/**
+ * `<usa-cube>` — a CSS 3D cube whose up-to-six element children are its faces
+ * (front, right, back, left, top, bottom). Rotate with drag / swipe, arrow
+ * keys, `autoplay` (ms) or `show(face | index)`; spring-driven.
+ * Attributes: `size` (px, 200), `autoplay`, `perspective` (900).
+ * `usa:change` (`{ index, face }`). Reduced motion: instant face switch.
+ */
+interface UsaCubeElement extends UsaElement {
+    readonly index: number;
+    show(face: number | string): void;
+    next(): void;
+    prev(): void;
+}
+
+/**
+ * `<usa-depth>` — depth parallax: children with `data-depth` (-1…1, 0 = the
+ * screen plane) move and scale by depth as the pointer moves, the device
+ * tilts (`orientation`) or the page scrolls (`scroll`).
+ * Attributes: `source` (`pointer` default · `orientation` · `scroll` ·
+ * space-separated mix), `strength` (px at depth 1, 40), `rotate` (max tilt
+ * of the whole scene in deg, 0). `requestPermission()` for iOS motion.
+ * Reduced motion: layers stay flat.
+ */
+interface UsaDepthElement extends UsaElement {
+    /** Current -1…1 input. */
+    readonly tilt: {
+        x: number;
+        y: number;
+    };
+    requestPermission(): Promise<boolean>;
+}
+
+/**
+ * use-scroll-animate/components/depth — 3D (v3.5).
+ * `<usa-cube>` (CSS 3D cube), `<usa-depth>` (layered depth parallax driven by
+ * pointer, device orientation or scroll) and `deviceTilt()`. The 3D ring
+ * carousel is `<usa-carousel-3d>` in `components/cards`.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-cube': UsaCubeElement;
+        'usa-depth': UsaDepthElement;
+    }
+}
+
+/**
+ * `<usa-auto-animate>` — wraps `autoAnimate()`: any change to its children
+ * (add, remove, re-order, filter, size) animates. Attributes `duration`
+ * (300), `no-scale`. Works for lists and CSS grids alike.
+ */
+interface UsaAutoAnimateElement extends UsaElement {
+    enable(): void;
+    disable(): void;
+}
+/**
+ * `<usa-masonry>` — a masonry (Pinterest-style) grid: children are placed in
+ * the shortest column and glide to new spots when the width, the items or
+ * their sizes change. Attributes `columns` (fixed count) or `min` (min
+ * column width px, 220), `gap` (16). Without JS layout support it is a
+ * plain CSS multi-column flow. Reduced motion: no glide.
+ */
+interface UsaMasonryElement extends UsaElement {
+    layout(): void;
+}
+
+/**
+ * use-scroll-animate/components/layout — layout animation (v3.6).
+ * `autoAnimate()` / `<usa-auto-animate>` (list & grid reflow),
+ * `<usa-masonry>`, and `sharedTransition()` for shared-element transitions
+ * (View Transitions API with a FLIP fallback).
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-auto-animate': UsaAutoAnimateElement;
+        'usa-masonry': UsaMasonryElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1527,6 +1607,8 @@ declare const COMPONENT_CATEGORIES: {
     readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
     readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
     readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid"];
+    readonly depth: readonly ["usa-cube", "usa-depth"];
+    readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/vue.d.ts

@@ -1510,6 +1510,86 @@ declare global {
     }
 }
 
+/**
+ * `<usa-cube>` — a CSS 3D cube whose up-to-six element children are its faces
+ * (front, right, back, left, top, bottom). Rotate with drag / swipe, arrow
+ * keys, `autoplay` (ms) or `show(face | index)`; spring-driven.
+ * Attributes: `size` (px, 200), `autoplay`, `perspective` (900).
+ * `usa:change` (`{ index, face }`). Reduced motion: instant face switch.
+ */
+interface UsaCubeElement extends UsaElement {
+    readonly index: number;
+    show(face: number | string): void;
+    next(): void;
+    prev(): void;
+}
+
+/**
+ * `<usa-depth>` — depth parallax: children with `data-depth` (-1…1, 0 = the
+ * screen plane) move and scale by depth as the pointer moves, the device
+ * tilts (`orientation`) or the page scrolls (`scroll`).
+ * Attributes: `source` (`pointer` default · `orientation` · `scroll` ·
+ * space-separated mix), `strength` (px at depth 1, 40), `rotate` (max tilt
+ * of the whole scene in deg, 0). `requestPermission()` for iOS motion.
+ * Reduced motion: layers stay flat.
+ */
+interface UsaDepthElement extends UsaElement {
+    /** Current -1…1 input. */
+    readonly tilt: {
+        x: number;
+        y: number;
+    };
+    requestPermission(): Promise<boolean>;
+}
+
+/**
+ * use-scroll-animate/components/depth — 3D (v3.5).
+ * `<usa-cube>` (CSS 3D cube), `<usa-depth>` (layered depth parallax driven by
+ * pointer, device orientation or scroll) and `deviceTilt()`. The 3D ring
+ * carousel is `<usa-carousel-3d>` in `components/cards`.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-cube': UsaCubeElement;
+        'usa-depth': UsaDepthElement;
+    }
+}
+
+/**
+ * `<usa-auto-animate>` — wraps `autoAnimate()`: any change to its children
+ * (add, remove, re-order, filter, size) animates. Attributes `duration`
+ * (300), `no-scale`. Works for lists and CSS grids alike.
+ */
+interface UsaAutoAnimateElement extends UsaElement {
+    enable(): void;
+    disable(): void;
+}
+/**
+ * `<usa-masonry>` — a masonry (Pinterest-style) grid: children are placed in
+ * the shortest column and glide to new spots when the width, the items or
+ * their sizes change. Attributes `columns` (fixed count) or `min` (min
+ * column width px, 220), `gap` (16). Without JS layout support it is a
+ * plain CSS multi-column flow. Reduced motion: no glide.
+ */
+interface UsaMasonryElement extends UsaElement {
+    layout(): void;
+}
+
+/**
+ * use-scroll-animate/components/layout — layout animation (v3.6).
+ * `autoAnimate()` / `<usa-auto-animate>` (list & grid reflow),
+ * `<usa-masonry>`, and `sharedTransition()` for shared-element transitions
+ * (View Transitions API with a FLIP fallback).
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-auto-animate': UsaAutoAnimateElement;
+        'usa-masonry': UsaMasonryElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1527,6 +1607,8 @@ declare const COMPONENT_CATEGORIES: {
     readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
     readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
     readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid"];
+    readonly depth: readonly ["usa-cube", "usa-depth"];
+    readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/vue.js

@@ -1,23 +1,26 @@
 import { defineComponents } from '../components.js';
 import './reveal.js';
-import '../chunks/base-Cu-86Z31.js';
+import '../chunks/base-BpROOcey.js';
 import './text.js';
 import './interaction.js';
 import './feedback.js';
 import './background.js';
-import '../chunks/variants-BQ3gCb5L.js';
+import '../chunks/variants-CHe1VbSn.js';
 import './transitions.js';
 import './physics.js';
-import '../chunks/spring-BV-cpTHC.js';
+import '../chunks/spring-C-fw7_9f.js';
 import './cards.js';
 import './click.js';
 import './ui.js';
 import './page.js';
 import './timeline.js';
 import './gesture.js';
+import '../chunks/core-uxs3ETou.js';
 import './svg.js';
 import './webgl.js';
-import '../chunks/index-tags-qc6OWsJ8.js';
+import './depth.js';
+import './layout.js';
+import '../chunks/index-tags-BANJ-e4H.js';
 
 /**
  * use-scroll-animate/components/vue — Vue integration (v2.9).

package/dist/components/vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;"}
+{"version":3,"file":"vue.js","sources":["../../src/components/frameworks/vue.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/vue — Vue integration (v2.9).\n *\n * ```js\n * // vite.config.js\n * import vue from '@vitejs/plugin-vue';\n * import { isUsaElement } from 'use-scroll-animate/components/vue';\n * export default { plugins: [vue({ template: { compilerOptions: { isCustomElement: isUsaElement } } })] };\n *\n * // main.js\n * import { UsaPlugin } from 'use-scroll-animate/components/vue';\n * app.use(UsaPlugin, { categories: ['click', 'cards'] });\n * ```\n * In templates, listen with `@usa:change=\"…\"` and bind properties with\n * `.prop`: `<usa-toggle :checked.prop=\"on\" @usa:change=\"on = $event.detail.checked\">`.\n */\nimport { defineComponents, type ComponentCategory } from '../index';\n\n/** `compilerOptions.isCustomElement` predicate for every `<usa-*>` tag. */\nexport const isUsaElement = (tag: string): boolean => tag.startsWith('usa-');\n\nexport interface UsaPluginOptions {\n  /** Only register these categories (default: all). */\n  categories?: ComponentCategory[];\n}\n\n/** Vue plugin: registers the `<usa-*>` elements (client only) and sets `isCustomElement` at runtime. */\nexport const UsaPlugin = {\n  install(app: { config: { compilerOptions?: { isCustomElement?: (t: string) => boolean } } }, options: UsaPluginOptions = {}): void {\n    const co = (app.config.compilerOptions ||= {});\n    const prev = co.isCustomElement;\n    co.isCustomElement = (t: string) => isUsaElement(t) || !!prev?.(t);\n    defineComponents(options.categories);\n  },\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;AAeG;AAGH;AACO,MAAM,YAAY,GAAG,CAAC,GAAW,KAAc,GAAG,CAAC,UAAU,CAAC,MAAM;AAO3E;AACO,MAAM,SAAS,GAAG;AACvB,IAAA,OAAO,CAAC,GAAmF,EAAE,OAAA,GAA4B,EAAE,EAAA;;AACzH,QAAA,MAAM,EAAE,IAAG,CAAA,EAAA,GAAC,GAAG,CAAC,MAAM,EAAC,eAAe,KAAA,EAAA,CAAf,eAAe,GAAK,EAAE,EAAC;AAC9C,QAAA,MAAM,IAAI,GAAG,EAAE,CAAC,eAAe;QAC/B,EAAE,CAAC,eAAe,GAAG,CAAC,CAAS,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC;AAClE,QAAA,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC;IACtC,CAAC;;;;;"}

package/dist/components/webgl.js

@@ -1,5 +1,5 @@
-import { h as defineElement, n as now, d as caf, f as clamp, r as raf } from '../chunks/base-Cu-86Z31.js';
-export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-Cu-86Z31.js';
+import { h as defineElement, n as now, e as caf, b as clamp, r as raf } from '../chunks/base-BpROOcey.js';
+export { a as configureComponents, p as prefersReducedMotion } from '../chunks/base-BpROOcey.js';
 
 /** Minimal WebGL runner: one full-canvas quad, one fragment shader, optional image texture. */
 const VERTEX = 'attribute vec2 p;varying vec2 v_uv;void main(){v_uv=p*.5+.5;gl_Position=vec4(p,0.,1.);}';

package/dist/components.cjs

@@ -15,10 +15,13 @@ var components_timeline = require('./components/timeline.cjs');
 var components_gesture = require('./components/gesture.cjs');
 var components_svg = require('./components/svg.cjs');
 var components_webgl = require('./components/webgl.cjs');
+var components_depth = require('./components/depth.cjs');
+var components_layout = require('./components/layout.cjs');
 var variants = require('./chunks/variants-BNIrn4ch.cjs');
 var base = require('./chunks/base-CXx7jZ-o.cjs');
-var indexTags = require('./chunks/index-tags-BKcHAxBK.cjs');
+var indexTags = require('./chunks/index-tags-wbuPiMR6.cjs');
 var spring = require('./chunks/spring-2OTnYCzm.cjs');
+var core = require('./chunks/core-IaorbTdu.cjs');
 
 /**
  * use-scroll-animate/components
@@ -56,6 +59,8 @@ const BY_CATEGORY = {
     gesture: components_gesture.defineGestureComponents,
     svg: components_svg.defineSvgComponents,
     webgl: components_webgl.defineWebglComponents,
+    depth: components_depth.defineDepthComponents,
+    layout: components_layout.defineLayoutComponents,
 };
 /**
  * Register every `<usa-*>` component (or only the given categories).
@@ -193,9 +198,6 @@ exports.timeline = components_timeline.timeline;
 exports.defineGestureComponents = components_gesture.defineGestureComponents;
 exports.definePinchZoom = components_gesture.definePinchZoom;
 exports.defineSwipeable = components_gesture.defineSwipeable;
-exports.gesture = components_gesture.gesture;
-exports.pinchScale = components_gesture.pinchScale;
-exports.swipeDirection = components_gesture.swipeDirection;
 exports.ANIM_ICONS = components_svg.ANIM_ICONS;
 exports.MASK_SHAPES = components_svg.MASK_SHAPES;
 exports.defineAnimIcon = components_svg.defineAnimIcon;
@@ -215,6 +217,20 @@ exports.defineWebglComponents = components_webgl.defineWebglComponents;
 exports.fragmentSource = components_webgl.fragmentSource;
 exports.glQuad = components_webgl.glQuad;
 exports.supportsWebGL = components_webgl.supportsWebGL;
+exports.defineCube = components_depth.defineCube;
+exports.defineDepth = components_depth.defineDepth;
+exports.defineDepthComponents = components_depth.defineDepthComponents;
+exports.deviceTilt = components_depth.deviceTilt;
+exports.orientationToTilt = components_depth.orientationToTilt;
+exports.requestOrientationPermission = components_depth.requestOrientationPermission;
+exports.supportsOrientation = components_depth.supportsOrientation;
+exports.autoAnimate = components_layout.autoAnimate;
+exports.defineAutoAnimate = components_layout.defineAutoAnimate;
+exports.defineLayoutComponents = components_layout.defineLayoutComponents;
+exports.defineMasonry = components_layout.defineMasonry;
+exports.flipFrames = components_layout.flipFrames;
+exports.masonryLayout = components_layout.masonryLayout;
+exports.sharedTransition = components_layout.sharedTransition;
 exports.VARIANTS = variants.VARIANTS;
 exports.adoptVariants = variants.adoptVariants;
 exports.setVariant = variants.setVariant;
@@ -235,5 +251,8 @@ exports.springEasing = spring.springEasing;
 exports.springSamples = spring.springSamples;
 exports.stepSpring = spring.stepSpring;
 exports.supportsLinearEasing = spring.supportsLinearEasing;
+exports.gesture = core.gesture;
+exports.pinchScale = core.pinchScale;
+exports.swipeDirection = core.swipeDirection;
 exports.defineComponents = defineComponents;
 //# sourceMappingURL=components.cjs.map

package/dist/components.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"components.cjs","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { defineWebglComponents } from './webgl/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\nexport * from './gesture/index';\nexport * from './svg/index';\nexport * from './webgl/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n  reveal: defineRevealComponents,\n  text: defineTextComponents,\n  interaction: defineInteractionComponents,\n  feedback: defineFeedbackComponents,\n  background: defineBackgroundComponents,\n  transitions: defineTransitionComponents,\n  physics: definePhysicsComponents,\n  cards: defineCardComponents,\n  click: defineClickComponents,\n  ui: defineUiComponents,\n  page: definePageComponents,\n  timeline: defineTimelineComponents,\n  gesture: defineGestureComponents,\n  svg: defineSvgComponents,\n  webgl: defineWebglComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n  if (canDefine()) adoptVariants();\n  (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":["defineRevealComponents","defineTextComponents","defineInteractionComponents","defineFeedbackComponents","defineBackgroundComponents","defineTransitionComponents","definePhysicsComponents","defineCardComponents","defineClickComponents","defineUiComponents","definePageComponents","defineTimelineComponents","defineGestureComponents","defineSvgComponents","defineWebglComponents","canDefine","adoptVariants"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AAuCH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAEA,wCAAsB;AAC9B,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,WAAW,EAAEC,kDAA2B;AACxC,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,UAAU,EAAEC,gDAA0B;AACtC,IAAA,WAAW,EAAEC,iDAA0B;AACvC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,KAAK,EAAEC,qCAAoB;AAC3B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,EAAE,EAAEC,gCAAkB;AACtB,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,GAAG,EAAEC,kCAAmB;AACxB,IAAA,KAAK,EAAEC,sCAAqB;CAC7B;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAIC,cAAS,EAAE;AAAE,QAAAC,sBAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.cjs","sources":["../src/components/index.ts"],"sourcesContent":["/**\n * use-scroll-animate/components\n *\n * Framework-agnostic, dependency-free animated UI components built on\n * Custom Elements + CSS + the Web Animations API. They run in any browser\n * and in Windows desktop apps that render with a web view: Electron, Tauri\n * (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs.\n *\n * ```js\n * import { defineComponents } from 'use-scroll-animate/components';\n * defineComponents(); // registers every <usa-*> element\n * // or only what you use (tree-shakable):\n * import { defineTypewriter } from 'use-scroll-animate/components/text';\n * ```\n *\n * Importing has no side effects and is SSR-safe; nothing is registered\n * until a `define*()` function runs in a browser.\n *\n * @license MIT\n */\nimport { defineRevealComponents } from './reveal/index';\nimport { defineTextComponents } from './text/index';\nimport { defineInteractionComponents } from './interaction/index';\nimport { defineFeedbackComponents } from './feedback/index';\nimport { defineBackgroundComponents } from './background/index';\nimport { defineTransitionComponents } from './transitions/index';\nimport { definePhysicsComponents } from './physics/index';\nimport { defineCardComponents } from './cards/index';\nimport { defineClickComponents } from './click/index';\nimport { defineUiComponents } from './ui/index';\nimport { definePageComponents } from './page/index';\nimport { defineTimelineComponents } from './timeline/index';\nimport { defineGestureComponents } from './gesture/index';\nimport { defineSvgComponents } from './svg/index';\nimport { defineWebglComponents } from './webgl/index';\nimport { defineDepthComponents } from './depth/index';\nimport { defineLayoutComponents } from './layout/index';\nimport { adoptVariants } from './ui/variants';\nimport { canDefine } from './base';\n\nexport * from './reveal/index';\nexport * from './text/index';\nexport * from './interaction/index';\nexport * from './feedback/index';\nexport * from './background/index';\nexport * from './transitions/index';\nexport * from './physics/index';\nexport * from './cards/index';\nexport * from './click/index';\nexport * from './ui/index';\nexport * from './page/index';\nexport * from './timeline/index';\nexport * from './gesture/index';\nexport * from './svg/index';\nexport * from './webgl/index';\nexport * from './depth/index';\nexport * from './layout/index';\n\nexport { COMPONENT_CATEGORIES } from './index-tags';\nexport type { ComponentCategory } from './index-tags';\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst BY_CATEGORY: Record<ComponentCategory, () => void> = {\n  reveal: defineRevealComponents,\n  text: defineTextComponents,\n  interaction: defineInteractionComponents,\n  feedback: defineFeedbackComponents,\n  background: defineBackgroundComponents,\n  transitions: defineTransitionComponents,\n  physics: definePhysicsComponents,\n  cards: defineCardComponents,\n  click: defineClickComponents,\n  ui: defineUiComponents,\n  page: definePageComponents,\n  timeline: defineTimelineComponents,\n  gesture: defineGestureComponents,\n  svg: defineSvgComponents,\n  webgl: defineWebglComponents,\n  depth: defineDepthComponents,\n  layout: defineLayoutComponents,\n};\n\n/**\n * Register every `<usa-*>` component (or only the given categories).\n * Safe to call more than once and on the server (no-op without DOM).\n */\nexport function defineComponents(categories?: ComponentCategory[]): void {\n  if (canDefine()) adoptVariants();\n  (categories || (Object.keys(BY_CATEGORY) as ComponentCategory[])).forEach((c) => BY_CATEGORY[c]?.());\n}\n"],"names":["defineRevealComponents","defineTextComponents","defineInteractionComponents","defineFeedbackComponents","defineBackgroundComponents","defineTransitionComponents","definePhysicsComponents","defineCardComponents","defineClickComponents","defineUiComponents","definePageComponents","defineTimelineComponents","defineGestureComponents","defineSvgComponents","defineWebglComponents","defineDepthComponents","defineLayoutComponents","canDefine","adoptVariants"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;AAmBG;AA2CH,MAAM,WAAW,GAA0C;AACzD,IAAA,MAAM,EAAEA,wCAAsB;AAC9B,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,WAAW,EAAEC,kDAA2B;AACxC,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,UAAU,EAAEC,gDAA0B;AACtC,IAAA,WAAW,EAAEC,iDAA0B;AACvC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,KAAK,EAAEC,qCAAoB;AAC3B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,EAAE,EAAEC,gCAAkB;AACtB,IAAA,IAAI,EAAEC,oCAAoB;AAC1B,IAAA,QAAQ,EAAEC,4CAAwB;AAClC,IAAA,OAAO,EAAEC,0CAAuB;AAChC,IAAA,GAAG,EAAEC,kCAAmB;AACxB,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,KAAK,EAAEC,sCAAqB;AAC5B,IAAA,MAAM,EAAEC,wCAAsB;CAC/B;AAED;;;AAGG;AACG,SAAU,gBAAgB,CAAC,UAAgC,EAAA;AAC/D,IAAA,IAAIC,cAAS,EAAE;AAAE,QAAAC,sBAAa,EAAE;IAChC,CAAC,UAAU,IAAK,MAAM,CAAC,IAAI,CAAC,WAAW,CAAyB,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC;AACtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components.css

@@ -70,3 +70,5 @@ usa-timeline{display:block}usa-timeline[scrub]{position:relative}@media (prefers
 usa-swipeable{display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none}usa-swipeable[axis="y"]{touch-action:pan-x}usa-swipeable>*{transform:translate3d(var(--usa-swipe,0px),0,0);opacity:calc(1 - var(--usa-swipe-p,0) * 0.5)}usa-swipeable[axis="y"]>*{transform:translate3d(0,var(--usa-swipe,0px),0)}usa-swipeable:focus-visible{outline:2px solid currentColor;outline-offset:2px}usa-pinch-zoom{display:block;overflow:hidden;touch-action:none;position:relative}usa-pinch-zoom>*{transform:translate3d(var(--usa-zoom-x,0px),var(--usa-zoom-y,0px),0) scale(var(--usa-zoom,1));transform-origin:50% 50%}usa-pinch-zoom[data-zoomed]{cursor:grab}usa-pinch-zoom:focus-visible{outline:2px solid currentColor;outline-offset:2px}
 usa-draw{display:inline-block}usa-draw svg :is(path,line,polyline,polygon,circle,ellipse,rect){transition:fill-opacity 0.6s ease}usa-draw[fill]:not([data-drawn]) svg :is(path,polygon,circle,ellipse,rect){fill-opacity:0}usa-morph{display:inline-block;line-height:0}usa-morph svg{width:100%;height:100%;fill:currentColor}usa-morph[role="button"]{cursor:pointer}usa-mask-reveal{display:block}usa-mask-reveal[data-state="visible"]{clip-path:none !important}usa-anim-icon{display:inline-flex;line-height:0;vertical-align:middle}usa-anim-icon svg{overflow:visible}@media (prefers-reduced-motion:reduce){usa-mask-reveal{clip-path:none !important}usa-draw svg *{stroke-dashoffset:0 !important}}
 usa-shader,usa-distort,usa-liquid{display:block;position:relative;isolation:isolate;overflow:hidden}usa-shader{background:linear-gradient(120deg,#6366f1,#ec4899 50%,#22d3ee)}usa-shader>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}usa-distort>canvas.usa-gl,usa-liquid>canvas.usa-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}usa-distort>img,usa-liquid>img{display:block;width:100%;height:auto}usa-distort[data-active]>img,usa-liquid[data-active]>img{visibility:hidden}usa-distort[data-fallback]>img{transition:transform 0.6s cubic-bezier(0.22,1,0.36,1),filter 0.6s}usa-distort[data-fallback]:hover>img{transform:scale(1.04);filter:saturate(1.2)}@media (prefers-reduced-motion:reduce){usa-distort[data-fallback]:hover>img{transform:none}}
+usa-cube{--usa-cube-size:200px;display:block;width:var(--usa-cube-size);height:var(--usa-cube-size);perspective:var(--usa-cube-perspective,900px);touch-action:pan-y;user-select:none;-webkit-user-select:none;position:relative}usa-cube>[data-face]{position:absolute;inset:0;backface-visibility:hidden;transform:translateZ(calc(var(--usa-cube-size) / -2)) rotateX(var(--usa-cube-rx,0deg)) rotateY(var(--usa-cube-ry,0deg)) var(--usa-face) translateZ(calc(var(--usa-cube-size) / 2));transform-origin:50% 50%}usa-cube>[data-face="front"]{--usa-face:rotateY(0deg)}usa-cube>[data-face="right"]{--usa-face:rotateY(90deg)}usa-cube>[data-face="back"]{--usa-face:rotateY(180deg)}usa-cube>[data-face="left"]{--usa-face:rotateY(-90deg)}usa-cube>[data-face="top"]{--usa-face:rotateX(90deg)}usa-cube>[data-face="bottom"]{--usa-face:rotateX(-90deg)}usa-cube:focus-visible{outline:2px solid currentColor;outline-offset:6px}usa-depth{display:block;position:relative;perspective:1000px}usa-depth>*{transform:var(--usa-depth-rot,none);transform-style:preserve-3d}usa-depth [data-depth]{will-change:transform;transition:transform 0.12s linear}@media (prefers-reduced-motion:reduce){usa-depth [data-depth]{transform:none !important}}
+usa-auto-animate{display:block}usa-masonry{display:block;column-width:220px;column-gap:16px}usa-masonry>*{break-inside:avoid;margin-bottom:16px}usa-masonry[data-js]{position:relative;columns:auto}usa-masonry[data-js]>*{position:absolute;left:0;top:0;margin:0;box-sizing:border-box;transition:transform 0.45s cubic-bezier(0.22,1,0.36,1)}@media (prefers-reduced-motion:reduce){usa-masonry[data-js]>*{transition:none}}

package/dist/components.d.cts

@@ -2181,6 +2181,167 @@ declare global {
     }
 }
 
+/**
+ * `<usa-cube>` — a CSS 3D cube whose up-to-six element children are its faces
+ * (front, right, back, left, top, bottom). Rotate with drag / swipe, arrow
+ * keys, `autoplay` (ms) or `show(face | index)`; spring-driven.
+ * Attributes: `size` (px, 200), `autoplay`, `perspective` (900).
+ * `usa:change` (`{ index, face }`). Reduced motion: instant face switch.
+ */
+interface UsaCubeElement extends UsaElement {
+    readonly index: number;
+    show(face: number | string): void;
+    next(): void;
+    prev(): void;
+}
+declare function defineCube(tag?: string): CustomElementConstructor | undefined;
+
+/**
+ * `<usa-depth>` — depth parallax: children with `data-depth` (-1…1, 0 = the
+ * screen plane) move and scale by depth as the pointer moves, the device
+ * tilts (`orientation`) or the page scrolls (`scroll`).
+ * Attributes: `source` (`pointer` default · `orientation` · `scroll` ·
+ * space-separated mix), `strength` (px at depth 1, 40), `rotate` (max tilt
+ * of the whole scene in deg, 0). `requestPermission()` for iOS motion.
+ * Reduced motion: layers stay flat.
+ */
+interface UsaDepthElement extends UsaElement {
+    /** Current -1…1 input. */
+    readonly tilt: {
+        x: number;
+        y: number;
+    };
+    requestPermission(): Promise<boolean>;
+}
+declare function defineDepth(tag?: string): CustomElementConstructor | undefined;
+
+interface TiltReading {
+    /** Left/right tilt, -1…1. */
+    x: number;
+    /** Front/back tilt, -1…1. */
+    y: number;
+}
+/** Map a DeviceOrientation reading (beta/gamma degrees) to -1…1 tilt around a resting pose (pure). */
+declare function orientationToTilt(beta: number | null, gamma: number | null, range?: number, rest?: number): TiltReading;
+/** `true` when DeviceOrientation events exist. */
+declare const supportsOrientation: () => boolean;
+/**
+ * Ask for motion-sensor permission where required (iOS 13+; must run inside
+ * a user gesture). Resolves `true` when tilt events can be used.
+ */
+declare function requestOrientationPermission(): Promise<boolean>;
+/**
+ * Listen to device tilt (smoothed); falls back to nothing on desktops.
+ * Returns a stop function.
+ */
+declare function deviceTilt(cb: (t: TiltReading) => void, o?: {
+    range?: number;
+    smooth?: number;
+}): () => void;
+
+/**
+ * use-scroll-animate/components/depth — 3D (v3.5).
+ * `<usa-cube>` (CSS 3D cube), `<usa-depth>` (layered depth parallax driven by
+ * pointer, device orientation or scroll) and `deviceTilt()`. The 3D ring
+ * carousel is `<usa-carousel-3d>` in `components/cards`.
+ */
+
+/** Register every component of this category under its default tag. */
+declare function defineDepthComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-cube': UsaCubeElement;
+        'usa-depth': UsaDepthElement;
+    }
+}
+
+/**
+ * `<usa-auto-animate>` — wraps `autoAnimate()`: any change to its children
+ * (add, remove, re-order, filter, size) animates. Attributes `duration`
+ * (300), `no-scale`. Works for lists and CSS grids alike.
+ */
+interface UsaAutoAnimateElement extends UsaElement {
+    enable(): void;
+    disable(): void;
+}
+declare function defineAutoAnimate(tag?: string): CustomElementConstructor | undefined;
+/**
+ * `<usa-masonry>` — a masonry (Pinterest-style) grid: children are placed in
+ * the shortest column and glide to new spots when the width, the items or
+ * their sizes change. Attributes `columns` (fixed count) or `min` (min
+ * column width px, 220), `gap` (16). Without JS layout support it is a
+ * plain CSS multi-column flow. Reduced motion: no glide.
+ */
+interface UsaMasonryElement extends UsaElement {
+    layout(): void;
+}
+declare function defineMasonry(tag?: string): CustomElementConstructor | undefined;
+
+type Box = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/** FLIP keyframes from a previous box to the current one (pure). */
+declare function flipFrames(from: Box, to: Box, scale?: boolean): Keyframe[];
+interface AutoAnimateOptions {
+    duration?: number;
+    easing?: string;
+    /** Also animate size changes (default true). */
+    scale?: boolean;
+}
+/**
+ * Auto-animate a container: children that are added fade / scale in, removed
+ * ones fade out in place, and moved ones (re-sort, filter, reflow, resize)
+ * glide to their new spot — no extra code at the call site. Returns
+ * `{ disable, enable, stop }`. Reduced motion: changes apply instantly.
+ *
+ * @example
+ * const ctl = autoAnimate(document.querySelector('ul'));
+ * list.append(item); // animates
+ */
+declare function autoAnimate(parent: HTMLElement, o?: AutoAnimateOptions): {
+    enable(): void;
+    disable(): void;
+    stop(): void;
+};
+/** Masonry placement: shortest-column-first positions for item heights (pure). */
+declare function masonryLayout(heights: number[], columns: number, columnWidth: number, gap: number): {
+    x: number;
+    y: number;
+}[] & {
+    height?: number;
+};
+interface SharedOptions {
+    duration?: number;
+    easing?: string;
+}
+/**
+ * Shared-element transition between two states of the page: every element
+ * with `data-shared="id"` before `update()` flies to the element with the
+ * same id afterwards (size and position), the rest cross-fades. Uses the
+ * View Transitions API when present (with `view-transition-name` per id),
+ * otherwise a FLIP fallback. Reduced motion: just runs `update()`.
+ */
+declare function sharedTransition(update: () => void | Promise<void>, root?: ParentNode, o?: SharedOptions): Promise<void>;
+
+/**
+ * use-scroll-animate/components/layout — layout animation (v3.6).
+ * `autoAnimate()` / `<usa-auto-animate>` (list & grid reflow),
+ * `<usa-masonry>`, and `sharedTransition()` for shared-element transitions
+ * (View Transitions API with a FLIP fallback).
+ */
+
+/** Register every component of this category under its default tag. */
+declare function defineLayoutComponents(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-auto-animate': UsaAutoAnimateElement;
+        'usa-masonry': UsaMasonryElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -2198,6 +2359,8 @@ declare const COMPONENT_CATEGORIES: {
     readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
     readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
     readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid"];
+    readonly depth: readonly ["usa-cube", "usa-depth"];
+    readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 
@@ -2207,5 +2370,5 @@ type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
  */
 declare function defineComponents(categories?: ComponentCategory[]): void;
 
-export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, burst, confetti, configureComponents, connectedAnimation, createSpring, defineAccordion, defineAcrylic, defineAmbient, defineAnimIcon, defineAurora, defineAutoSkeleton, defineAvatarStack, defineBackToTop, defineBackgroundComponents, defineBadge, defineBlobs, defineBottomSheet, defineButton, defineCard, defineCardComponents, defineCardStack, defineCarousel3d, defineCheck, defineCheckbox, defineClick, defineClickComponents, defineComponents, defineCounter, defineCursor, defineDialog, defineDistort, defineDotNetwork, defineDoubleTap, defineDraggable, defineDraw, defineDrawer, defineFab, defineFeedbackComponents, defineFlipList, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, 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, drawLines, easeOutExpo, enableMpaTransitions, flip, fluentPreset, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, morphPath, morphTo, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
-export type { AmbientEffect, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCursorElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFlipListElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };
+export { AMBIENT_EFFECTS, ANIM_ICONS, BUTTON_DEFORMS, CARD_EFFECTS, CLICK_EFFECTS, COMPONENT_CATEGORIES, CURSOR_MODES, MASK_SHAPES, MORPH_ICONS, MOTION_SCALE, PAGE_EFFECTS, REVEAL_EFFECTS, SHADERS, SPINNER_VARIANTS, SPRING_EFFECTS, SPRING_PRESETS, TIMELINE_PRESETS, VARIANTS, adoptVariants, autoAnimate, burst, confetti, configureComponents, connectedAnimation, 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, defineFlipList, defineFullpage, defineGestureComponents, defineGlitch, defineGradientText, defineGrain, defineGridGlow, defineHandwriting, defineHold, defineIconMorph, defineInteractionComponents, defineLayoutComponents, defineLike, defineLiquid, defineLoadingBar, defineMagnetic, defineMarquee, defineMaskReveal, defineMasonry, defineMorph, defineMotionSwitch, defineNavbar, defineOverscroll, definePageComponents, defineParticles, definePhysicsComponents, definePinchZoom, definePopover, 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, deviceTilt, drawLines, easeOutExpo, enableMpaTransitions, flip, flipFrames, fluentPreset, fragmentSource, gesture, getMotionIntensity, glQuad, haptic, interpolatePath, linearEasing, loadingBar, masonryLayout, morphPath, morphTo, orientationToTilt, pageTransition, pathsCompatible, pinchScale, prefersReducedMotion, projectInertia, readScrollProgress, requestOrientationPermission, resolvePosition, resolveSpring, restoreMotionIntensity, revealKeyframes, rubberBand, scrambleFrame, scrollToTarget, setMotionIntensity, setVariant, shake, sharedTransition, smoothScroll, snapTo, spring, springEasing, springEffectKeyframes, springSamples, stepSpring, supportsLinearEasing, supportsOrientation, supportsViewTransitions, supportsWebGL, swipeDirection, themeTransition, timeline, toast, viewTransition };
+export type { AmbientEffect, AutoAnimateOptions, BurstOptions, ButtonDeform, ButtonShape, ButtonState, CardEffect, ClickEffect, ComponentCategory, ComponentsConfig, ConfettiOptions, ConnectedOptions, CursorMode, DialogVariant, FlipOptions, FluentPresetOptions, GLQuad, GestureHandlers, GestureOptions, MorphOptions, MotionIntensity, PageEffect, PageTransitionOptions, PanState, PinchState, Placement, PressState, RevealEffect, ScrubOptions, SharedOptions, SmoothScrollOptions, SpinnerVariant, SpringConfig, SpringEffect, SpringInput, SpringPreset, SpringValue, SpringValueOptions, SwipeDirection, SwipeState, TiltReading, Timeline, TimelineOptions, TimelinePosition, TimelineStepOptions, ToastHandle, ToastOptions, ToastType, UsaAccordionElement, UsaAcrylicElement, UsaAmbientElement, UsaAnimIconElement, UsaAuroraElement, UsaAutoAnimateElement, UsaAutoSkeletonElement, UsaAvatarStackElement, UsaBackToTopElement, UsaBadgeElement, UsaBlobsElement, UsaBottomSheetElement, UsaButtonElement, UsaCardElement, UsaCardStackElement, UsaCarousel3dElement, UsaCheckElement, UsaCheckboxElement, UsaClickElement, UsaCounterElement, UsaCubeElement, UsaCursorElement, UsaDepthElement, UsaDialogElement, UsaDotNetworkElement, UsaDoubleTapElement, UsaDraggableElement, UsaDrawElement, UsaDrawerElement, UsaElement, UsaFabElement, UsaFlipListElement, UsaFullpageElement, UsaGLElement, UsaGlitchElement, UsaGradientTextElement, UsaGrainElement, UsaGridGlowElement, UsaHandwritingElement, UsaHoldElement, UsaIconMorphElement, UsaLikeElement, UsaLoadingBarElement, UsaMagneticElement, UsaMarqueeElement, UsaMaskRevealElement, UsaMasonryElement, UsaMorphElement, UsaMotionSwitchElement, UsaNavbarElement, UsaOverscrollElement, UsaParticlesElement, UsaPinchZoomElement, UsaPopoverElement, UsaPressElement, UsaProgressElement, UsaPullRefreshElement, UsaRatingElement, UsaRevealElement, UsaRippleElement, UsaScrambleElement, UsaScrollHighlightElement, UsaScrollProgressElement, UsaScrollyElement, UsaShimmerTextElement, UsaSkeletonElement, UsaSliderElement, UsaSpinnerElement, UsaSplashElement, UsaSplitTextElement, UsaSpotlightElement, UsaSpringElement, UsaStaggerElement, UsaStickyStackElement, UsaSwipeableElement, UsaTabsElement, UsaTextRotateElement, UsaTiltElement, UsaTimelineElement, UsaToasterElement, UsaToggleElement, UsaTooltipElement, UsaTypewriterElement, UsaViewSwitchElement, UsaWaterRippleElement, UsaWaveTextElement, Variant, ViewTransitionOptions };