use-scroll-animate 3.3.0 → 3.4.0

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.4.0] - 2026-10-07
+
+### Added
+- **Canvas & WebGL** — new category `use-scroll-animate/components/webgl` (no three.js; one tiny single-quad runner):
+  - `<usa-shader>` — GPU shader backgrounds behind content: presets `gradient`, `plasma`, `waves`, `aurora`, or your own GLSL in `<script type="x-shader/x-fragment">` (uniforms `u_time`, `u_resolution`, `u_mouse`, `v_uv`); `speed`.
+  - `<usa-distort>` — hover image distortion with RGB split around the pointer.
+  - `<usa-liquid>` — liquid / ripple images: clicks send up to four water ripples through the image, hover wobbles; `strength`.
+  - `glQuad(canvas, fragment)` (returns `{ render, resize, texture, dispose }` or `null`), `supportsWebGL()`, `fragmentSource()`, `SHADERS`.
+- **Graceful fallback**: without WebGL, when a shader fails to compile, or for a cross-origin image without CORS, the canvas is removed and `data-fallback="webgl | image | no-image"` is set — `<usa-shader>` keeps its CSS gradient, images stay visible (`<usa-distort>` falls back to a CSS hover zoom).
+- Performance: renders only while in view and the tab is visible, DPR capped at 2, contexts released on disconnect.
+- Reduced motion: a single static frame, no animation loop.
+- Showcase: new **Canvas & WebGL** gallery category (shader presets, distortion, liquid image, live `glQuad()` demo) with a generated demo photo in `showcase/assets/`.
+
 ## [3.3.0] - 2026-10-07
 
 ### Added

package/README.md

@@ -58,6 +58,7 @@ defineComponents(); // or per category: import { defineTextComponents } from 'us
 | **Timeline & choreography** (`/components/timeline`) | `timeline()` (chain · overlap · labels · seek · reverse · scrub) · `<usa-timeline>` (`data-tl` steps) |
 | **Gestures** (`/components/gesture`) | `gesture()` (pan · swipe · pinch · long-press · tap · double-tap → springs) · `<usa-swipeable>` · `<usa-pinch-zoom>` |
 | **SVG** (`/components/svg`) | `<usa-draw>` (line drawing) · `<usa-morph>` (path morph) · `<usa-mask-reveal>` · `<usa-anim-icon>` · `morphTo()` · `interpolatePath()` |
+| **Canvas & WebGL** (`/components/webgl`) | `<usa-shader>` (gradient · plasma · waves · aurora · custom GLSL) · `<usa-distort>` · `<usa-liquid>` · `glQuad()` — graceful fallback |
 
 Whole bundle ≈ 22 kB gzip (JS + CSS); one category 3.5–6.4 kB; a single component ≈ 2 kB. The scroll-animation core below is unaffected.
 

package/README_ja.md

@@ -48,6 +48,7 @@ defineComponents(); // カテゴリ単位: import { defineTextComponents } from
 | **タイムライン** (`/components/timeline`) | `timeline()`（連結 · 重ね · ラベル · シーク · 逆再生 · スクラブ）· `<usa-timeline>`（`data-tl` ステップ） |
 | **ジェスチャー** (`/components/gesture`) | `gesture()`（パン · スワイプ · ピンチ · 長押し · タップ → スプリング）· `<usa-swipeable>` · `<usa-pinch-zoom>` |
 | **SVG** (`/components/svg`) | `<usa-draw>`（線描画）· `<usa-morph>`（パスモーフ）· `<usa-mask-reveal>` · `<usa-anim-icon>` · `morphTo()` |
+| **Canvas / WebGL** (`/components/webgl`) | `<usa-shader>`（gradient · plasma · waves · aurora · カスタム GLSL）· `<usa-distort>` · `<usa-liquid>` · `glQuad()` |
 
 ## ドキュメント
 

package/README_zh.md

@@ -57,6 +57,7 @@ defineComponents(); // 或按分类：import { defineTextComponents } from 'use-
 | **时间线与编排** (`/components/timeline`) | `timeline()`（串联 · 重叠 · 标签 · 跳转 · 倒放 · 滚动擦洗）· `<usa-timeline>`（`data-tl` 步骤） |
 | **手势** (`/components/gesture`) | `gesture()`（拖动 · 轻扫 · 捏合 · 长按 · 单击 · 双击 → 弹簧）· `<usa-swipeable>` · `<usa-pinch-zoom>` |
 | **SVG 动画** (`/components/svg`) | `<usa-draw>`（线条描绘）· `<usa-morph>`（路径变形）· `<usa-mask-reveal>` · `<usa-anim-icon>` · `morphTo()` · `interpolatePath()` |
+| **Canvas 与 WebGL** (`/components/webgl`) | `<usa-shader>`（gradient · plasma · waves · aurora · 自定义 GLSL）· `<usa-distort>` · `<usa-liquid>` · `glQuad()` —— 优雅降级 |
 
 完整包约 22 kB gzip（JS + CSS）；单个分类 3.5–6.4 kB；单个组件约 2 kB。下方的滚动动画核心不受影响。
 

package/dist/chunks/{index-tags-Cz4iTBEK.cjs → index-tags-BKcHAxBK.cjs}

@@ -17,7 +17,8 @@ const COMPONENT_CATEGORIES = {
     timeline: ['usa-timeline'],
     gesture: ['usa-swipeable', 'usa-pinch-zoom'],
     svg: ['usa-draw', 'usa-morph', 'usa-mask-reveal', 'usa-anim-icon'],
+    webgl: ['usa-shader', 'usa-distort', 'usa-liquid'],
 };
 
 exports.COMPONENT_CATEGORIES = COMPONENT_CATEGORIES;
-//# sourceMappingURL=index-tags-Cz4iTBEK.cjs.map
+//# sourceMappingURL=index-tags-BKcHAxBK.cjs.map

package/dist/chunks/{index-tags-Cz4iTBEK.cjs.map → index-tags-BKcHAxBK.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"index-tags-Cz4iTBEK.cjs","sources":["../../src/components/index-tags.ts"],"sourcesContent":["// The component categories and their default tags (no imports: safe for lazy loaders).\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n  reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n  text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate', 'usa-wave-text', 'usa-glitch', 'usa-gradient-text', 'usa-handwriting', 'usa-scroll-highlight'],\n  interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n  feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n  background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic', 'usa-grid-glow', 'usa-blobs', 'usa-water-ripple', 'usa-dot-network'],\n  transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n  physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n  cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],\n  click: ['usa-click', 'usa-button', 'usa-icon-morph', 'usa-like', 'usa-hold', 'usa-double-tap', 'usa-checkbox'],\n  ui: ['usa-tabs', 'usa-drawer', 'usa-bottom-sheet', 'usa-pull-refresh', 'usa-fab', 'usa-navbar', 'usa-slider', 'usa-rating', 'usa-tooltip', 'usa-popover', 'usa-badge', 'usa-avatar-stack'],\n  page: ['usa-cursor', 'usa-fullpage', 'usa-loading-bar', 'usa-back-to-top', 'usa-ambient', 'usa-splash', 'usa-auto-skeleton', 'usa-motion-switch'],\n  timeline: ['usa-timeline'],\n  gesture: ['usa-swipeable', 'usa-pinch-zoom'],\n  svg: ['usa-draw', 'usa-morph', 'usa-mask-reveal', 'usa-anim-icon'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\n"],"names":[],"mappings":";;AAAA;AACA;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;IAC3E,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,sBAAsB,CAAC;AAC/M,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;AACrF,IAAA,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;IAC3J,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;IAC1D,KAAK,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAC5E,IAAA,KAAK,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC;IAC9G,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,CAAC;AAC1L,IAAA,IAAI,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,CAAC;IACjJ,QAAQ,EAAE,CAAC,cAAc,CAAC;AAC1B,IAAA,OAAO,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC;IAC5C,GAAG,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,CAAC;;;;;"}
+{"version":3,"file":"index-tags-BKcHAxBK.cjs","sources":["../../src/components/index-tags.ts"],"sourcesContent":["// The component categories and their default tags (no imports: safe for lazy loaders).\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n  reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n  text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate', 'usa-wave-text', 'usa-glitch', 'usa-gradient-text', 'usa-handwriting', 'usa-scroll-highlight'],\n  interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n  feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n  background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic', 'usa-grid-glow', 'usa-blobs', 'usa-water-ripple', 'usa-dot-network'],\n  transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n  physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n  cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],\n  click: ['usa-click', 'usa-button', 'usa-icon-morph', 'usa-like', 'usa-hold', 'usa-double-tap', 'usa-checkbox'],\n  ui: ['usa-tabs', 'usa-drawer', 'usa-bottom-sheet', 'usa-pull-refresh', 'usa-fab', 'usa-navbar', 'usa-slider', 'usa-rating', 'usa-tooltip', 'usa-popover', 'usa-badge', 'usa-avatar-stack'],\n  page: ['usa-cursor', 'usa-fullpage', 'usa-loading-bar', 'usa-back-to-top', 'usa-ambient', 'usa-splash', 'usa-auto-skeleton', 'usa-motion-switch'],\n  timeline: ['usa-timeline'],\n  gesture: ['usa-swipeable', 'usa-pinch-zoom'],\n  svg: ['usa-draw', 'usa-morph', 'usa-mask-reveal', 'usa-anim-icon'],\n  webgl: ['usa-shader', 'usa-distort', 'usa-liquid'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\n"],"names":[],"mappings":";;AAAA;AACA;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;IAC3E,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,sBAAsB,CAAC;AAC/M,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;AACrF,IAAA,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;IAC3J,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;IAC1D,KAAK,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAC5E,IAAA,KAAK,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC;IAC9G,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,CAAC;AAC1L,IAAA,IAAI,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,CAAC;IACjJ,QAAQ,EAAE,CAAC,cAAc,CAAC;AAC1B,IAAA,OAAO,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC;IAC5C,GAAG,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,CAAC;AAClE,IAAA,KAAK,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;;;;;"}

package/dist/chunks/{index-tags-Dc_Z4yAY.js → index-tags-qc6OWsJ8.js}

@@ -15,7 +15,8 @@ const COMPONENT_CATEGORIES = {
     timeline: ['usa-timeline'],
     gesture: ['usa-swipeable', 'usa-pinch-zoom'],
     svg: ['usa-draw', 'usa-morph', 'usa-mask-reveal', 'usa-anim-icon'],
+    webgl: ['usa-shader', 'usa-distort', 'usa-liquid'],
 };
 
 export { COMPONENT_CATEGORIES as C };
-//# sourceMappingURL=index-tags-Dc_Z4yAY.js.map
+//# sourceMappingURL=index-tags-qc6OWsJ8.js.map

package/dist/chunks/{index-tags-Dc_Z4yAY.js.map → index-tags-qc6OWsJ8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"index-tags-Dc_Z4yAY.js","sources":["../../src/components/index-tags.ts"],"sourcesContent":["// The component categories and their default tags (no imports: safe for lazy loaders).\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n  reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n  text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate', 'usa-wave-text', 'usa-glitch', 'usa-gradient-text', 'usa-handwriting', 'usa-scroll-highlight'],\n  interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n  feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n  background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic', 'usa-grid-glow', 'usa-blobs', 'usa-water-ripple', 'usa-dot-network'],\n  transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n  physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n  cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],\n  click: ['usa-click', 'usa-button', 'usa-icon-morph', 'usa-like', 'usa-hold', 'usa-double-tap', 'usa-checkbox'],\n  ui: ['usa-tabs', 'usa-drawer', 'usa-bottom-sheet', 'usa-pull-refresh', 'usa-fab', 'usa-navbar', 'usa-slider', 'usa-rating', 'usa-tooltip', 'usa-popover', 'usa-badge', 'usa-avatar-stack'],\n  page: ['usa-cursor', 'usa-fullpage', 'usa-loading-bar', 'usa-back-to-top', 'usa-ambient', 'usa-splash', 'usa-auto-skeleton', 'usa-motion-switch'],\n  timeline: ['usa-timeline'],\n  gesture: ['usa-swipeable', 'usa-pinch-zoom'],\n  svg: ['usa-draw', 'usa-morph', 'usa-mask-reveal', 'usa-anim-icon'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\n"],"names":[],"mappings":"AAAA;AACA;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;IAC3E,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,sBAAsB,CAAC;AAC/M,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;AACrF,IAAA,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;IAC3J,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;IAC1D,KAAK,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAC5E,IAAA,KAAK,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC;IAC9G,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,CAAC;AAC1L,IAAA,IAAI,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,CAAC;IACjJ,QAAQ,EAAE,CAAC,cAAc,CAAC;AAC1B,IAAA,OAAO,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC;IAC5C,GAAG,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,CAAC;;;;;"}
+{"version":3,"file":"index-tags-qc6OWsJ8.js","sources":["../../src/components/index-tags.ts"],"sourcesContent":["// The component categories and their default tags (no imports: safe for lazy loaders).\n/** The component categories and their default tags. */\nexport const COMPONENT_CATEGORIES = {\n  reveal: ['usa-reveal', 'usa-stagger', 'usa-scroll-progress', 'usa-scrolly'],\n  text: ['usa-typewriter', 'usa-split-text', 'usa-scramble', 'usa-counter', 'usa-shimmer-text', 'usa-text-rotate', 'usa-wave-text', 'usa-glitch', 'usa-gradient-text', 'usa-handwriting', 'usa-scroll-highlight'],\n  interaction: ['usa-ripple', 'usa-magnetic', 'usa-tilt', 'usa-spotlight', 'usa-press', 'usa-toggle'],\n  feedback: ['usa-spinner', 'usa-skeleton', 'usa-progress', 'usa-toaster', 'usa-check'],\n  background: ['usa-aurora', 'usa-particles', 'usa-grain', 'usa-marquee', 'usa-acrylic', 'usa-grid-glow', 'usa-blobs', 'usa-water-ripple', 'usa-dot-network'],\n  transitions: ['usa-dialog', 'usa-accordion', 'usa-flip-list', 'usa-view-switch'],\n  physics: ['usa-spring', 'usa-draggable', 'usa-overscroll'],\n  cards: ['usa-card', 'usa-card-stack', 'usa-sticky-stack', 'usa-carousel-3d'],\n  click: ['usa-click', 'usa-button', 'usa-icon-morph', 'usa-like', 'usa-hold', 'usa-double-tap', 'usa-checkbox'],\n  ui: ['usa-tabs', 'usa-drawer', 'usa-bottom-sheet', 'usa-pull-refresh', 'usa-fab', 'usa-navbar', 'usa-slider', 'usa-rating', 'usa-tooltip', 'usa-popover', 'usa-badge', 'usa-avatar-stack'],\n  page: ['usa-cursor', 'usa-fullpage', 'usa-loading-bar', 'usa-back-to-top', 'usa-ambient', 'usa-splash', 'usa-auto-skeleton', 'usa-motion-switch'],\n  timeline: ['usa-timeline'],\n  gesture: ['usa-swipeable', 'usa-pinch-zoom'],\n  svg: ['usa-draw', 'usa-morph', 'usa-mask-reveal', 'usa-anim-icon'],\n  webgl: ['usa-shader', 'usa-distort', 'usa-liquid'],\n} as const;\n\nexport type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;\n"],"names":[],"mappings":"AAAA;AACA;AACO,MAAM,oBAAoB,GAAG;IAClC,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,aAAa,CAAC;IAC3E,IAAI,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,eAAe,EAAE,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,sBAAsB,CAAC;AAC/M,IAAA,WAAW,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,CAAC;IACnG,QAAQ,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,CAAC;AACrF,IAAA,UAAU,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;IAC3J,WAAW,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,iBAAiB,CAAC;AAChF,IAAA,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,gBAAgB,CAAC;IAC1D,KAAK,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;AAC5E,IAAA,KAAK,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,CAAC;IAC9G,EAAE,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,kBAAkB,CAAC;AAC1L,IAAA,IAAI,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,CAAC;IACjJ,QAAQ,EAAE,CAAC,cAAc,CAAC;AAC1B,IAAA,OAAO,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC;IAC5C,GAAG,EAAE,CAAC,UAAU,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,CAAC;AAClE,IAAA,KAAK,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;;;;;"}

package/dist/components/jsx.d.cts

@@ -14,6 +14,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly timeline: readonly ["usa-timeline"];
     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"];
 };
 
 /**

package/dist/components/jsx.d.ts

@@ -14,6 +14,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly timeline: readonly ["usa-timeline"];
     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"];
 };
 
 /**

package/dist/components/lazy.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var indexTags = require('../chunks/index-tags-Cz4iTBEK.cjs');
+var indexTags = require('../chunks/index-tags-BKcHAxBK.cjs');
 
 /**
  * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).
@@ -30,6 +30,7 @@ const LOADERS = {
     timeline: () => Promise.resolve().then(function () { return require('./timeline.cjs'); }),
     gesture: () => Promise.resolve().then(function () { return require('./gesture.cjs'); }),
     svg: () => Promise.resolve().then(function () { return require('./svg.cjs'); }),
+    webgl: () => Promise.resolve().then(function () { return require('./webgl.cjs'); }),
 };
 const TAG_TO_CAT = new Map();
 for (const [cat, tags] of Object.entries(indexTags.COMPONENT_CATEGORIES))

package/dist/components/lazy.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"lazy.cjs","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'use-scroll-animate/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n  reveal: () => import('./reveal/index'),\n  text: () => import('./text/index'),\n  interaction: () => import('./interaction/index'),\n  feedback: () => import('./feedback/index'),\n  background: () => import('./background/index'),\n  transitions: () => import('./transitions/index'),\n  physics: () => import('./physics/index'),\n  cards: () => import('./cards/index'),\n  click: () => import('./click/index'),\n  ui: () => import('./ui/index'),\n  page: () => import('./page/index'),\n  timeline: () => import('./timeline/index'),\n  gesture: () => import('./gesture/index'),\n  svg: () => import('./svg/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n  let p = loaded.get(cat);\n  if (!p) {\n    p = LOADERS[cat]().then((m) => {\n      const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n      if (fn) m[fn]();\n    });\n    loaded.set(cat, p);\n  }\n  return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n  if (typeof customElements === 'undefined') return [];\n  const cats = new Set<ComponentCategory>();\n  const scan = (el: Element) => {\n    const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n    if (c) cats.add(c);\n  };\n  if ((root as Element).localName) scan(root as Element);\n  root.querySelectorAll('*').forEach(scan);\n  await Promise.all([...cats].map(loadCategory));\n  return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n  if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n  defineUsed(root);\n  const mo = new MutationObserver((records) => {\n    for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n  });\n  mo.observe(root as Node, { childList: true, subtree: true });\n  return () => mo.disconnect();\n}\n"],"names":["COMPONENT_CATEGORIES"],"mappings":"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"}
+{"version":3,"file":"lazy.cjs","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'use-scroll-animate/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n  reveal: () => import('./reveal/index'),\n  text: () => import('./text/index'),\n  interaction: () => import('./interaction/index'),\n  feedback: () => import('./feedback/index'),\n  background: () => import('./background/index'),\n  transitions: () => import('./transitions/index'),\n  physics: () => import('./physics/index'),\n  cards: () => import('./cards/index'),\n  click: () => import('./click/index'),\n  ui: () => import('./ui/index'),\n  page: () => import('./page/index'),\n  timeline: () => import('./timeline/index'),\n  gesture: () => import('./gesture/index'),\n  svg: () => import('./svg/index'),\n  webgl: () => import('./webgl/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n  let p = loaded.get(cat);\n  if (!p) {\n    p = LOADERS[cat]().then((m) => {\n      const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n      if (fn) m[fn]();\n    });\n    loaded.set(cat, p);\n  }\n  return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n  if (typeof customElements === 'undefined') return [];\n  const cats = new Set<ComponentCategory>();\n  const scan = (el: Element) => {\n    const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n    if (c) cats.add(c);\n  };\n  if ((root as Element).localName) scan(root as Element);\n  root.querySelectorAll('*').forEach(scan);\n  await Promise.all([...cats].map(loadCategory));\n  return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n  if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n  defineUsed(root);\n  const mo = new MutationObserver((records) => {\n    for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n  });\n  mo.observe(root as Node, { childList: true, subtree: true });\n  return () => mo.disconnect();\n}\n"],"names":["COMPONENT_CATEGORIES"],"mappings":"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"}

package/dist/components/lazy.d.cts

@@ -14,6 +14,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly timeline: readonly ["usa-timeline"];
     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"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/lazy.d.ts

@@ -14,6 +14,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly timeline: readonly ["usa-timeline"];
     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"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/lazy.js

@@ -1,4 +1,4 @@
-import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-Dc_Z4yAY.js';
+import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-qc6OWsJ8.js';
 
 /**
  * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).
@@ -28,6 +28,7 @@ const LOADERS = {
     timeline: () => import('./timeline.js'),
     gesture: () => import('./gesture.js'),
     svg: () => import('./svg.js'),
+    webgl: () => import('./webgl.js'),
 };
 const TAG_TO_CAT = new Map();
 for (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES))

package/dist/components/lazy.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazy.js","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'use-scroll-animate/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n  reveal: () => import('./reveal/index'),\n  text: () => import('./text/index'),\n  interaction: () => import('./interaction/index'),\n  feedback: () => import('./feedback/index'),\n  background: () => import('./background/index'),\n  transitions: () => import('./transitions/index'),\n  physics: () => import('./physics/index'),\n  cards: () => import('./cards/index'),\n  click: () => import('./click/index'),\n  ui: () => import('./ui/index'),\n  page: () => import('./page/index'),\n  timeline: () => import('./timeline/index'),\n  gesture: () => import('./gesture/index'),\n  svg: () => import('./svg/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n  let p = loaded.get(cat);\n  if (!p) {\n    p = LOADERS[cat]().then((m) => {\n      const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n      if (fn) m[fn]();\n    });\n    loaded.set(cat, p);\n  }\n  return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n  if (typeof customElements === 'undefined') return [];\n  const cats = new Set<ComponentCategory>();\n  const scan = (el: Element) => {\n    const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n    if (c) cats.add(c);\n  };\n  if ((root as Element).localName) scan(root as Element);\n  root.querySelectorAll('*').forEach(scan);\n  await Promise.all([...cats].map(loadCategory));\n  return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n  if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n  defineUsed(root);\n  const mo = new MutationObserver((records) => {\n    for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n  });\n  mo.observe(root as Node, { childList: true, subtree: true });\n  return () => mo.disconnect();\n}\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;AAYG;AAGH,MAAM,OAAO,GAAkE;AAC7E,IAAA,MAAM,EAAE,MAAM,OAAO,aAAgB,CAAC;AACtC,IAAA,IAAI,EAAE,MAAM,OAAO,WAAc,CAAC;AAClC,IAAA,WAAW,EAAE,MAAM,OAAO,kBAAqB,CAAC;AAChD,IAAA,QAAQ,EAAE,MAAM,OAAO,eAAkB,CAAC;AAC1C,IAAA,UAAU,EAAE,MAAM,OAAO,iBAAoB,CAAC;AAC9C,IAAA,WAAW,EAAE,MAAM,OAAO,kBAAqB,CAAC;AAChD,IAAA,OAAO,EAAE,MAAM,OAAO,cAAiB,CAAC;AACxC,IAAA,KAAK,EAAE,MAAM,OAAO,YAAe,CAAC;AACpC,IAAA,KAAK,EAAE,MAAM,OAAO,YAAe,CAAC;AACpC,IAAA,EAAE,EAAE,MAAM,OAAO,SAAY,CAAC;AAC9B,IAAA,IAAI,EAAE,MAAM,OAAO,WAAc,CAAC;AAClC,IAAA,QAAQ,EAAE,MAAM,OAAO,eAAkB,CAAC;AAC1C,IAAA,OAAO,EAAE,MAAM,OAAO,cAAiB,CAAC;AACxC,IAAA,GAAG,EAAE,MAAM,OAAO,UAAa,CAAC;CACjC;AAED,MAAM,UAAU,GAAG,IAAI,GAAG,EAA6B;AACvD,KAAK,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,oBAAoB,CAAC;IAAE,KAAK,MAAM,CAAC,IAAI,IAAI;AAAE,QAAA,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,GAAwB,CAAC;AACjI,MAAM,MAAM,GAAG,IAAI,GAAG,EAAoC;AAE1D;MACa,aAAa,GAAG,CAAC,GAAW,KAA+B,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,IAAI;AAE7G;AACM,SAAU,YAAY,CAAC,GAAsB,EAAA;IACjD,IAAI,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC;IACvB,IAAI,CAAC,CAAC,EAAE;AACN,QAAA,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAI;YAC5B,MAAM,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,4BAA4B,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC3E,YAAA,IAAI,EAAE;AAAE,gBAAA,CAAC,CAAC,EAAE,CAAC,EAAE;AACjB,QAAA,CAAC,CAAC;AACF,QAAA,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;IACpB;AACA,IAAA,OAAO,CAAC;AACV;AAEA;AACO,eAAe,UAAU,CAAC,OAAmB,QAAQ,EAAA;IAC1D,IAAI,OAAO,cAAc,KAAK,WAAW;AAAE,QAAA,OAAO,EAAE;AACpD,IAAA,MAAM,IAAI,GAAG,IAAI,GAAG,EAAqB;AACzC,IAAA,MAAM,IAAI,GAAG,CAAC,EAAW,KAAI;AAC3B,QAAA,MAAM,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,aAAa,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,IAAI;AACnH,QAAA,IAAI,CAAC;AAAE,YAAA,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACpB,IAAA,CAAC;IACD,IAAK,IAAgB,CAAC,SAAS;QAAE,IAAI,CAAC,IAAe,CAAC;IACtD,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;AACxC,IAAA,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;AAC9C,IAAA,OAAO,CAAC,GAAG,IAAI,CAAC;AAClB;AAEA;AACM,SAAU,UAAU,CAAC,IAAA,GAAmB,OAAO,QAAQ,KAAK,WAAW,GAAG,QAAQ,GAAI,SAAiB,EAAA;AAC3G,IAAA,IAAI,CAAC,IAAI,IAAI,OAAO,gBAAgB,KAAK,WAAW;AAAE,QAAA,OAAO,MAAM,SAAS;IAC5E,UAAU,CAAC,IAAI,CAAC;IAChB,MAAM,EAAE,GAAG,IAAI,gBAAgB,CAAC,CAAC,OAAO,KAAI;QAC1C,KAAK,MAAM,CAAC,IAAI,OAAO;YAAE,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,KAAK,CAAC,IAAI,UAAU,CAAC,CAAY,CAAC,CAAC;AACpG,IAAA,CAAC,CAAC;AACF,IAAA,EAAE,CAAC,OAAO,CAAC,IAAY,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5D,IAAA,OAAO,MAAM,EAAE,CAAC,UAAU,EAAE;AAC9B;;;;"}
+{"version":3,"file":"lazy.js","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * use-scroll-animate/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'use-scroll-animate/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n  reveal: () => import('./reveal/index'),\n  text: () => import('./text/index'),\n  interaction: () => import('./interaction/index'),\n  feedback: () => import('./feedback/index'),\n  background: () => import('./background/index'),\n  transitions: () => import('./transitions/index'),\n  physics: () => import('./physics/index'),\n  cards: () => import('./cards/index'),\n  click: () => import('./click/index'),\n  ui: () => import('./ui/index'),\n  page: () => import('./page/index'),\n  timeline: () => import('./timeline/index'),\n  gesture: () => import('./gesture/index'),\n  svg: () => import('./svg/index'),\n  webgl: () => import('./webgl/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n  let p = loaded.get(cat);\n  if (!p) {\n    p = LOADERS[cat]().then((m) => {\n      const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n      if (fn) m[fn]();\n    });\n    loaded.set(cat, p);\n  }\n  return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n  if (typeof customElements === 'undefined') return [];\n  const cats = new Set<ComponentCategory>();\n  const scan = (el: Element) => {\n    const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n    if (c) cats.add(c);\n  };\n  if ((root as Element).localName) scan(root as Element);\n  root.querySelectorAll('*').forEach(scan);\n  await Promise.all([...cats].map(loadCategory));\n  return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n  if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n  defineUsed(root);\n  const mo = new MutationObserver((records) => {\n    for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n  });\n  mo.observe(root as Node, { childList: true, subtree: true });\n  return () => mo.disconnect();\n}\n"],"names":[],"mappings":"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"}

package/dist/components/react.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var indexTags = require('../chunks/index-tags-Cz4iTBEK.cjs');
+var indexTags = require('../chunks/index-tags-BKcHAxBK.cjs');
 
 /**
  * use-scroll-animate/components/react — React wrappers for every `<usa-*>`

package/dist/components/react.js

@@ -1,4 +1,4 @@
-import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-Dc_Z4yAY.js';
+import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-qc6OWsJ8.js';
 
 /**
  * use-scroll-animate/components/react — React wrappers for every `<usa-*>`

package/dist/components/vue.cjs

@@ -18,7 +18,8 @@ require('./page.cjs');
 require('./timeline.cjs');
 require('./gesture.cjs');
 require('./svg.cjs');
-require('../chunks/index-tags-Cz4iTBEK.cjs');
+require('./webgl.cjs');
+require('../chunks/index-tags-BKcHAxBK.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

@@ -1484,6 +1484,32 @@ declare global {
     }
 }
 
+/**
+ * Shared shell for the WebGL elements: a canvas over (or behind) the
+ * content that renders only while visible and the tab is shown, a DPR cap
+ * of 2, and a graceful fallback (`data-fallback`) when WebGL, the shader
+ * or the image (CORS) is unavailable — the original content / CSS stays.
+ */
+interface UsaGLElement extends UsaElement {
+    /** `true` once WebGL rendering is active (otherwise the CSS fallback shows). */
+    readonly active: boolean;
+}
+
+/**
+ * use-scroll-animate/components/webgl — lightweight canvas / WebGL (v3.4).
+ * `<usa-shader>` (shader backgrounds), `<usa-distort>` (hover image
+ * distortion), `<usa-liquid>` (ripple images) on a tiny single-quad runner
+ * (`glQuad()`), with graceful fallbacks when WebGL is unavailable.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-shader': UsaGLElement;
+        'usa-distort': UsaGLElement;
+        'usa-liquid': UsaGLElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1500,6 +1526,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly timeline: readonly ["usa-timeline"];
     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"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/vue.d.ts

@@ -1484,6 +1484,32 @@ declare global {
     }
 }
 
+/**
+ * Shared shell for the WebGL elements: a canvas over (or behind) the
+ * content that renders only while visible and the tab is shown, a DPR cap
+ * of 2, and a graceful fallback (`data-fallback`) when WebGL, the shader
+ * or the image (CORS) is unavailable — the original content / CSS stays.
+ */
+interface UsaGLElement extends UsaElement {
+    /** `true` once WebGL rendering is active (otherwise the CSS fallback shows). */
+    readonly active: boolean;
+}
+
+/**
+ * use-scroll-animate/components/webgl — lightweight canvas / WebGL (v3.4).
+ * `<usa-shader>` (shader backgrounds), `<usa-distort>` (hover image
+ * distortion), `<usa-liquid>` (ripple images) on a tiny single-quad runner
+ * (`glQuad()`), with graceful fallbacks when WebGL is unavailable.
+ */
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'usa-shader': UsaGLElement;
+        'usa-distort': UsaGLElement;
+        'usa-liquid': UsaGLElement;
+    }
+}
+
 /** The component categories and their default tags. */
 declare const COMPONENT_CATEGORIES: {
     readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
@@ -1500,6 +1526,7 @@ declare const COMPONENT_CATEGORIES: {
     readonly timeline: readonly ["usa-timeline"];
     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"];
 };
 type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
 

package/dist/components/vue.js

@@ -16,7 +16,8 @@ import './page.js';
 import './timeline.js';
 import './gesture.js';
 import './svg.js';
-import '../chunks/index-tags-Dc_Z4yAY.js';
+import './webgl.js';
+import '../chunks/index-tags-qc6OWsJ8.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;;;;;"}