use-scroll-animate 5.1.0 → 5.3.0

package/docs/ROADMAP.md

@@ -3,8 +3,8 @@
 > 5.0.0：现代浏览器基线（Custom Elements、WAAPI、IntersectionObserver、ResizeObserver、adoptedStyleSheets），移除 4.9 弃用的 API，新增统一的插件式效果注册（`registerEffect()` / `playEffect()` / `<usa-fx>`）。以下为 5.x → 6.0 的规划，每个版本一个 PR；新效果全部通过注册表提供，集中在新入口 `use-scroll-animate/components/effects`（不计入 `components/lite` 的 70 KB 预算）。
 
 - ✅ **v5.1** — 卡片与点击特效 2.0：全息镭射卡、扫光、3D 翻书、磁吸卡组、卡片倾倒；点击冲击波环、墨水飞溅、星星爆裂、果冻按压、涟漪环 —— 全部可用 `<usa-fx>` 触发。
-- **v5.2** — 弹跳与物理微交互：弹入、橡皮筋、弹性悬停、掉落回弹、重力文字、弹簧跟随指针、摇摆铃铛。
-- **v5.3** — 全页特效：幕布、光圈擦除、像素溶解、百叶窗转场、滚动速度倾斜、全页聚光灯、页面边缘光晕。
+- ✅ **v5.2** — 弹跳与物理微交互：弹入、橡皮筋、弹性悬停、掉落回弹、重力文字、弹簧跟随指针、摇摆铃铛。
+- ✅ **v5.3** — 全页特效：幕布、光圈擦除、像素溶解、百叶窗转场、滚动速度倾斜、全页聚光灯、页面边缘光晕。
 - **v5.4** — 滚动叙事模板：`<usa-story>` —— 固定章节、横向长廊、缩放穿越、前后对比滑块、数据故事计数器、逐段高亮。
 - **v5.5** — 生成式背景：流场、Voronoi 细胞、网格渐变（mesh gradient）、星空、metaballs、等高线 —— Canvas 2D 实现，可见时才渲染，自适应质量。
 - **v5.6** — 声音响应特效：Web Audio 分析器驱动频谱柱、脉冲光环、波形环，节拍检测可触发任意已注册效果（需用户手势开启，减少动态效果时停用）。

package/docs/components.md

@@ -350,6 +350,37 @@ registerAllEffects();
 
 Card: `holo` · `glare-sweep` · `book-open` · `card-fan` · `topple` · `float-tilt`. Click: `shockwave` · `ink-splash` · `star-burst` · `jelly-press` · `ring-ripple` · `emoji-rain`. Reduced motion: particles skipped, presses fade, loops don’t start.
 
+### v5.2 Bounce & physics (`components/effects`)
+
+`bounce-in` · `rubber-band` · `elastic-hover` · `drop-bounce` · `gravity-text` · `spring-follow` · `bell-swing` — keyframes come from a damped-spring / gravity solver and play on WAAPI.
+
+```js
+import { registerAllEffects, solveSpring, springKeyframes } from 'use-scroll-animate/components/effects';
+registerAllEffects();
+const { frames, duration } = springKeyframes((p) => ({ transform: `scale(${p})` }), { stiffness: 220, damping: 11 });
+el.animate(frames, { duration });
+```
+```html
+<usa-fx effect="drop-bounce" trigger="enter" options='{"height":160,"bounce":0.6}'><img src="badge.svg" alt="New"></usa-fx>
+<usa-fx effect="elastic-hover" trigger="load"><article class="card">…</article></usa-fx>
+```
+
+### v5.3 Page-wide effects (`components/effects`)
+
+Transitions `curtain` · `iris` · `pixel-dissolve` · `blinds` cover the viewport, await `onCovered()`, then reveal:
+
+```js
+import { registerAllEffects } from 'use-scroll-animate/components/effects';
+import { playEffect } from 'use-scroll-animate/components/fx';
+registerAllEffects();
+link.addEventListener('click', (e) => {
+  e.preventDefault();
+  playEffect(link, 'iris', { onCovered: () => router.go(link.href), color: '#111' });
+});
+```
+
+Persistent: `<usa-fx effect="velocity-skew" trigger="load">`, `spotlight` (`radius`, `dim`), `edge-glow` (`color`, `size`). Reduced motion: transitions cross-fade (150 ms), persistent effects are off.
+
 ## 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": "5.1.0",
+  "version": "5.3.0",
   "description": "A lightweight, high-performance, dependency-free scroll animation library and animated UI components (Web Components) for the web and Windows web-view apps.",
   "type": "module",
   "main": "./dist/index.cjs",