use-scroll-animate 8.5.0 → 8.7.0

package/docs/ROADMAP.md

@@ -7,8 +7,8 @@
 - ✅ **v8.3** — 自然有机：水波涟漪、藤蔓生长、花朵绽放；新组件 有机卡片、液态导航。
 - ✅ **v8.4** — 赛博 / 科幻：HUD 线框、扫描线、全息投影；新组件 HUD 面板、雷达扫描。
 - ✅ **v8.5** — 纸张与手绘：折纸、铅笔素描、水彩晕染；新组件 便利贴墙、手绘图表。
-- **v8.6** — 霓虹 / 玻璃 / 新拟态主题系统；新组件 主题切换器。
-- **v8.7** — 手势 3.0：多点触控、陀螺仪；新组件 陀螺仪 3D 卡片。
+- ✅ **v8.6** — 霓虹 / 玻璃 / 新拟态主题系统；新组件 主题切换器。
+- ✅ **v8.7** — 手势 3.0：多点触控、陀螺仪；新组件 陀螺仪 3D 卡片。
 - **v8.8** — XR / 空间界面：WebXR 预览、空间卡片；新组件 全景查看器。
 - **v8.9** — 9.0 预备：9.0 弃用警告、`upgrading-9.md` 与 `usa-codemod-9`；低代码组件导出。
 - **v9.0** — 声明式动效 DSL（用一段文本描述完整动效）、插件市场正式版；移除 8.9 弃用项；npm `latest`。

package/docs/components.md

@@ -1068,6 +1068,46 @@ wall.addEventListener('usa:pick', (e) => console.log(e.detail.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)`.
 
+### v8.6 Theme system: theme switcher, theme surface (`components/widgets`) + surface pack (`motionary/fx/surface`)
+
+```html
+<usa-theme-switcher themes="light,dark,neon,glass,neu" persist></usa-theme-switcher>
+<usa-theme-surface><h3>Follows the page theme</h3></usa-theme-surface>
+<usa-theme-surface theme="glass"><h3>Always glass</h3></usa-theme-surface>
+
+<usa-fx effect="neon-ignite" trigger="enter" color="#f0abfc"><h2>OPEN</h2></usa-fx>
+<usa-fx effect="neu-press" trigger="click"><button class="neu">Press</button></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { registerSurfacePack, applySurfaceTheme } from 'motionary/fx/surface';
+defineWidgets(); registerSurfacePack();
+applySurfaceTheme('neon');                       // <html data-usa-surface="neon">
+switcher.addEventListener('usa:change', (e) => console.log(e.detail.theme));
+```
+- `<usa-theme-switcher themes target value persist label>`: `value`; `usa:change` { theme }.
+- `<usa-theme-surface theme>`: `theme` (resolved); `usa:theme` { theme }.
+- Surface: `neon-ignite` · `neon-pulse` (`color`) · `glass-frost` · `neu-press`; `SURFACE_THEMES`, `applySurfaceTheme(name, target?)`.
+
+### v8.7 Gestures 3.0: gyro 3D card, multi-touch sticker (`components/widgets`) + gesture pack (`motionary/fx/gesture`)
+
+```html
+<usa-gyro-card max="15"><h3 data-depth="2">Gyro</h3><p data-depth="1">Tilt your phone</p></usa-gyro-card>
+<usa-gesture-sticker label="Star" max="3"><img src="star.png" alt="Star" width="120"></usa-gesture-sticker>
+
+<usa-fx effect="swipe-hint" trigger="enter" direction="left"><div class="card">…</div></usa-fx>
+<usa-fx effect="depth-in" trigger="enter"><div data-depth="3">Back</div><div data-depth="1">Front</div></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { registerGesture3Pack, pinchScale, pinchAngle } from 'motionary/fx/gesture';
+defineWidgets(); registerGesture3Pack();
+sticker.addEventListener('usa:transform', (e) => save(e.detail)); // { x, y, scale, angle }
+```
+- `<usa-gyro-card max glare>`: `tilt(rx, ry, source?)`, `source`; `usa:tilt`.
+- `<usa-gesture-sticker min max label>`: `x`, `y`, `scale`, `angle`, `transformTo(state)`, `reset()`; `usa:transform`.
+- Gesture: `swipe-hint` (`direction`) · `pinch-hint` · `tilt-wobble` · `depth-in` (`stagger`, `data-depth`); `pinchScale`, `pinchAngle`, `orientationToTilt(beta, gamma, max?, rest?)`.
+
 ## 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.5.0",
+  "version": "8.7.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",
@@ -338,6 +338,26 @@
         "default": "./dist/components/fx-paper.cjs"
       }
     },
+    "./fx/surface": {
+      "import": {
+        "types": "./dist/components/fx-surface.d.ts",
+        "default": "./dist/components/fx-surface.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-surface.d.cts",
+        "default": "./dist/components/fx-surface.cjs"
+      }
+    },
+    "./fx/gesture": {
+      "import": {
+        "types": "./dist/components/fx-gesture.d.ts",
+        "default": "./dist/components/fx-gesture.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-gesture.d.cts",
+        "default": "./dist/components/fx-gesture.cjs"
+      }
+    },
     "./components/reveal": {
       "import": {
         "types": "./dist/components/reveal.d.ts",
@@ -908,6 +928,26 @@
         "default": "./dist/components/fx-paper.cjs"
       }
     },
+    "./components/fx-surface": {
+      "import": {
+        "types": "./dist/components/fx-surface.d.ts",
+        "default": "./dist/components/fx-surface.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-surface.d.cts",
+        "default": "./dist/components/fx-surface.cjs"
+      }
+    },
+    "./components/fx-gesture": {
+      "import": {
+        "types": "./dist/components/fx-gesture.d.ts",
+        "default": "./dist/components/fx-gesture.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-gesture.d.cts",
+        "default": "./dist/components/fx-gesture.cjs"
+      }
+    },
     "./components/lite": {
       "import": {
         "types": "./dist/components/lite.d.ts",