use-scroll-animate 7.4.0 → 7.6.0

package/docs/ROADMAP.md

@@ -6,8 +6,8 @@
 - ✅ **v7.2** — 数据可视化动效：柱状 / 折线 / 环形 / 桑基图入场与数值过渡；新组件 仪表盘（Gauge）、迷你走势图（Sparkline）、KPI 指标卡。
 - ✅ **v7.3** — 电商动效：飞入购物车、价格翻牌、库存脉冲、优惠券撕开；新组件 购物车抽屉、商品图库、限时倒计时。
 - ✅ **v7.4** — 聊天 / 社交：输入中气泡、表情回应飘升、已读回执、消息撤回；新组件 消息列表、头像叠放、通知铃铛。
-- **v7.5** — 游戏化：成就解锁、经验条、宝箱开启、幸运转盘；新组件 排行榜、徽章墙、抽奖机。
-- **v7.6** — 地图与地理：路线绘制、旋转地球、标记脉冲、飞线；新组件 3D 地球、位置卡片。
+- ✅ **v7.5** — 游戏化：成就解锁、经验条、宝箱开启、幸运转盘；新组件 排行榜、徽章墙、抽奖机。
+- ✅ **v7.6** — 地图与地理：路线绘制、旋转地球、标记脉冲、飞线；新组件 3D 地球、位置卡片。
 - **v7.7** — 表单动效：抖动校验、浮动标签、密码强度、成功勾选；新组件 动效输入框、验证码（OTP）输入、上传进度。
 - **v7.8** — AI 界面：流式文字、思考光晕、语音波形、生成骨架；新组件 对话输入框、建议标签（Chips）、语音按钮。
 - **v7.9** — 8.0 预备：8.0 弃用警告、`upgrading-8.md` 与 `usa-codemod-8`；新组件 命令面板（⌘K）、快捷键提示。

package/docs/components.md

@@ -827,6 +827,51 @@ bell.notify({ text: 'New follower', time: 'now' }); avatar.status = 'away';
 - `<usa-presence name src status speaking story>`: `status`; `PRESENCE_STATES`, `initials()`.
 - Social: `typing-dots` (`color`, `period`) · `message-in` (`side`, `duration`) · `reaction-burst` (`emoji`, `count`, `spread`) · `read-receipt` (`color`) · `mention-glow` (`color`); `fanAngles(n, spread)`.
 
+### v7.5 Widgets: leaderboard, XP bar, badge wall, prize wheel (`components/widgets`) + gamification motion (`motionary/fx/game`)
+
+```html
+<usa-leaderboard me="Ada"><li data-score="980">Ada</li><li data-score="870">Alan</li></usa-leaderboard>
+<usa-xp-bar level="3" xp="40" per="100"></usa-xp-bar>
+<usa-badge-wall><li data-icon="🏆">First win</li><li data-icon="🔥" data-locked>7-day streak</li></usa-badge-wall>
+<usa-prize-wheel segments="10% off,Free ship,Try again,🎁 Gift"></usa-prize-wheel>
+
+<usa-fx effect="achievement-unlock" trigger="enter"><div class="toast"><span data-icon>🏆</span> First win!</div></usa-fx>
+<usa-fx effect="coin-burst" trigger="click"><button>Claim</button></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { registerGamePack } from 'motionary/fx/game';
+defineWidgets(); registerGamePack();
+board.setScore('Grace', 1000); bar.add(75); wall.unlock('7-day streak');
+const i = await wheel.spin(); // usa:result { index, label }
+```
+- `<usa-leaderboard label limit me>`: `rows`, `setScore(name, score)`; `usa:rank`; `rankRows()`.
+- `<usa-xp-bar level xp per>`: `level`, `xp`, `add(n)`; `usa:xp`, `usa:levelup`; `levelFor(level, xp, gain, per)`.
+- `<usa-badge-wall label>`: `badges`, `unlock(name)`; `usa:unlock`; `badgeProgress()`.
+- `<usa-prize-wheel segments duration turns label>`: `segments`, `result`, `spinning`, `spin(index?)`; `usa:result`; `wheelAngle(index, count, turns)`.
+- Game: `achievement-unlock` (`duration`) · `level-up` (`color`) · `chest-open` (`spark`, `count`) · `coin-burst` (`coin`, `count`, `power`) · `xp-gain` (`text`, `color`); `throwPath(deg, power)`.
+
+### v7.6 Widgets: globe, location card (`components/widgets`) + maps & geo motion (`motionary/fx/geo`)
+
+```html
+<usa-globe markers="Shanghai:31.2,121.5; London:51.5,-0.1" speed="12" tilt="18"></usa-globe>
+<usa-location-card name="Blue Bottle" address="66 Mint St" lat="37.782" lon="-122.407"
+  from-lat="37.776" from-lon="-122.394" href="https://maps.example/…"></usa-location-card>
+
+<usa-fx effect="route-draw" trigger="enter"><svg viewBox="0 0 200 80"><path d="M10 70 C60 10 120 90 190 20"/></svg></usa-fx>
+<usa-fx effect="pin-drop" trigger="enter"><span>📍</span></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { registerGeoPack } from 'motionary/fx/geo';
+defineWidgets(); registerGeoPack();
+await globe.flyTo('London'); // usa:focus { name, lat, lon }
+card.replay();
+```
+- `<usa-globe markers speed tilt lon>`: `markers`, `lon`, `flyTo(name)`; `usa:focus`; `project(lat, lon, lon0, tilt)`, `parseMarkers()`.
+- `<usa-location-card name address lat lon from-lat from-lon distance href unit>`: `km`, `replay()`; `usa:arrive`; `haversine()`, `formatDistance(km, unit)`.
+- Geo: `route-draw` (`duration`, `stagger`) · `marker-pulse` (`color`, `rings`) · `pin-drop` (`height`) · `globe-spin` (`turns`); `routeLength(points)`.
+
 ## 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": "7.4.0",
+  "version": "7.6.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",
@@ -238,6 +238,26 @@
         "default": "./dist/components/fx-social.cjs"
       }
     },
+    "./fx/game": {
+      "import": {
+        "types": "./dist/components/fx-game.d.ts",
+        "default": "./dist/components/fx-game.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-game.d.cts",
+        "default": "./dist/components/fx-game.cjs"
+      }
+    },
+    "./fx/geo": {
+      "import": {
+        "types": "./dist/components/fx-geo.d.ts",
+        "default": "./dist/components/fx-geo.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-geo.d.cts",
+        "default": "./dist/components/fx-geo.cjs"
+      }
+    },
     "./components/reveal": {
       "import": {
         "types": "./dist/components/reveal.d.ts",
@@ -708,6 +728,26 @@
         "default": "./dist/components/fx-social.cjs"
       }
     },
+    "./components/fx-game": {
+      "import": {
+        "types": "./dist/components/fx-game.d.ts",
+        "default": "./dist/components/fx-game.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-game.d.cts",
+        "default": "./dist/components/fx-game.cjs"
+      }
+    },
+    "./components/fx-geo": {
+      "import": {
+        "types": "./dist/components/fx-geo.d.ts",
+        "default": "./dist/components/fx-geo.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-geo.d.cts",
+        "default": "./dist/components/fx-geo.cjs"
+      }
+    },
     "./components/lite": {
       "import": {
         "types": "./dist/components/lite.d.ts",