use-scroll-animate 6.3.0 → 6.4.0

package/docs/ROADMAP.md

@@ -5,7 +5,7 @@
 - **v6.1** ✅ — 滚动预设 2.0（Scroll presets 2.0，已发布）：新增 181 个滚动入场预设（总计 214 个），独立入口 `motionary/presets/extended`（导入即注册，UMD `dist/presets-extended.umd.js`），核心包体积不变；预设支持中间关键帧 `frames`，新增 `registerPresets()` / `reversePreset()`；动画商店扩展到 227 个条目、14 个预设分类（含随滚动 `scrub-*` 与错峰 `stagger-*`）。
 - ✅ **v6.2** — 粒子与流体 2.0 + 组件：GPU 流体、烟雾、火焰、墨滴扩散、萤火虫、樱花与落叶、点击水花（WebGL2，自动降级 Canvas 2D）；新组件 轮播 / 滑块、动画指示器标签页、手风琴 2.0、快拍浏览器（独立入口 `motionary/components/widgets`）。
 - ✅ **v6.3** — 文字特效 3.0 + 组件：液态文字、霓虹书写、文字粒子聚散、故障字、光标拖影、可变字体呼吸、逐字 3D 翻转；新组件 通知 / Toast 堆叠、模态对话框、抽屉 / 底部面板。
-- **v6.4** — 光影与材质 + 组件：动态光源、玻璃折射、金属拉丝、珠光 / 镭射、体积光、指针实时阴影；新组件 进度条 / 进度环、计数器 / 里程表、骨架屏闪光、评分星。
+- ✅ **v6.4** — 光影与材质 + 组件：动态光源、玻璃折射、金属拉丝、珠光 / 镭射、体积光、指针实时阴影；新组件 进度条 / 进度环、计数器 / 里程表、骨架屏闪光、评分星。
 - **v6.5** — 3D 场景卡片 + 组件：景深层叠卡、可旋转商品展示、立方体画廊、折纸展开、轨道相机叙事；新组件 时间轴、瀑布流（布局动画）、图片对比滑块。
 - **v6.6** — 形变与 SVG 2.0 + 组件：路径补间、液态 blob 按钮、描边绘制、SVG 滤镜转场、图标变形；新组件 Dock 栏（macOS 放大）、形变下划线导航、汉堡 → 关闭图标、提示 / 气泡。
 - **v6.7** — 转场大全 + 组件：涟漪溶解、碎片爆裂、马赛克翻牌、液体擦除、卷页、镜头推拉（View Transitions 优先，MPA 可用）；新组件 步骤条 / 向导、分页、分段控件、开关变体。

package/docs/components.md

@@ -5,7 +5,7 @@ Since **v2.2** (now **v3**) the package ships **30 animated UI components** as s
 - in any modern browser (Chrome, Edge, Firefox, Safari), and with React, Vue, Svelte, Solid, Angular or no framework;
 - in **Windows desktop software** that renders its UI with a web view — Electron, Tauri (WebView2), WinUI 3 / WPF / WinForms with WebView2, and installed PWAs. See **[Windows apps guide](./windows-apps.md)**.
 
-Live gallery: <https://harrisoncn.github.io/motionary/showcase/components.html>
+Live gallery: <https://harrisoncn.github.io/Motionary/showcase/components.html>
 
 ## Principles
 
@@ -560,6 +560,34 @@ document.querySelector('usa-modal').show();
 - `<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.
 
+### v6.4 Widgets: progress ring, odometer, skeleton reveal, star rating (`components/widgets`) + light & materials (`components/fx-light`)
+
+```html
+<usa-progress-ring value="72" gradient="#7c5cff,#22d3ee"></usa-progress-ring>
+<usa-progress-ring variant="semi" value="88"></usa-progress-ring>
+<usa-odometer value="1284" locale="en-US" prefix="$"></usa-odometer>
+<usa-skeleton-reveal loading variant="wave">
+  <img src="avatar.jpg" alt="" data-skeleton="circle"><h3>Ada Lovelace</h3><p>…</p>
+</usa-skeleton-reveal>
+<usa-star-rating value="3.5" step="0.5" label="Your rating"></usa-star-rating>
+
+<usa-fx effect="light-follow" trigger="load"><div class="card">…</div></usa-fx>
+<usa-fx effect="god-rays" trigger="load" self class="hero"><h1>Dawn</h1></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { defineFx } from 'motionary/components/fx';
+import { registerLightEffects } from 'motionary/components/fx-light';
+defineWidgets(); defineFx(); registerLightEffects();
+document.querySelector('usa-odometer').value = 2048;      // every digit rolls
+document.querySelector('usa-skeleton-reveal').loading = false; // dissolve → content
+```
+- `<usa-progress-ring variant="ring | bar | semi">`: eased arc with overshoot, counting label, gradient, indeterminate without `value`; `role="progressbar"`, `usa:complete`.
+- `<usa-odometer>`: rolling digit wheels (always forward), new digits slide in, `locale` / `decimals` / `prefix` / `suffix`; the formatted number is the accessible name.
+- `<usa-skeleton-reveal loading variant="wave | pulse | glow">`: placeholders measured from the real content (text lines via Range rects, images, `[data-skeleton]`), synchronized shimmer, top-to-bottom dissolve; `aria-busy`, `reveal()`, `usa:reveal`.
+- `<usa-star-rating max step icon="star | heart" readonly>`: hover preview, half stars, pop + sparkle burst, `role="slider"` keyboard, `usa:change`.
+- Light & materials: `light-follow` · `refraction` · `pointer-shadow` (hover) · `brushed-metal` · `pearlescent` (card) · `god-rays` (background). Helper `trackPointer()`. Reduced motion: fixed lighting, one still frame, values switch instantly.
+
 ## 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.3.0",
+  "version": "6.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",
@@ -438,6 +438,16 @@
         "default": "./dist/components/fx-text.cjs"
       }
     },
+    "./components/fx-light": {
+      "import": {
+        "types": "./dist/components/fx-light.d.ts",
+        "default": "./dist/components/fx-light.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-light.d.cts",
+        "default": "./dist/components/fx-light.cjs"
+      }
+    },
     "./components/lite": {
       "import": {
         "types": "./dist/components/lite.d.ts",
@@ -532,12 +542,12 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/HarrisonCN/motionary.git"
+    "url": "git+https://github.com/HarrisonCN/Motionary.git"
   },
   "bugs": {
-    "url": "https://github.com/HarrisonCN/motionary/issues"
+    "url": "https://github.com/HarrisonCN/Motionary/issues"
   },
-  "homepage": "https://harrisoncn.github.io/motionary/showcase/",
+  "homepage": "https://harrisoncn.github.io/Motionary/showcase/",
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",
     "@rollup/plugin-node-resolve": "^16.0.3",