use-scroll-animate 9.2.0 → 9.4.0

package/docs/ROADMAP.md

@@ -4,8 +4,8 @@
 
 - ✅ **v9.1** — 电影化叙事 2.0：镜头语言（推拉摇移、景深切换、转场）；新组件 章节导航。
 - ✅ **v9.2** — Lottie / Rive 导入（JSON → 动效时间线）；新组件 动画图标集。
-- **v9.3** — 生成艺术 2.0：风格化着色器；新组件 背景生成器。
-- **v9.4** — 视频动效：滚动驱动视频、帧序列；新组件 视频卡片、英雄视频。
+- ✅ **v9.3** — 生成艺术 2.0：风格化着色器；新组件 背景生成器。
+- ✅ **v9.4** — 视频动效：滚动驱动视频、帧序列；新组件 视频卡片、英雄视频。
 - **v9.5** — 无障碍动效 2.0：更细的动效偏好分级；新组件 动效偏好面板。
 - **v9.6** — 性能 3.0：OffscreenCanvas、Worker 渲染；新组件 性能监视器。
 - **v9.7** — 设计工具集成：Figma 插件脚手架、Framer 导出。

package/docs/components.md

@@ -1205,6 +1205,40 @@ riveInputs(riveInstance, 'State Machine 1', button, { hover: 'isHover', click: '
 - `<usa-lottie-icon name trigger size color label>`: `play()`; `LOTTIE_ICONS`.
 - Effects: `lottie-play`, `icon-pop` (`color`).
 
+### v9.3 Generative art 2.0: `<usa-gen-art>`, `<usa-bg-generator>` + genart pack (`motionary/fx/genart`)
+
+```html
+<usa-gen-art art="flow" seed="7" palette="ocean" style="height:240px"></usa-gen-art>
+<usa-bg-generator palette="candy"></usa-bg-generator>
+<usa-fx effect="mesh-drift" trigger="loop" seed="4" palette="ocean"><section class="hero">…</section></usa-fx>
+```
+```js
+import { registerGenArtPack, meshGradient } from 'motionary/fx/genart';
+registerGenArtPack();
+hero.style.background = meshGradient(42, 'forest');
+```
+- `<usa-gen-art art seed palette label>`: `generate(seed?)`, `toDataURL()`; `usa:generate`.
+- `<usa-bg-generator palette style seed label>`: `css`, `shuffle()`, `copy()`; `usa:change`; `backgroundCss(style, seed, palette)`.
+- Genart: `halftone-in` (`dot`) · `mesh-drift` (`seed`, `palette`) · `kaleido` (`color`, `segments`) · `grain-flicker` (`opacity`); `PALETTES`, `seededRandom`, `meshGradient`.
+
+### v9.4 Video motion (`motionary/fx/video`): `<usa-video-card>`, `<usa-hero-video>`
+
+```html
+<usa-hero-video label="Welcome" poster="poster.jpg">
+  <video src="hero.mp4" autoplay muted loop playsinline></video>
+  <h1>Motion, declared.</h1>
+</usa-hero-video>
+<usa-video-card duration="2:41"><img src="poster.jpg" alt=""><video src="preview.mp4"></video><h3>Making of</h3></usa-video-card>
+```
+```js
+import { scrubVideo, frameSequence } from 'motionary/fx/video';
+scrubVideo(document.querySelector('#product-video'), document.querySelector('#product'));
+frameSequence(canvas, { count: 120, src: (i) => `/frames/${String(i).padStart(4, '0')}.webp` }, section);
+```
+- `<usa-video-card duration label>`: `previewing`; `usa:open` { src }.
+- `<usa-hero-video label poster scrub>`: `paused`, `toggle()`; `usa:play`, `usa:pause`.
+- Video: `scrubVideo`, `frameSequence`, `scrollProgress`; effects `film-burn` (`color`), `jump-cut`.
+
 ## 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": "9.2.0",
+  "version": "9.4.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",
@@ -408,6 +408,26 @@
         "default": "./dist/components/fx-lottie.cjs"
       }
     },
+    "./fx/genart": {
+      "import": {
+        "types": "./dist/components/fx-genart.d.ts",
+        "default": "./dist/components/fx-genart.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-genart.d.cts",
+        "default": "./dist/components/fx-genart.cjs"
+      }
+    },
+    "./fx/video": {
+      "import": {
+        "types": "./dist/components/fx-video.d.ts",
+        "default": "./dist/components/fx-video.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-video.d.cts",
+        "default": "./dist/components/fx-video.cjs"
+      }
+    },
     "./components/reveal": {
       "import": {
         "types": "./dist/components/reveal.d.ts",
@@ -1038,6 +1058,26 @@
         "default": "./dist/components/fx-lottie.cjs"
       }
     },
+    "./components/fx-genart": {
+      "import": {
+        "types": "./dist/components/fx-genart.d.ts",
+        "default": "./dist/components/fx-genart.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-genart.d.cts",
+        "default": "./dist/components/fx-genart.cjs"
+      }
+    },
+    "./components/fx-video": {
+      "import": {
+        "types": "./dist/components/fx-video.d.ts",
+        "default": "./dist/components/fx-video.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-video.d.cts",
+        "default": "./dist/components/fx-video.cjs"
+      }
+    },
     "./components/lite": {
       "import": {
         "types": "./dist/components/lite.d.ts",