use-scroll-animate 6.1.1 → 6.3.0

package/docs/components.md

@@ -499,6 +499,67 @@ p.play(); p.seek(500); p.rate = 0.5;
 ```
 `trigger="scroll"` scrubs the animation with the page. Reduced motion: the final state, no effects. Export JSON from the Playground (`<usa-player> JSON` tab).
 
+### v6.2 Widgets: carousel, tab bar, accordion 2.0, stories (`components/widgets`) + GPU pack (`components/fx-gpu`)
+
+```html
+<usa-carousel effect="cards" loop autoplay="4000" label="Featured">
+  <img src="a.jpg" alt="…"><img src="b.jpg" alt="…"><img src="c.jpg" alt="…">
+</usa-carousel>
+
+<usa-tab-bar indicator="pill">
+  <button>Overview</button><button>Specs</button>
+  <div data-panel>…</div><div data-panel>…</div>
+</usa-tab-bar>
+
+<usa-disclosure variant="cards">
+  <details><summary>Shipping</summary><p>…</p></details>
+</usa-disclosure>
+
+<usa-stories duration="5000" loop><img src="1.jpg" alt="…"><img src="2.jpg" alt="…"></usa-stories>
+
+<usa-fx effect="fluid" trigger="load" self class="hero"><h1>Hello</h1></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { defineFx } from 'motionary/components/fx';
+import { registerGpuEffects } from 'motionary/components/fx-gpu';
+defineWidgets(); defineFx(); registerGpuEffects();
+document.querySelector('usa-carousel').next();
+```
+No build: `components.umd.js` + `widgets.umd.js`. GPU effects: `fluid` · `smoke` · `fire` · `ink` · `fireflies` (WebGL2 → Canvas 2D) · `sakura` · `leaves` (Canvas 2D) · `splash` (click). Reduced motion: instant switches, no autoplay, one still frame.
+
+### v6.3 Widgets: toast stack, dialog, drawer, menu (`components/widgets`) + text effects 3.0 (`components/fx-text`)
+
+```html
+<button data-usa-toast="Saved" data-usa-toast-type="success">Save</button>
+<usa-toast-stack position="bottom-right" duration="4000" max="3"></usa-toast-stack>
+
+<button data-usa-open="welcome">Open</button>
+<usa-modal id="welcome" effect="origin" label="Welcome">
+  <h2>Hello</h2><button data-usa-close="ok">Got it</button>
+</usa-modal>
+
+<usa-sheet id="cart" side="bottom" label="Cart">…<button data-usa-close>Close</button></usa-sheet>
+
+<usa-menu placement="bottom-start" effect="scale">
+  <button>Actions ▾</button><button>Edit</button><hr><button>Delete</button>
+</usa-menu>
+
+<usa-fx effect="flip-chars" trigger="enter"><h1>Motionary</h1></usa-fx>
+```
+```js
+import { defineWidgets, stackToast } from 'motionary/components/widgets';
+import { defineFx } from 'motionary/components/fx';
+import { registerTextEffects3 } from 'motionary/components/fx-text';
+defineWidgets(); defineFx(); registerTextEffects3();
+stackToast({ title: 'Done', message: 'Saved', type: 'success', action: { label: 'Undo', onClick: undo } });
+document.querySelector('usa-modal').show();
+```
+- `<usa-toast-stack>`: collapsed stack that fans out on hover / focus, auto-dismiss paused while hovered, swipe to dismiss; `show()`, `dismiss()`, `clear()`, `stackToast()`; `usa:show`, `usa:dismiss`.
+- `<usa-modal effect="scale | slide-up | flip | origin">` and `<usa-sheet side="right | left | bottom | top">`: native `<dialog>` (top layer, focus trap, Esc), blurred backdrop, `persistent`, `data-usa-open` / `data-usa-close`, bottom sheet drag-to-dismiss; `show()`, `close(value)`, `toggle()`; `usa:open`, `usa:close`.
+- `<usa-menu placement effect="scale | fold | slide">`: ARIA menu, cascade-in items, arrows / Home / End / Esc / Tab; `usa:select`.
+- Text effects 3.0: `liquid-text` · `neon-write` · `particle-text` · `glitch-text` · `text-trail` (cursor) · `font-breathe` · `flip-chars`; split text keeps a screen-reader copy. Reduced motion: overlays fade, loops / trail / particles are skipped, one-shots show their final state.
+
 ## 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": "6.1.1",
+  "version": "6.3.0",
   "description": "Compatibility alias of motionary (same build). The project was renamed to Motionary — install `motionary` instead. Motionary (formerly use-scroll-animate): dependency-free scroll animations + 94 animated Web Components — 214 scroll-reveal presets, card/click/button morphs, physics, page transitions, generative & sound-reactive backgrounds, cursor/gesture effects, themes, micro-interactions, <usa-player>, WebGL. React, Vue, Svelte, Solid, Angular or plain HTML.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -398,6 +398,46 @@
         "default": "./dist/components/effects.cjs"
       }
     },
+    "./components/widgets": {
+      "import": {
+        "types": "./dist/components/widgets.d.ts",
+        "default": "./dist/components/widgets.js"
+      },
+      "require": {
+        "types": "./dist/components/widgets.d.cts",
+        "default": "./dist/components/widgets.cjs"
+      }
+    },
+    "./components/fx2": {
+      "import": {
+        "types": "./dist/components/fx2.d.ts",
+        "default": "./dist/components/fx2.js"
+      },
+      "require": {
+        "types": "./dist/components/fx2.d.cts",
+        "default": "./dist/components/fx2.cjs"
+      }
+    },
+    "./components/fx-gpu": {
+      "import": {
+        "types": "./dist/components/fx-gpu.d.ts",
+        "default": "./dist/components/fx-gpu.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-gpu.d.cts",
+        "default": "./dist/components/fx-gpu.cjs"
+      }
+    },
+    "./components/fx-text": {
+      "import": {
+        "types": "./dist/components/fx-text.d.ts",
+        "default": "./dist/components/fx-text.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-text.d.cts",
+        "default": "./dist/components/fx-text.cjs"
+      }
+    },
     "./components/lite": {
       "import": {
         "types": "./dist/components/lite.d.ts",