use-scroll-animate 5.8.0 → 5.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/bin/usa-codemod-6.mjs +146 -0
  3. package/dist/components/angular.d.cts +2 -1
  4. package/dist/components/angular.d.ts +2 -1
  5. package/dist/components/click.cjs +23 -4
  6. package/dist/components/click.cjs.map +1 -1
  7. package/dist/components/click.d.cts +12 -7
  8. package/dist/components/click.d.ts +12 -7
  9. package/dist/components/click.js +28 -9
  10. package/dist/components/click.js.map +1 -1
  11. package/dist/components/effects.cjs +306 -1
  12. package/dist/components/effects.cjs.map +1 -1
  13. package/dist/components/effects.d.cts +66 -2
  14. package/dist/components/effects.d.ts +66 -2
  15. package/dist/components/effects.js +303 -2
  16. package/dist/components/effects.js.map +1 -1
  17. package/dist/components/fx.cjs +2 -2
  18. package/dist/components/fx.cjs.map +1 -1
  19. package/dist/components/fx.js +2 -2
  20. package/dist/components/fx.js.map +1 -1
  21. package/dist/components/lite.cjs +35 -14
  22. package/dist/components/lite.cjs.map +1 -1
  23. package/dist/components/lite.js +35 -14
  24. package/dist/components/lite.js.map +1 -1
  25. package/dist/components/page.cjs +2 -0
  26. package/dist/components/page.cjs.map +1 -1
  27. package/dist/components/page.js +3 -1
  28. package/dist/components/page.js.map +1 -1
  29. package/dist/components/solid.d.cts +2 -1
  30. package/dist/components/solid.d.ts +2 -1
  31. package/dist/components/svelte.d.cts +2 -1
  32. package/dist/components/svelte.d.ts +2 -1
  33. package/dist/components/vue.d.cts +2 -1
  34. package/dist/components/vue.d.ts +2 -1
  35. package/dist/components.cjs +5 -5
  36. package/dist/components.d.cts +12 -7
  37. package/dist/components.d.ts +12 -7
  38. package/dist/components.js +2 -2
  39. package/dist/components.umd.js +2 -2
  40. package/dist/components.umd.js.map +1 -1
  41. package/docs/ROADMAP.md +1 -1
  42. package/docs/components.md +26 -0
  43. package/docs/deprecations.md +4 -0
  44. package/docs/upgrading-6.md +32 -0
  45. package/package.json +3 -2
package/docs/ROADMAP.md CHANGED
@@ -10,5 +10,5 @@
10
10
  - ✅ **v5.6** — 声音响应特效:Web Audio 分析器驱动频谱柱、脉冲光环、波形环,节拍检测可触发任意已注册效果(需用户手势开启,减少动态效果时停用)。
11
11
  - ✅ **v5.7** — 光标与手势包:彗星拖尾、星光、丝带、磁吸点、聚光光标;甩动、双指旋转、长按蓄力手势 → 触发效果。
12
12
  - ✅ **v5.8** — 主题包与微交互库:霓虹、纸张、玻璃、复古、粗野主义主题包(令牌 + 效果预设);复制成功、开关变形、输入抖动、密码显隐、收藏星星、下载进度等 20+ 微交互。
13
- - **v5.9** — JSON 动画播放器 + 6.0 预备:`<usa-player>` 播放 JSON 动画(关键帧轨道 + 已注册效果,可由实验室导出);标记 6.0 将移除的 API 并输出一次性警告,发布 `upgrading-6.md` 与 `usa-codemod-6`。
13
+ - ✅ **v5.9** — JSON 动画播放器 + 6.0 预备:`<usa-player>` 播放 JSON 动画(关键帧轨道 + 已注册效果,可由实验室导出);标记 6.0 将移除的 API 并输出一次性警告,发布 `upgrading-6.md` 与 `usa-codemod-6`。
14
14
  - **v6.0** — 破坏性清理:移除 5.9 弃用的 API,效果统一走注册表,迁移指南与自动迁移脚本,npm `latest`。
@@ -473,6 +473,32 @@ playEffect(passwordToggle, 'password-reveal');
473
473
  ```
474
474
  Themes: `neon` · `paper` · `glass` · `retro` · `brutalist`. Micro effects keep working (state, labels, counts) under reduced motion.
475
475
 
476
+ ### v5.9 `<usa-player>`
477
+
478
+ Plays JSON animations made of timeline presets, keyframes and registered effects on one clock.
479
+
480
+ ```html
481
+ <usa-player trigger="view" controls>
482
+ <h1>Title</h1>
483
+ <a class="cta">Start</a>
484
+ <script type="application/json">
485
+ { "format": "use-scroll-animate/animation", "version": 1,
486
+ "tracks": [
487
+ { "target": "h1", "start": 0, "duration": 600, "preset": "fade-up" },
488
+ { "target": ".cta", "start": 400, "duration": 500, "keyframes": [{ "opacity": 0, "transform": "scale(.8)" }, { "opacity": 1, "transform": "none" }] },
489
+ { "target": ".cta", "start": 1000, "effect": "jelly" }
490
+ ] }
491
+ </script>
492
+ </usa-player>
493
+ ```
494
+ ```js
495
+ import { createPlayer, registerAllEffects } from 'use-scroll-animate/components/effects';
496
+ registerAllEffects();
497
+ const p = createPlayer(hero, await (await fetch('/hero.json')).json());
498
+ p.play(); p.seek(500); p.rate = 0.5;
499
+ ```
500
+ `trigger="scroll"` scrubs the animation with the page. Reduced motion: the final state, no effects. Export JSON from the Playground (`<usa-player> JSON` tab).
501
+
476
502
  ## Frameworks
477
503
 
478
504
  Custom elements work in every framework. Register once (e.g. in your entry file), then use the tags.
@@ -1,5 +1,9 @@
1
1
  # Deprecations
2
2
 
3
+ ## Deprecated in 5.9, removed in 6.0
4
+
5
+ See [upgrading-6.md](./upgrading-6.md) — `burst()`, `confetti()`, `shake()` (use `playEffect(el, 'burst' | 'confetti' | 'shake', …)`), `<usa-cursor mode="trail">` (use the `comet-trail` effect). Run `npx usa-codemod-6 --write src`.
6
+
3
7
  ## Deprecated in 4.9, removed in 5.0
4
8
 
5
9
  See [upgrading-5.md](./upgrading-5.md) — `motionIntensity: 'off'` / `setMotionIntensity('off')`, `reducedMotion: 'no-preference'`, `<usa-timeline scrub="js">`, shared names re-exported from category entries. Run `npx usa-codemod-5 --write src`.
@@ -0,0 +1,32 @@
1
+ # Upgrading to 6.0
2
+
3
+ 5.9 **warns once in the console** for everything below, and a codemod rewrites most of it:
4
+
5
+ ```sh
6
+ npx usa-codemod-6 src # dry run: lists every change (and what needs a manual edit)
7
+ npx usa-codemod-6 --write src # apply
8
+ ```
9
+
10
+ ## Removed in 6.0 (deprecated in 5.9)
11
+
12
+ 6.0 finishes the move to the 5.0 effect registry: every effect is registered once and played the same way (`playEffect()`, `bindEffect()`, `<usa-fx>`). The ad-hoc helpers that bypassed it go away.
13
+
14
+ | 5.x | 6.0 | Codemod |
15
+ |---|---|---|
16
+ | `burst(x, y, options)` from `use-scroll-animate/components` / `/components/click` | `playEffect(document.body, 'burst', { x, y, ...options })` from `use-scroll-animate/components/fx` | ✅ |
17
+ | `confetti(options)` | `playEffect(document.body, 'confetti', options)` (`x` / `y` in the options, or play it on the element to fire from its centre) | ✅ |
18
+ | `shake(el, intensity, duration)` | `playEffect(el, 'shake', { intensity, duration })` | ✅ |
19
+ | `UsaComponents.burst / confetti / shake` (UMD global) | `UsaComponents.playEffect(…)` | ✅ |
20
+ | `<usa-cursor mode="trail">` | wrap the content: `<usa-fx effect="comet-trail" trigger="load" self>…</usa-fx>` (5.7; scoped, touch-aware, overlay canvas). `mode="dot" \| "magnetic" \| "glow"` stay. | ⚠️ reported, manual |
21
+
22
+ `haptic()` stays. The registered `burst` effect accepts `x` / `y` since 5.9, so the rewrite keeps the exact origin.
23
+
24
+ ## Behaviour
25
+
26
+ - Nothing else changes in 6.0: the modern-browser baseline is the 5.0 one, every 5.1–5.9 pack keeps its API, and `<usa-player>` JSON (`format: "use-scroll-animate/animation"`, `version: 1`) stays readable.
27
+
28
+ ## New in 5.9 (before the break)
29
+
30
+ - `<usa-player>` plays JSON animations (keyframe tracks, timeline presets, registered effects) — exported from the playground's **`<usa-player> JSON`** tab. See [components.md](./components.md#v59-usa-player).
31
+
32
+ See the [CHANGELOG](../CHANGELOG.md) for the full list.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "use-scroll-animate",
3
- "version": "5.8.0",
3
+ "version": "5.9.0",
4
4
  "description": "A lightweight, high-performance, dependency-free scroll animation library and animated UI components (Web Components) for the web and Windows web-view apps.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -514,6 +514,7 @@
514
514
  "node": ">=20"
515
515
  },
516
516
  "bin": {
517
- "usa-codemod-5": "./bin/usa-codemod-5.mjs"
517
+ "usa-codemod-5": "./bin/usa-codemod-5.mjs",
518
+ "usa-codemod-6": "./bin/usa-codemod-6.mjs"
518
519
  }
519
520
  }