use-scroll-animate 8.3.0 → 8.5.0

package/docs/ROADMAP.md

@@ -5,8 +5,8 @@
 - ✅ **v8.1** — 节日特效包：烟花、新春（灯笼、福字、鞭炮）、圣诞飘雪、万圣节；新组件 节日横幅、红包。
 - ✅ **v8.2** — 复古风：像素化、CRT 显示器、VHS 噪点、Y2K；新组件 复古按钮、终端窗口。
 - ✅ **v8.3** — 自然有机：水波涟漪、藤蔓生长、花朵绽放；新组件 有机卡片、液态导航。
-- **v8.4** — 赛博 / 科幻：HUD 线框、扫描线、全息投影；新组件 HUD 面板、雷达扫描。
-- **v8.5** — 纸张与手绘：折纸、铅笔素描、水彩晕染；新组件 便利贴墙、手绘图表。
+- ✅ **v8.4** — 赛博 / 科幻：HUD 线框、扫描线、全息投影；新组件 HUD 面板、雷达扫描。
+- ✅ **v8.5** — 纸张与手绘：折纸、铅笔素描、水彩晕染；新组件 便利贴墙、手绘图表。
 - **v8.6** — 霓虹 / 玻璃 / 新拟态主题系统；新组件 主题切换器。
 - **v8.7** — 手势 3.0：多点触控、陀螺仪；新组件 陀螺仪 3D 卡片。
 - **v8.8** — XR / 空间界面：WebXR 预览、空间卡片；新组件 全景查看器。

package/docs/components.md

@@ -1024,6 +1024,50 @@ nav.addEventListener('usa:change', (e) => route(e.detail.index));
 - `<usa-liquid-nav label value>`: `value`; `usa:change` { index, item }.
 - Organic: `vine-grow` · `bloom` (`stagger`) · `water-drop` (`rings`, `color`) · `breathe`; `blobRadius(seed)`.
 
+### v8.4 Widgets: HUD panel, radar (`components/widgets`) + cyber pack (`motionary/fx/cyber`)
+
+```html
+<usa-hud-panel title="SHIP STATUS" status="ONLINE">
+  <p data-value="82">Shields</p><p data-value="47">Fuel</p>
+</usa-hud-panel>
+<usa-radar targets="Alpha:40,0.6; Bravo:200,0.35" speed="4"></usa-radar>
+
+<usa-fx effect="hud-frame" trigger="enter"><div class="card">Target</div></usa-fx>
+<usa-fx effect="data-decode" trigger="enter"><h2>ACCESS GRANTED</h2></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { registerCyberPack } from 'motionary/fx/cyber';
+defineWidgets(); registerCyberPack();
+radar.setTargets([{ name: 'Delta', bearing: 90, distance: 0.5 }]);
+radar.addEventListener('usa:ping', (e) => console.log(e.detail.name));
+```
+- `<usa-hud-panel title status color>`: `boot()`; `usa:boot`.
+- `<usa-radar targets rings speed label>`: `targets`, `setTargets(list)`; `usa:ping` { name }; `parseTargets(str)`.
+- Cyber: `hud-frame` (`color`) · `scanline-sweep` (`color`, `passes`) · `hologram` (`color`) · `data-decode` (`speed`, `frames`); `decodeFrame(text, k, n)`.
+
+### v8.5 Widgets: sticky-note wall, sketch chart (`components/widgets`) + paper pack (`motionary/fx/paper`)
+
+```html
+<usa-sticky-wall label="Ideas">
+  <p>Ship 8.5</p><p data-color="pink">Call Mia</p><p data-color="blue">Buy paper</p>
+</usa-sticky-wall>
+<usa-sketch-chart values="3,7,5,9" labels="Q1,Q2,Q3,Q4" label="Revenue"></usa-sketch-chart>
+
+<usa-fx effect="paper-unfold" trigger="enter"><div class="letter">Dear reader…</div></usa-fx>
+<usa-fx effect="pencil-sketch" trigger="enter"><svg viewBox="0 0 100 60"><path d="M5 55 L50 5 L95 55 Z"/></svg></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { registerPaperPack } from 'motionary/fx/paper';
+defineWidgets(); registerPaperPack();
+chart.setValues([4, 8, 6, 10]);
+wall.addEventListener('usa:pick', (e) => console.log(e.detail.index));
+```
+- `<usa-sticky-wall seed label>`: `notes`, `pick(index)`; `usa:pick` { index }.
+- `<usa-sketch-chart values labels type color label>`: `values`, `setValues(list)`; `usa:drawn`.
+- Paper: `paper-unfold` (`folds`) · `pencil-sketch` (`stagger`) · `watercolor` · `crumple`; `roughLine(x1, y1, x2, y2, seed, amp)`, `paperRandom(seed)`.
+
 ## 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": "8.3.0",
+  "version": "8.5.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",
@@ -318,6 +318,26 @@
         "default": "./dist/components/fx-organic.cjs"
       }
     },
+    "./fx/cyber": {
+      "import": {
+        "types": "./dist/components/fx-cyber.d.ts",
+        "default": "./dist/components/fx-cyber.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-cyber.d.cts",
+        "default": "./dist/components/fx-cyber.cjs"
+      }
+    },
+    "./fx/paper": {
+      "import": {
+        "types": "./dist/components/fx-paper.d.ts",
+        "default": "./dist/components/fx-paper.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-paper.d.cts",
+        "default": "./dist/components/fx-paper.cjs"
+      }
+    },
     "./components/reveal": {
       "import": {
         "types": "./dist/components/reveal.d.ts",
@@ -868,6 +888,26 @@
         "default": "./dist/components/fx-organic.cjs"
       }
     },
+    "./components/fx-cyber": {
+      "import": {
+        "types": "./dist/components/fx-cyber.d.ts",
+        "default": "./dist/components/fx-cyber.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-cyber.d.cts",
+        "default": "./dist/components/fx-cyber.cjs"
+      }
+    },
+    "./components/fx-paper": {
+      "import": {
+        "types": "./dist/components/fx-paper.d.ts",
+        "default": "./dist/components/fx-paper.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-paper.d.cts",
+        "default": "./dist/components/fx-paper.cjs"
+      }
+    },
     "./components/lite": {
       "import": {
         "types": "./dist/components/lite.d.ts",