use-scroll-animate 3.4.0 → 3.6.0

package/docs/components.md

@@ -269,6 +269,26 @@ Positions: `'>'` chain (default) · `'<'` with previous · `'-=200'` overlap ·
 
 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).
+
+### v3.6 Layout animation (`components/layout`)
+
+| Element / API | What it does | Key options |
+|---|---|---|
+| `<usa-auto-animate>` · `autoAnimate(el)` | Add / remove / move / resize of children animates | `duration` (300), `no-scale` / `scale`; `enable()`, `disable()`, `stop()` |
+| `<usa-masonry>` | Masonry grid with animated reflow | `columns` or `min` (220), `gap` (16); `layout()` |
+| `sharedTransition(update, root?)` | Shared-element transition via `data-shared="id"` | `duration` (450), `easing`; View Transitions API or FLIP |
+
+Also see `flip()` / `connectedAnimation()` / `<usa-flip-list>` in `components/transitions`.
+
 ## 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.4.0",
+  "version": "3.6.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",
@@ -228,6 +228,26 @@
         "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/layout": {
+      "import": {
+        "types": "./dist/components/layout.d.ts",
+        "default": "./dist/components/layout.js"
+      },
+      "require": {
+        "types": "./dist/components/layout.d.cts",
+        "default": "./dist/components/layout.cjs"
+      }
+    },
     "./components/react": {
       "import": {
         "types": "./dist/components/react.d.ts",
@@ -284,6 +304,8 @@
     "./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",
+    "./components/layout.css": "./dist/components/layout.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -304,7 +326,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 ./components/webgl.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 ./components/layout.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",