use-scroll-animate 3.3.0 → 3.5.0

package/docs/components.md

@@ -258,6 +258,27 @@ Positions: `'>'` chain (default) · `'<'` with previous · `'-=200'` overlap ·
 | `<usa-anim-icon>` | Animated stroke icons | `name` (`bell` · `heart` · `check` · `arrow` · `star` · `gear` · `search` · `download`), `size`, `label`, `trigger` (`hover` · `click` · `view` · `loop`) |
 | `morphTo(path, d, opts)` · `interpolatePath(a, b, t)` · `drawLines(root)` | Path helpers | `duration`, `easing`; `stagger` |
 
+### v3.4 Canvas & WebGL (`components/webgl`)
+
+| Element / API | What it does | Key attributes |
+|---|---|---|
+| `<usa-shader>` | GPU shader background | `preset` (`gradient` · `plasma` · `waves` · `aurora`), `speed` (1); custom `<script type="x-shader/x-fragment">` |
+| `<usa-distort>` | Hover distortion + RGB split on the `<img>` inside | — (fallback: CSS zoom) |
+| `<usa-liquid>` | Click ripples + hover wobble on the `<img>` inside | `strength` (1) |
+| `glQuad(canvas, frag)` · `supportsWebGL()` | Single-quad WebGL runner | `render({ time, mouse, hover, ripples })`, `resize()`, `texture(img)`, `dispose()` |
+
+Fallbacks set `data-fallback` (`webgl` · `image` · `no-image`); cross-origin images need CORS headers.
+
+### v3.5 3D & depth (`components/depth`)
+
+| Element / API | What it does | Key attributes |
+|---|---|---|
+| `<usa-cube>` | CSS 3D cube, children = faces | `size` (200), `autoplay` (ms), `perspective` (900); `show(face)`, `next()`, `prev()`, `usa:change` |
+| `<usa-depth>` | Depth parallax for `data-depth` layers | `source` (`pointer` · `orientation` · `scroll`), `strength` (40), `rotate` (0); `requestPermission()` |
+| `deviceTilt(cb, opts)` · `requestOrientationPermission()` | Gyroscope tilt -1…1 | `range` (30°), `smooth` (0.2) |
+
+3D ring carousel: `<usa-carousel-3d>` (cards).
+
 ## Frameworks
 
 Custom elements work in every framework. Register once (e.g. in your entry file), then use the tags.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-scroll-animate",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "description": "A lightweight, high-performance, dependency-free scroll animation library and animated UI components (Web Components) for the web and Windows web-view apps.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -218,6 +218,26 @@
         "default": "./dist/components/svg.cjs"
       }
     },
+    "./components/webgl": {
+      "import": {
+        "types": "./dist/components/webgl.d.ts",
+        "default": "./dist/components/webgl.js"
+      },
+      "require": {
+        "types": "./dist/components/webgl.d.cts",
+        "default": "./dist/components/webgl.cjs"
+      }
+    },
+    "./components/depth": {
+      "import": {
+        "types": "./dist/components/depth.d.ts",
+        "default": "./dist/components/depth.js"
+      },
+      "require": {
+        "types": "./dist/components/depth.d.cts",
+        "default": "./dist/components/depth.cjs"
+      }
+    },
     "./components/react": {
       "import": {
         "types": "./dist/components/react.d.ts",
@@ -273,6 +293,8 @@
     "./components/timeline.css": "./dist/components/timeline.css",
     "./components/gesture.css": "./dist/components/gesture.css",
     "./components/svg.css": "./dist/components/svg.css",
+    "./components/webgl.css": "./dist/components/webgl.css",
+    "./components/depth.css": "./dist/components/depth.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -293,7 +315,7 @@
     "typecheck": "tsc --noEmit -p .",
     "test": "vitest run",
     "check:exports": "node scripts/check-exports.mjs",
-    "lint:package": "publint && attw --pack . --profile node16 --exclude-entrypoints ./components.css ./components/reveal.css ./components/text.css ./components/interaction.css ./components/feedback.css ./components/background.css ./components/transitions.css ./components/physics.css ./components/cards.css ./components/click.css ./components/ui.css ./components/page.css ./components/timeline.css ./components/gesture.css ./components/svg.css",
+    "lint:package": "publint && attw --pack . --profile node16 --exclude-entrypoints ./components.css ./components/reveal.css ./components/text.css ./components/interaction.css ./components/feedback.css ./components/background.css ./components/transitions.css ./components/physics.css ./components/cards.css ./components/click.css ./components/ui.css ./components/page.css ./components/timeline.css ./components/gesture.css ./components/svg.css ./components/webgl.css ./components/depth.css",
     "size": "node scripts/size.mjs",
     "prepublishOnly": "npm run typecheck && npm test && npm run build && npm run check:exports",
     "size:check": "node scripts/size.mjs --check",