use-scroll-animate 6.0.1 → 6.1.1

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 (320) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/README.md +157 -373
  3. package/README_ja.md +171 -145
  4. package/README_zh.md +169 -167
  5. package/dist/chunks/{base-B5i8qQPR.cjs → base-BaQV-2ha.cjs} +3 -3
  6. package/dist/chunks/base-BaQV-2ha.cjs.map +1 -0
  7. package/dist/chunks/{base-C3Sw9sAO.js → base-Yno7N2eC.js} +3 -3
  8. package/dist/chunks/base-Yno7N2eC.js.map +1 -0
  9. package/dist/chunks/{core-qpECfEkb.cjs → core-B5T0dhFH.cjs} +14 -210
  10. package/dist/chunks/core-B5T0dhFH.cjs.map +1 -0
  11. package/dist/chunks/{core-BDcszY4L.cjs → core-BGAyaY6L.cjs} +2 -2
  12. package/dist/chunks/{core-BDcszY4L.cjs.map → core-BGAyaY6L.cjs.map} +1 -1
  13. package/dist/chunks/{core-BTf__I-8.js → core-BIOaYdgN.js} +2 -2
  14. package/dist/chunks/{core-BTf__I-8.js.map → core-BIOaYdgN.js.map} +1 -1
  15. package/dist/chunks/{core-DN3hHbHh.js → core-CUGCsMsJ.js} +2 -2
  16. package/dist/chunks/{core-DN3hHbHh.js.map → core-CUGCsMsJ.js.map} +1 -1
  17. package/dist/chunks/{core-mV_TPgG_.js → core-D7cVumUu.js} +11 -203
  18. package/dist/chunks/core-D7cVumUu.js.map +1 -0
  19. package/dist/chunks/{core-BjOYKSrV.cjs → core-zq17EeCI.cjs} +2 -2
  20. package/dist/chunks/{core-BjOYKSrV.cjs.map → core-zq17EeCI.cjs.map} +1 -1
  21. package/dist/chunks/{fx-ChjxrMBo.js → fx-BqDeFywO.js} +2 -2
  22. package/dist/chunks/{fx-ChjxrMBo.js.map → fx-BqDeFywO.js.map} +1 -1
  23. package/dist/chunks/{fx-B8hk1Fby.cjs → fx-lBGVtQO1.cjs} +2 -2
  24. package/dist/chunks/{fx-B8hk1Fby.cjs.map → fx-lBGVtQO1.cjs.map} +1 -1
  25. package/dist/chunks/presets-BYBVJVeP.js +226 -0
  26. package/dist/chunks/presets-BYBVJVeP.js.map +1 -0
  27. package/dist/chunks/presets-CUHys3sK.cjs +233 -0
  28. package/dist/chunks/presets-CUHys3sK.cjs.map +1 -0
  29. package/dist/chunks/{spring-CckMe3x0.js → spring-DfQO5USi.js} +2 -2
  30. package/dist/chunks/{spring-CckMe3x0.js.map → spring-DfQO5USi.js.map} +1 -1
  31. package/dist/chunks/{spring--oZh55tB.cjs → spring-Dgx187Vh.cjs} +2 -2
  32. package/dist/chunks/{spring--oZh55tB.cjs.map → spring-Dgx187Vh.cjs.map} +1 -1
  33. package/dist/chunks/{stagger-CLc3j58T.cjs → stagger-CCFyhzSw.cjs} +3 -3
  34. package/dist/chunks/stagger-CCFyhzSw.cjs.map +1 -0
  35. package/dist/chunks/{stagger-BFAhKknX.js → stagger-DtMKo2SK.js} +3 -3
  36. package/dist/chunks/stagger-DtMKo2SK.js.map +1 -0
  37. package/dist/chunks/{variants-DxPmgrNX.cjs → variants-BhjyddG8.cjs} +2 -2
  38. package/dist/chunks/{variants-DxPmgrNX.cjs.map → variants-BhjyddG8.cjs.map} +1 -1
  39. package/dist/chunks/{variants-Bsevy6Xm.js → variants-VNscPeTD.js} +2 -2
  40. package/dist/chunks/{variants-Bsevy6Xm.js.map → variants-VNscPeTD.js.map} +1 -1
  41. package/dist/components/a11y.cjs +4 -4
  42. package/dist/components/a11y.cjs.map +1 -1
  43. package/dist/components/a11y.d.cts +2 -2
  44. package/dist/components/a11y.d.ts +2 -2
  45. package/dist/components/a11y.js +5 -5
  46. package/dist/components/a11y.js.map +1 -1
  47. package/dist/components/angular.cjs +8 -8
  48. package/dist/components/angular.cjs.map +1 -1
  49. package/dist/components/angular.d.cts +22 -22
  50. package/dist/components/angular.d.ts +22 -22
  51. package/dist/components/angular.js +8 -8
  52. package/dist/components/angular.js.map +1 -1
  53. package/dist/components/background.cjs +3 -3
  54. package/dist/components/background.cjs.map +1 -1
  55. package/dist/components/background.css +1 -1
  56. package/dist/components/background.d.cts +1 -1
  57. package/dist/components/background.d.ts +1 -1
  58. package/dist/components/background.js +3 -3
  59. package/dist/components/background.js.map +1 -1
  60. package/dist/components/bridge.cjs +2 -2
  61. package/dist/components/bridge.cjs.map +1 -1
  62. package/dist/components/bridge.d.cts +1 -1
  63. package/dist/components/bridge.d.ts +1 -1
  64. package/dist/components/bridge.js +2 -2
  65. package/dist/components/bridge.js.map +1 -1
  66. package/dist/components/cards.cjs +3 -3
  67. package/dist/components/cards.cjs.map +1 -1
  68. package/dist/components/cards.css +1 -1
  69. package/dist/components/cards.d.cts +1 -1
  70. package/dist/components/cards.d.ts +1 -1
  71. package/dist/components/cards.js +3 -3
  72. package/dist/components/cards.js.map +1 -1
  73. package/dist/components/click.cjs +4 -4
  74. package/dist/components/click.cjs.map +1 -1
  75. package/dist/components/click.css +1 -1
  76. package/dist/components/click.d.cts +1 -1
  77. package/dist/components/click.d.ts +1 -1
  78. package/dist/components/click.js +4 -4
  79. package/dist/components/click.js.map +1 -1
  80. package/dist/components/depth.cjs +4 -4
  81. package/dist/components/depth.cjs.map +1 -1
  82. package/dist/components/depth.css +1 -1
  83. package/dist/components/depth.d.cts +1 -1
  84. package/dist/components/depth.d.ts +1 -1
  85. package/dist/components/depth.js +4 -4
  86. package/dist/components/depth.js.map +1 -1
  87. package/dist/components/effects.cjs +13 -13
  88. package/dist/components/effects.cjs.map +1 -1
  89. package/dist/components/effects.d.cts +2 -2
  90. package/dist/components/effects.d.ts +2 -2
  91. package/dist/components/effects.js +13 -13
  92. package/dist/components/effects.js.map +1 -1
  93. package/dist/components/feedback.cjs +2 -2
  94. package/dist/components/feedback.cjs.map +1 -1
  95. package/dist/components/feedback.css +1 -1
  96. package/dist/components/feedback.d.cts +1 -1
  97. package/dist/components/feedback.d.ts +1 -1
  98. package/dist/components/feedback.js +2 -2
  99. package/dist/components/feedback.js.map +1 -1
  100. package/dist/components/fx.cjs +10 -10
  101. package/dist/components/fx.cjs.map +1 -1
  102. package/dist/components/fx.css +1 -1
  103. package/dist/components/fx.d.cts +2 -2
  104. package/dist/components/fx.d.ts +2 -2
  105. package/dist/components/fx.js +10 -10
  106. package/dist/components/fx.js.map +1 -1
  107. package/dist/components/gesture.cjs +4 -4
  108. package/dist/components/gesture.cjs.map +1 -1
  109. package/dist/components/gesture.css +1 -1
  110. package/dist/components/gesture.d.cts +1 -1
  111. package/dist/components/gesture.d.ts +1 -1
  112. package/dist/components/gesture.js +5 -5
  113. package/dist/components/gesture.js.map +1 -1
  114. package/dist/components/interaction.cjs +2 -2
  115. package/dist/components/interaction.cjs.map +1 -1
  116. package/dist/components/interaction.css +1 -1
  117. package/dist/components/interaction.d.cts +1 -1
  118. package/dist/components/interaction.d.ts +1 -1
  119. package/dist/components/interaction.js +2 -2
  120. package/dist/components/interaction.js.map +1 -1
  121. package/dist/components/jsx.d.cts +2 -2
  122. package/dist/components/jsx.d.ts +2 -2
  123. package/dist/components/layout.cjs +2 -2
  124. package/dist/components/layout.cjs.map +1 -1
  125. package/dist/components/layout.css +1 -1
  126. package/dist/components/layout.d.cts +1 -1
  127. package/dist/components/layout.d.ts +1 -1
  128. package/dist/components/layout.js +2 -2
  129. package/dist/components/layout.js.map +1 -1
  130. package/dist/components/lazy.cjs +2 -2
  131. package/dist/components/lazy.cjs.map +1 -1
  132. package/dist/components/lazy.d.cts +2 -2
  133. package/dist/components/lazy.d.ts +2 -2
  134. package/dist/components/lazy.js +2 -2
  135. package/dist/components/lazy.js.map +1 -1
  136. package/dist/components/lite.cjs +45 -41
  137. package/dist/components/lite.cjs.map +1 -1
  138. package/dist/components/lite.js +45 -41
  139. package/dist/components/lite.js.map +1 -1
  140. package/dist/components/packs.cjs +2 -2
  141. package/dist/components/packs.cjs.map +1 -1
  142. package/dist/components/packs.css +1 -1
  143. package/dist/components/packs.d.cts +1 -1
  144. package/dist/components/packs.d.ts +1 -1
  145. package/dist/components/packs.js +2 -2
  146. package/dist/components/packs.js.map +1 -1
  147. package/dist/components/page.cjs +3 -3
  148. package/dist/components/page.cjs.map +1 -1
  149. package/dist/components/page.css +1 -1
  150. package/dist/components/page.d.cts +1 -1
  151. package/dist/components/page.d.ts +1 -1
  152. package/dist/components/page.js +4 -4
  153. package/dist/components/page.js.map +1 -1
  154. package/dist/components/perf.cjs +3 -3
  155. package/dist/components/perf.cjs.map +1 -1
  156. package/dist/components/perf.d.cts +2 -2
  157. package/dist/components/perf.d.ts +2 -2
  158. package/dist/components/perf.js +4 -4
  159. package/dist/components/perf.js.map +1 -1
  160. package/dist/components/physics.cjs +3 -3
  161. package/dist/components/physics.cjs.map +1 -1
  162. package/dist/components/physics.css +1 -1
  163. package/dist/components/physics.d.cts +1 -1
  164. package/dist/components/physics.d.ts +1 -1
  165. package/dist/components/physics.js +4 -4
  166. package/dist/components/physics.js.map +1 -1
  167. package/dist/components/react.cjs +4 -4
  168. package/dist/components/react.cjs.map +1 -1
  169. package/dist/components/react.js +4 -4
  170. package/dist/components/react.js.map +1 -1
  171. package/dist/components/reveal.cjs +6 -2
  172. package/dist/components/reveal.cjs.map +1 -1
  173. package/dist/components/reveal.css +1 -1
  174. package/dist/components/reveal.d.cts +1 -1
  175. package/dist/components/reveal.d.ts +1 -1
  176. package/dist/components/reveal.js +6 -2
  177. package/dist/components/reveal.js.map +1 -1
  178. package/dist/components/solid.cjs +9 -9
  179. package/dist/components/solid.cjs.map +1 -1
  180. package/dist/components/solid.d.cts +22 -22
  181. package/dist/components/solid.d.ts +22 -22
  182. package/dist/components/solid.js +9 -9
  183. package/dist/components/solid.js.map +1 -1
  184. package/dist/components/svelte.cjs +8 -8
  185. package/dist/components/svelte.cjs.map +1 -1
  186. package/dist/components/svelte.d.cts +22 -22
  187. package/dist/components/svelte.d.ts +22 -22
  188. package/dist/components/svelte.js +8 -8
  189. package/dist/components/svelte.js.map +1 -1
  190. package/dist/components/svg.cjs +2 -2
  191. package/dist/components/svg.cjs.map +1 -1
  192. package/dist/components/svg.css +1 -1
  193. package/dist/components/svg.d.cts +1 -1
  194. package/dist/components/svg.d.ts +1 -1
  195. package/dist/components/svg.js +2 -2
  196. package/dist/components/svg.js.map +1 -1
  197. package/dist/components/text.cjs +3 -3
  198. package/dist/components/text.cjs.map +1 -1
  199. package/dist/components/text.css +1 -1
  200. package/dist/components/text.d.cts +1 -1
  201. package/dist/components/text.d.ts +1 -1
  202. package/dist/components/text.js +3 -3
  203. package/dist/components/text.js.map +1 -1
  204. package/dist/components/timeline.cjs +3 -3
  205. package/dist/components/timeline.cjs.map +1 -1
  206. package/dist/components/timeline.css +1 -1
  207. package/dist/components/timeline.d.cts +1 -1
  208. package/dist/components/timeline.d.ts +1 -1
  209. package/dist/components/timeline.js +4 -4
  210. package/dist/components/timeline.js.map +1 -1
  211. package/dist/components/tokens.cjs +2 -2
  212. package/dist/components/tokens.cjs.map +1 -1
  213. package/dist/components/tokens.d.cts +2 -2
  214. package/dist/components/tokens.d.ts +2 -2
  215. package/dist/components/tokens.js +2 -2
  216. package/dist/components/tokens.js.map +1 -1
  217. package/dist/components/transitions.cjs +2 -2
  218. package/dist/components/transitions.cjs.map +1 -1
  219. package/dist/components/transitions.css +1 -1
  220. package/dist/components/transitions.d.cts +1 -1
  221. package/dist/components/transitions.d.ts +1 -1
  222. package/dist/components/transitions.js +2 -2
  223. package/dist/components/transitions.js.map +1 -1
  224. package/dist/components/ui.cjs +4 -4
  225. package/dist/components/ui.cjs.map +1 -1
  226. package/dist/components/ui.css +1 -1
  227. package/dist/components/ui.d.cts +1 -1
  228. package/dist/components/ui.d.ts +1 -1
  229. package/dist/components/ui.js +5 -5
  230. package/dist/components/ui.js.map +1 -1
  231. package/dist/components/vue.cjs +9 -9
  232. package/dist/components/vue.cjs.map +1 -1
  233. package/dist/components/vue.d.cts +23 -23
  234. package/dist/components/vue.d.ts +23 -23
  235. package/dist/components/vue.js +9 -9
  236. package/dist/components/vue.js.map +1 -1
  237. package/dist/components/webgl.cjs +2 -2
  238. package/dist/components/webgl.cjs.map +1 -1
  239. package/dist/components/webgl.css +1 -1
  240. package/dist/components/webgl.d.cts +1 -1
  241. package/dist/components/webgl.d.ts +1 -1
  242. package/dist/components/webgl.js +2 -2
  243. package/dist/components/webgl.js.map +1 -1
  244. package/dist/components.cjs +9 -9
  245. package/dist/components.cjs.map +1 -1
  246. package/dist/components.css +1 -1
  247. package/dist/components.d.cts +30 -30
  248. package/dist/components.d.ts +30 -30
  249. package/dist/components.js +11 -11
  250. package/dist/components.js.map +1 -1
  251. package/dist/components.umd.js +5 -5
  252. package/dist/components.umd.js.map +1 -1
  253. package/dist/element.cjs +4 -3
  254. package/dist/element.cjs.map +1 -1
  255. package/dist/element.d.cts +19 -5
  256. package/dist/element.d.ts +19 -5
  257. package/dist/element.js +4 -3
  258. package/dist/element.js.map +1 -1
  259. package/dist/element.umd.js +1 -1
  260. package/dist/element.umd.js.map +1 -1
  261. package/dist/index.cjs +28 -25
  262. package/dist/index.cjs.map +1 -1
  263. package/dist/index.d.cts +40 -15
  264. package/dist/index.d.ts +40 -15
  265. package/dist/index.js +11 -10
  266. package/dist/index.js.map +1 -1
  267. package/dist/index.umd.js +5 -5
  268. package/dist/index.umd.js.map +1 -1
  269. package/dist/presets/extended.cjs +243 -0
  270. package/dist/presets/extended.cjs.map +1 -0
  271. package/dist/presets/extended.d.cts +37 -0
  272. package/dist/presets/extended.d.ts +37 -0
  273. package/dist/presets/extended.js +239 -0
  274. package/dist/presets/extended.js.map +1 -0
  275. package/dist/presets-extended.umd.js +2 -0
  276. package/dist/presets-extended.umd.js.map +1 -0
  277. package/dist/react.cjs +4 -3
  278. package/dist/react.cjs.map +1 -1
  279. package/dist/react.d.cts +19 -5
  280. package/dist/react.d.ts +19 -5
  281. package/dist/react.js +4 -3
  282. package/dist/react.js.map +1 -1
  283. package/dist/solid.cjs +5 -4
  284. package/dist/solid.cjs.map +1 -1
  285. package/dist/solid.d.cts +20 -6
  286. package/dist/solid.d.ts +20 -6
  287. package/dist/solid.js +5 -4
  288. package/dist/solid.js.map +1 -1
  289. package/dist/svelte.cjs +5 -4
  290. package/dist/svelte.cjs.map +1 -1
  291. package/dist/svelte.d.cts +20 -6
  292. package/dist/svelte.d.ts +20 -6
  293. package/dist/svelte.js +5 -4
  294. package/dist/svelte.js.map +1 -1
  295. package/dist/vue.cjs +4 -3
  296. package/dist/vue.cjs.map +1 -1
  297. package/dist/vue.d.cts +19 -5
  298. package/dist/vue.d.ts +19 -5
  299. package/dist/vue.js +4 -3
  300. package/dist/vue.js.map +1 -1
  301. package/docs/API.md +17 -12
  302. package/docs/ROADMAP.md +12 -11
  303. package/docs/accessibility.md +2 -2
  304. package/docs/components.md +33 -33
  305. package/docs/frameworks-ssr.md +12 -12
  306. package/docs/hybrid-apps.md +10 -10
  307. package/docs/migration-from-aos.md +5 -5
  308. package/docs/migration-from-gsap-scrolltrigger.md +3 -3
  309. package/docs/motion-tokens.css +1 -1
  310. package/docs/motion-tokens.md +2 -2
  311. package/docs/performance.md +6 -6
  312. package/docs/presets.md +310 -0
  313. package/docs/windows-apps.md +8 -8
  314. package/package.json +40 -26
  315. package/dist/chunks/base-B5i8qQPR.cjs.map +0 -1
  316. package/dist/chunks/base-C3Sw9sAO.js.map +0 -1
  317. package/dist/chunks/core-mV_TPgG_.js.map +0 -1
  318. package/dist/chunks/core-qpECfEkb.cjs.map +0 -1
  319. package/dist/chunks/stagger-BFAhKknX.js.map +0 -1
  320. package/dist/chunks/stagger-CLc3j58T.cjs.map +0 -1
package/README_zh.md CHANGED
@@ -1,217 +1,219 @@
1
1
  <div align="center">
2
2
 
3
- # use-scroll-animate 🚀
3
+ # Motionary
4
4
 
5
- **一个轻量级(~5KB gzipped)、零依赖的现代 Web 滚动动画库。**
5
+ **面向现代 Web 的滚动动画与动画 Web Components —— 214 个滚动预设、90 种效果、零依赖。**
6
6
 
7
- [![GitHub release (latest by date)](https://img.shields.io/github/v/release/HarrisonCN/use-scroll-animate?style=flat-square)](https://github.com/HarrisonCN/use-scroll-animate/releases)
8
- [![GitHub repo size](https://img.shields.io/github/repo-size/HarrisonCN/use-scroll-animate?style=flat-square)](https://github.com/HarrisonCN/use-scroll-animate)
9
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
7
+ _原名 **use-scroll-animate** —— API 与 `<usa-*>` 标签完全不变;旧 npm 包继续作为别名发布。_
10
8
 
11
- [English](./README.md) | [简体中文](./README_zh.md) | [日本語](./README_ja.md)
12
-
13
- **[✨ 在线效果商店:所有动画实时预览,代码一键复制](https://harrisoncn.github.io/use-scroll-animate/)**
9
+ [![npm](https://img.shields.io/npm/v/motionary?style=flat-square)](https://www.npmjs.com/package/motionary) [![CI](https://github.com/HarrisonCN/motionary/actions/workflows/ci.yml/badge.svg)](https://github.com/HarrisonCN/motionary/actions/workflows/ci.yml) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](./LICENSE)
14
10
 
15
- </div>
11
+ [English](./README.md) | [简体中文](./README_zh.md) | [日本語](./README_ja.md)
16
12
 
17
- ## 为什么选择 `use-scroll-animate`?
13
+ **[🛍 动画商店](https://harrisoncn.github.io/motionary/showcase/)** · **[🧩 组件](https://harrisoncn.github.io/motionary/showcase/components.html)** · **[🎛 Playground](https://harrisoncn.github.io/motionary/showcase/playground.html)** · **[📜 滚动叙事](https://harrisoncn.github.io/motionary/showcase/story.html)**
18
14
 
19
- 在 2025 年,性能至关重要。传统的滚动动画库通常捆绑了沉重的依赖,依赖过时的滚动事件监听器,或者强制你使用特定的框架。
15
+ <sub>动画商店可预览、调整并复制全部 <b>227</b> 个动画 —— 214 个滚动预设,以及卡片、点击、物理与整页效果 —— 支持桌面与手机尺寸。</sub>
20
16
 
21
- `use-scroll-animate` 的设计初衷截然不同:
22
- - ⚡ **零依赖**:纯原生 JS/TypeScript 编写。
23
- - 🚀 **高性能**:由 `IntersectionObserver` 和原生 `Web Animations API` 驱动。默认不监听滚动事件(可选的滚动进度模式仅在被追踪元素可见时使用一个 passive、rAF 节流的监听器),无布局抖动。
24
- - 🪶 **极轻量**:Gzip 后核心约 4.8KB(含 `timeline`、`staggerChildren` 与 React/Vue 辅助在内全部约 6.1KB)。
25
- - 🧩 **框架无关**:完美支持原生 JS、React、Vue、Svelte 等。内置一流的 React Hooks 和 Vue Composables。
26
- - ♿ **无障碍**:原生支持 `prefers-reduced-motion`。
17
+ </div>
27
18
 
28
- ## 动画组件(v2.2)🧩
19
+ Motionary 在内容滚入视口时播放入场动画(IntersectionObserver + Web Animations,或浏览器原生滚动时间线),并提供 94 个动画自定义元素 —— 卡片、按钮、物理、页面转场、背景、WebGL 等 —— 可用于任何框架、纯 HTML 以及桌面 Web 视图应用(Electron、Tauri、WebView2)。全部遵循 `prefers-reduced-motion`。
29
20
 
30
- **30 个零依赖的动画 Web Components**(`<usa-*>`),分为六大类——**同时适用于网页与 Windows 桌面软件**(Electron、Tauri、WinUI/WPF/WinForms 中的 WebView2、PWA)。仅基于 Custom Elements + CSS + Web Animations:可摇树、SSR 安全、全面遵循 `prefers-reduced-motion`。**[在线组件库](https://harrisoncn.github.io/use-scroll-animate/showcase/components.html)** · [组件文档](./docs/components.md)(英文)· [Windows 应用指南](./docs/windows-apps.md)(英文)
21
+ ## 安装
31
22
 
32
- ```js
33
- import { defineComponents } from 'use-scroll-animate/components';
34
- defineComponents(); // 或按分类:import { defineTextComponents } from 'use-scroll-animate/components/text'
23
+ ```bash
24
+ npm i motionary
35
25
  ```
36
26
 
37
27
  ```html
38
- <!-- 或免构建直接使用 -->
39
- <script src="https://unpkg.com/use-scroll-animate@6/dist/components.umd.js"></script>
40
- <usa-typewriter words="你好,Windows。|你好,Web。"></usa-typewriter>
41
- <usa-spinner kind="fluent"></usa-spinner>
28
+ <!-- CDN (no build) -->
29
+ <script src="https://unpkg.com/motionary@6/dist/index.umd.js"></script> <!-- window.ScrollAnimate -->
30
+ <script src="https://unpkg.com/motionary@6/dist/presets-extended.umd.js"></script> <!-- +181 presets -->
31
+ <script src="https://unpkg.com/motionary@6/dist/components.umd.js"></script> <!-- every <usa-*>, window.UsaComponents -->
42
32
  ```
43
33
 
44
- | 分类(导入路径) | 组件 |
45
- |---|---|
46
- | **入场与滚动**(`/components/reveal`) | `<usa-reveal>` 滚动揭示(12 种效果)· `<usa-stagger>` 错峰列表 · `<usa-scroll-progress>` 阅读进度条 · `<usa-scrolly>` 粘性滚动叙事 |
47
- | **文字**(`/components/text`) | `<usa-typewriter>` 打字机 · `<usa-split-text>` 逐字揭示 · `<usa-scramble>` 乱码解码 · `<usa-counter>` 数字滚动 · `<usa-shimmer-text>` 流光文字 · `<usa-text-rotate>` 轮换词语 · `<usa-wave-text>` 波浪 · `<usa-glitch>` 故障 · `<usa-gradient-text>` 流动渐变 · `<usa-handwriting>` 手写 · `<usa-scroll-highlight>` 滚动高亮 |
48
- | **交互反馈**(`/components/interaction`) | `<usa-ripple>` 水波纹 · `<usa-magnetic>` 磁吸按钮 · `<usa-tilt>` 3D 倾斜卡片 · `<usa-spotlight>` Fluent 光照高亮 · `<usa-press>` 按压反馈 · `<usa-toggle>` 切换开关 |
49
- | **加载与反馈**(`/components/feedback`) | `<usa-spinner>`(WinUI 进度环、Windows 圆点等 6 种)· `<usa-skeleton>` 骨架屏 · `<usa-progress>` 进度条 · `<usa-toaster>` + `toast()` 通知 · `<usa-check>` 结果图标 |
50
- | **背景与装饰**(`/components/background`) | `<usa-aurora>` 极光 · `<usa-particles>` 粒子 · `<usa-grain>` 胶片颗粒 · `<usa-marquee>` 无限跑马灯 · `<usa-acrylic>` 亚克力 / 云母材质 · `<usa-grid-glow>` 网格光晕 · `<usa-blobs>` 流体色块 · `<usa-water-ripple>` 水波 · `<usa-dot-network>` 点阵 · `fluentPreset()` Fluent 预设 |
51
- | **过渡动画**(`/components/transitions`) | `<usa-dialog>` 弹窗 / 抽屉 / 底部面板 · `<usa-accordion>` 手风琴 · `<usa-view-switch>` 视图切换 · `viewTransition()` · `flip()` |
52
- | **弹簧与物理**(`/components/physics`) | `<usa-spring>` 弹入 / 弹出 / 掉落 / 果冻 / 橡皮筋 · `<usa-draggable>` 拖拽回弹、惯性、吸附 · `<usa-overscroll>` 弹性越界 · `spring()` · `createSpring()` · 预设 gentle / wobbly / stiff / bouncy |
53
- | **卡片效果**(`/components/cards`) | `<usa-card>` 翻转 · 全息 · 玻璃 · 边框光晕 · 流光边框 · 悬浮 · 聚光 · 扫光 · 视差分层 · 展开详情(可组合)· `<usa-card-stack>` 滑动卡堆 · `<usa-sticky-stack>` 滚动堆叠 · `<usa-carousel-3d>` 3D 轮播 |
54
- | **点击与轻触**(`/components/click`) | `<usa-button>` 按钮点击形变(挤压拉伸 · 弹性圆角 · 液态粘滞 · 按压凹陷 · 形状变形 · 提交→加载→成功)· `<usa-icon-morph>` 图标变形 · `<usa-click>` 水波纹 / 迸发 / 彩带 / 抖动 · `<usa-like>` · `<usa-hold>` · `<usa-double-tap>` · `<usa-checkbox>` |
55
- | **UI 组件与风格变体**(`/components/ui`) | `<usa-tabs>` 标签页 · `<usa-drawer>` 抽屉 · `<usa-bottom-sheet>` 底部面板 · `<usa-pull-refresh>` 下拉刷新 · `<usa-fab>` 悬浮按钮 · `<usa-navbar>` 自动隐藏导航栏 · `<usa-slider>` 滑块 · `<usa-rating>` 评分 · `<usa-tooltip>` · `<usa-popover>` · `<usa-badge>` · `<usa-avatar-stack>` · 所有组件均支持 `variant`(极简 / 霓虹 / 玻璃 / 粗野 / Fluent / Material) |
56
- | **页面与全局效果**(`/components/page`) | `pageTransition()` 页面切换(淡入 · 滑动 · 圆形揭示 · 百叶窗 · 像素溶解,单页 + 多页)· `themeTransition()` 主题圆形切换 · `<usa-cursor>` 自定义光标 · `smoothScroll()` · `<usa-fullpage>` 整屏 · `<usa-loading-bar>` · `<usa-back-to-top>` · `<usa-ambient>` 雪花 / 星空 / 噪点 · `<usa-splash>` 启动屏 · `<usa-auto-skeleton>` 自动骨架屏 · `<usa-motion-switch>` 动效强度 |
57
- | **时间线与编排** (`/components/timeline`) | `timeline()`(串联 · 重叠 · 标签 · 跳转 · 倒放 · 滚动擦洗)· `<usa-timeline>`(`data-tl` 步骤) |
58
- | **手势** (`/components/gesture`) | `gesture()`(拖动 · 轻扫 · 捏合 · 长按 · 单击 · 双击 → 弹簧)· `<usa-swipeable>` · `<usa-pinch-zoom>` |
59
- | **SVG 动画** (`/components/svg`) | `<usa-draw>`(线条描绘)· `<usa-morph>`(路径变形)· `<usa-mask-reveal>` · `<usa-anim-icon>` · `morphTo()` · `interpolatePath()` |
60
- | **Canvas 与 WebGL** (`/components/webgl`) | `<usa-shader>`(gradient · plasma · waves · aurora · snow · fireflies · stars · bokeh · rain · 自定义 GLSL)· `<usa-post-fx>`(后期处理)· `<usa-distort>` · `<usa-liquid>` · `glQuad()` —— 优雅降级 |
61
- | **3D 与景深** (`/components/depth`) | `<usa-cube>` · `<usa-depth>`(指针 · 陀螺仪 · 滚动景深视差)· `deviceTilt()` ·(另见 cards 中的 `<usa-carousel-3d>`) |
62
- | **布局动画** (`/components/layout`) | `<usa-auto-animate>` / `autoAnimate()`(列表与网格重排)· `<usa-masonry>`(瀑布流)· `sharedTransition()`(共享元素) |
63
- | **效果包** (`/components/packs`) | `<usa-pack>` (`name="ecommerce \| portfolio \| dashboard \| game \| landing"`) · `applyPack()` · `flyToCart()` · `countUp()` |
64
- | **特效插件 API** (`/components/fx`) | `<usa-fx>`(`effect` · `trigger`)· `registerEffect()` · `playEffect()` · `bindEffect()` · 内置:全部时间线入场、pulse · pop · jelly · wiggle · heartbeat · bounce · flash · tada · shake、burst · confetti · ripple |
65
- | **特效包** (`/components/effects`) | `registerAllEffects()` · 卡片与点击 2.0 · 物理 · 全页特效 · `<usa-story>` 滚动叙事 · 生成式背景 · 声音响应(`<usa-audio>`)· 光标拖尾与手势(`<usa-gesture-fx>`)· 主题包(`<usa-theme>`)· 23 个微交互 · `<usa-player>` JSON 动画 |
66
-
67
- 完整包约 22 kB gzip(JS + CSS);单个分类 3.5–6.4 kB;单个组件约 2 kB。下方的滚动动画核心不受影响。
68
-
69
- **在 Windows 软件中使用**:组件只是标准 Web 代码,Electron / Tauri 渲染进程中直接 `import` 即可;WinUI 3 / WPF / WinForms 用 WebView2 加载本地页面(`SetVirtualHostNameToFolderMapping`)并通过 `<script src="components.umd.js">` 引入。样式以 constructable stylesheet 注入,兼容严格 CSP;也可改为引入 `use-scroll-animate/components.css` 并调用 `configureComponents({ injectStyles: false })`。系统“动画效果”关闭时(`prefers-reduced-motion`)自动使用平静版本。
70
-
71
- ## 文档
34
+ jsDelivr 同样可用:`https://cdn.jsdelivr.net/npm/motionary@6/dist/…`。已有的 `use-scroll-animate` 安装与 `unpkg.com/use-scroll-animate@6` 链接继续可用。
72
35
 
73
- - [API 参考](./docs/API.md)(英文)· [演示页](./demo/index.html)(每个预设都可点击,无需构建)
74
- - 迁移指南:[从 AOS 迁移](./docs/migration-from-aos.md) · [从 GSAP ScrollTrigger 迁移](./docs/migration-from-gsap-scrolltrigger.md)
75
- - [升级到 2.0](./docs/deprecations.md):`createReactHooks` / `createVueComposables` 只能从 `use-scroll-animate/react` / `/vue` 导入;`dist/index.mjs`、`dist/index.esm.js`、`dist/types/*` 与 `dist/*` 深层导入已移除;默认引擎改为 `'auto'`。CDN 地址 `dist/index.umd.js` 不变。详见 [CHANGELOG](./CHANGELOG.md) 的 MIGRATION 部分。
36
+ ## 30 秒上手
76
37
 
77
- ## 安装
78
-
79
- ```bash
80
- npm install use-scroll-animate
81
- ```
82
-
83
- ## 快速上手 (原生 JS / HTML)
84
-
85
- 最简单的方法是通过 HTML 的 `data-sa` 属性。
38
+ 给元素加上 `data-sa`,用 `data-sa-animation` 选择预设(每个选项都有对应的 `data-sa-*` 属性),或使用 JS API:
86
39
 
87
40
  ```html
88
- <!-- 1. 为元素添加 data-sa 属性 -->
89
- <div data-sa data-sa-animation="fade-in-up" data-sa-duration="800">
90
- 当滚动到我时,我会动起来!
91
- </div>
92
-
41
+ <!-- 1. HTML only: data attributes + one init() call -->
42
+ <h2 data-sa data-sa-animation="fade-in-up">Hello</h2>
43
+ <div data-sa data-sa-animation="bounce-in-up" data-sa-delay="150">Card</div>
93
44
  <script type="module">
94
- // 2. 导入并初始化
95
- import ScrollAnimate from 'use-scroll-animate';
96
- ScrollAnimate.init();
45
+ import ScrollAnimate from 'motionary';
46
+ import 'motionary/presets/extended'; // optional: +181 presets (bounce-in-up, clip-diamond, …)
47
+ ScrollAnimate.init(); // picks up every [data-sa]
97
48
  </script>
98
49
  ```
99
50
 
100
- ## 原生滚动驱动引擎 `engine`(v1.6)
101
-
102
- 在支持 CSS 滚动驱动动画(`CSS.supports('animation-timeline: view()')`)的浏览器中,预设动画可以运行在浏览器原生的 **view timeline** 上:动画进度跟随滚动位置(在主线程之外),而不是由 IntersectionObserver 触发后按固定 `duration` 播放。
103
-
104
51
  ```js
105
- ScrollAnimate.observe('.card', { animation: 'fade-in-up', engine: 'auto' });
106
- const sa = createScrollAnimate({ defaultEngine: 'auto' }); // 实例级默认
107
- ```
108
-
109
- - `'auto'`:**2.0 起的默认值**,支持时使用原生时间线,否则回退 JS;若元素自行设置了 `duration`、`delay`、`offset` 或 `stagger`,则使用 JS。`'css'`:支持时始终使用原生时间线。`'js'`:1.x 的行为(`defaultEngine: 'js'` 可全局恢复)。
110
- - 原生引擎下 `duration`、`delay`、`threshold`、`offset`、`stagger` 不生效;动画区间由 `viewRange` 决定(默认 `['entry 0%', 'entry 100%']`),`easing` 仍然有效。HTML:`data-sa-engine`、`data-sa-view-range="entry 0%, cover 40%"`。
111
- - `once`(默认)在动画完成后固定最终状态;`repeat: true` 时随滚动双向播放。回调、`onProgress`、`progressVar`、视差照常工作。
112
- - 类名模式、`prefers-reduced-motion`、`animate()`、`timeline()`、`staggerChildren()` 始终使用 JS 引擎。另导出 `supportsScrollTimeline()`。
113
-
114
- ## v1.4.0 新特性 ✨
115
-
116
- - **真实滚动进度 `progressMode: 'scroll'`**(可选):`onProgress` 默认返回元素的可见比例,对高于屏幕的元素永远到不了 1。开启后进度为:元素顶部到达视口底部时为 `0`,底部离开视口顶部时为 `1`。视差同样使用该进度。HTML 写法:`data-sa-progress="scroll"`;另导出辅助函数 `getScrollProgress(el, root?)`。
52
+ // 2. JS API
53
+ import ScrollAnimate, { staggerChildren, parallax, timeline } from 'motionary';
117
54
 
118
- ```js
119
- ScrollAnimate.observe('.chapter', {
120
- progressMode: 'scroll',
121
- onProgress: (el, p) => el.style.setProperty('--progress', p),
122
- });
123
- ```
124
-
125
- - **动态子元素交错动画**:`staggerChildren()`(原生)与 `useScrollStagger()`(React,**现已支持 Vue**)新增 `observeChildren: true`。通过 `MutationObserver` 监听后续新增的子元素(无限列表、“加载更多”):显现前新增的会加入交错序列,显现后新增的在滚入视口时按批次交错播放。
126
-
127
- ```js
128
- import { staggerChildren } from 'use-scroll-animate';
129
- const stop = staggerChildren(document.querySelector('#feed'), { stagger: 60, observeChildren: true });
130
- ```
131
-
132
- - **时间线 `timeline()`**:在同一播放头上串联多个元素的动画。默认每步在上一步结束后开始;`at` 可重叠(`'-=300'`)、延后(`'+=200'`)、与上一步同时(`'<'`)、对齐标签或绝对时间;支持播放、倒放、跳转与随滚动擦洗。(取代 4.0 中移除的 `sequence()`,见 [upgrading-4.md](./docs/upgrading-4.md)。)
133
-
134
- ```js
135
- import { timeline } from 'use-scroll-animate';
136
- const tl = timeline({ defaults: { duration: 700 } })
137
- .to('.hero h1', 'fade-up')
138
- .to('.hero p', 'blur', { at: '-=300' })
139
- .to('.hero .btn', 'scale', { stagger: 80 });
140
- await tl.play(); // 全部完成后 resolve;或 tl.scrub(hero) 随滚动
141
- ```
142
-
143
- - **新预设**:`scale-up`、`blur-in-up`、`flip-up`、`flip-down`、`rotate-left`、`rotate-right`,以及 clip-path 揭示 `clip-up`、`clip-down`、`clip-left`、`clip-right`、`clip-circle`。
144
- - **更省内存**:`once` 元素动画触发后自动从注册表移除(仍需视差/`onProgress` 的除外),并记录在 `WeakSet` 中,`init()`/`observe()` 不会重复播放。如需旧行为可设置 `createScrollAnimate({ autoUnregister: false })`。
145
- - **规范的 `exports` 字段**:2.0 起以 ESM 为主:`import` → `dist/*.js` + `*.d.ts`,`require` → `dist/*.cjs` + `*.d.cts`。
55
+ ScrollAnimate.observe('.card', { animation: 'zoom-in-up', duration: 800, easing: 'spring' });
56
+ staggerChildren(document.querySelector('.grid'), { animation: 'stagger-pop', stagger: 60 });
57
+ parallax('.hero-bg', { speed: 0.3 });
58
+ ScrollAnimate.observe('.logo', { animation: 'scrub-spin', engine: 'css', viewRange: ['cover 0%', 'cover 100%'] });
59
+ ```
146
60
 
147
- ## v1.2.0 新特性
61
+ 框架 —— 每个适配器都是独立入口,卸载时自动清理:
148
62
 
149
- - **单次触发 (Once)**:动画触发后自动停止观察,节省资源。
150
- - **视口偏移 (Offset)**:支持设置元素进入视口多少像素后才触发动画。
151
- - **新预设**:新增 `shimmer`(流光)、`pulse`(脉冲)、`swing`(摇摆)。
152
- - **多语言支持**:新增中文和日文文档。
63
+ ```jsx
64
+ // React
65
+ import React from 'react';
66
+ import { createReactHooks } from 'motionary/react';
67
+ const { useScrollAnimate } = createReactHooks(React);
153
68
 
154
- ## 框架集成(v1.7)
69
+ export function Card() {
70
+ const ref = useScrollAnimate({ animation: 'fade-in-up' });
71
+ return <div ref={ref}>Hello</div>;
72
+ }
73
+ ```
155
74
 
156
- 每个集成都是独立的入口(`use-scroll-animate/react`、`/vue`、`/svelte`、`/solid`、`/element`),共享同一份核心代码。
75
+ ```vue
76
+ <!-- Vue 3 -->
77
+ <script setup>
78
+ import { ref, onMounted, onUnmounted } from 'vue';
79
+ import { createVueComposables } from 'motionary/vue';
80
+ const { useScrollAnimate } = createVueComposables({ ref, onMounted, onUnmounted });
81
+ const { animateRef } = useScrollAnimate({ animation: 'zoom-in' });
82
+ </script>
83
+ <template><div ref="animateRef">Hello</div></template>
84
+ ```
157
85
 
158
86
  ```svelte
159
- <!-- Svelte:action,无需引入 svelte -->
160
- <script>import { scrollAnimate, scrollStagger } from 'use-scroll-animate/svelte';</script>
161
- <div use:scrollAnimate={{ animation: 'fade-in-up' }}>…</div>
162
- <ul use:scrollStagger={{ stagger: 60 }}>…</ul>
87
+ <!-- Svelte 3–5 -->
88
+ <script>
89
+ import { scrollAnimate } from 'motionary/svelte';
90
+ </script>
91
+ <div use:scrollAnimate={{ animation: 'flip-up' }}>Hello</div>
163
92
  ```
164
93
 
165
- ```tsx
166
- // Solid:指令 + ref 原语(solid-js 为可选 peer 依赖)
167
- import { scrollAnimate, useScrollAnimate } from 'use-scroll-animate/solid';
168
- <div use:scrollAnimate={{ animation: 'zoom-in' }}>…</div>
169
- <div ref={useScrollAnimate({ animation: 'fade-in-left' })}>…</div>
94
+ ```jsx
95
+ // Solid
96
+ import { scrollAnimate } from 'motionary/solid';
97
+ scrollAnimate; // keep the directive import (TypeScript)
98
+ export const Card = () => <div use:scrollAnimate={{ animation: 'blur-in-up' }}>Hello</div>;
170
99
  ```
171
100
 
101
+ ```ts
102
+ // Angular (standalone) — the animated Web Components
103
+ import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
104
+ import { usaInitializer } from 'motionary/components/angular';
105
+ import 'motionary/presets/extended'; // lets <usa-reveal effect> use every preset name
106
+ // app.config.ts: providers: [{ provide: APP_INITIALIZER, multi: true, useFactory: usaInitializer() }]
107
+ @Component({ standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA],
108
+ template: `<usa-reveal effect="bounce-in-up"><h2>Hello</h2></usa-reveal>` })
109
+ export class Hero {}
110
+ ```
111
+
112
+ 动画组件无需任何框架:
113
+
172
114
  ```html
173
- <!-- Web Component:属性与 data-sa-* 相同(去掉前缀),并派发 sa:enter / sa:leave / sa:start / sa:complete / sa:progress 事件 -->
174
115
  <script type="module">
175
- import { defineScrollAnimate } from 'use-scroll-animate/element';
176
- defineScrollAnimate();
116
+ import { defineComponents } from 'motionary/components';
117
+ defineComponents(); // or lazyDefine() from 'motionary/components/lazy'
177
118
  </script>
178
- <scroll-animate animation="fade-in-up" duration="800">…</scroll-animate>
179
- <!-- 无构建:<script src="https://unpkg.com/use-scroll-animate/dist/element.umd.js"></script> -->
119
+ <usa-card effect="holo">…</usa-card>
120
+ <usa-button deform="gooey">Buy</usa-button>
121
+ <usa-fx effect="confetti" trigger="click"><button>Celebrate</button></usa-fx>
180
122
  ```
181
123
 
182
- ## 退场动画与视差辅助函数(v1.8)
124
+ ## 功能一览
183
125
 
184
- ```js
185
- ScrollAnimate.observe('.card', { animation: 'fade-in-up', exit: true }); // 离开视口时反向播放入场动画
186
- ScrollAnimate.observe('.toast', { animation: 'zoom-in', exit: 'fade-in-down' }); // 用另一个预设(反向)退场
187
- ```
126
+ | 领域 | 内容 |
127
+ |---|---|
128
+ | **滚动预设** | **214** 个入场预设(33 个核心 + 181 个位于 `motionary/presets/extended`),14 个系列:淡入、缩放、3D 翻转与开门、回弹滑入、clip-path 形状、模糊与遮罩、弹跳与弹性、色彩与光影、景深、故障 / 打字机、错峰列表与随滚动 `scrub-*`;另有 `timeline()` 与 10 个时间线预设 |
129
+ | **卡片、点击与按钮形变** | `<usa-card>` 含 10 种效果(翻转、全息、玻璃、边框光晕……),卡片堆叠与 3D 轮播;7 个点击组件、4 种按钮形变(squash · wobble · gooey · dent)与图标变形;12 个注册的卡片 / 点击效果(holo、book-open、shockwave、ink-splash、emoji-rain……) |
130
+ | **物理与弹跳** | `<usa-spring>`、`<usa-draggable>`(回弹 · 惯性 · 吸附)、`<usa-overscroll>`;`spring()` / `solveSpring()` 与 7 个弹簧预设;7 个物理效果(bounce-in、rubber-band、gravity-text、bell-swing……) |
131
+ | **页面转场** | `pageTransition()`、`viewTransition()`、`sharedTransition()`、`flip()`、多页(MPA)转场;7 个页面效果(curtain、iris、pixel-dissolve、blinds、velocity-skew……);`<usa-dialog>`、`<usa-view-switch>` |
132
+ | **生成式背景** | 6 种画布背景(flow-field、voronoi、mesh-gradient、starfield、metaballs、contours)+ 9 个背景元素(极光、粒子、胶片颗粒、流体色块、水波、亚克力 / 云母……) |
133
+ | **声音响应** | `<usa-audio>` + Web Audio 节拍检测(`createBeatDetector()`、`onBeat()`);3 种音频可视化(spectrum-bars、pulse-ring、wave-ring);任意效果都可随节拍触发 |
134
+ | **光标与手势** | 5 种光标效果(彗星 / 丝带 / 星光拖尾、磁性圆点、聚光灯)+ `<usa-cursor>`;甩动 · 旋转 · 长按触发效果(`<usa-gesture-fx>`);`<usa-swipeable>`、`<usa-pinch-zoom>` |
135
+ | **主题** | 5 套主题(neon · paper · glass · retro · brutalist),通过 `<usa-theme>` / `applyTheme()` 使用,各带一个标志性效果;动效令牌(`/components/tokens`) |
136
+ | **微交互** | 23 个现成的界面瞬间:copy-success、like-heart、add-to-cart、send-plane、upvote、trash-shake、input-shake、success-check、notify-badge…… |
137
+ | **`<usa-player>` 与滚动叙事** | `<usa-player>` 播放 JSON 动画(关键帧轨道、预设、效果;load / view / scroll / click 触发),可从 Playground 导出;`<usa-story>` 含 6 个滚动叙事模板 |
138
+ | **WebGL** | `<usa-shader>`、`<usa-distort>`、`<usa-liquid>`、`<usa-post-fx>` —— 5 个粒子预设、9 种后期效果(bloom、CRT、色散、故障……),带 CSS 降级与省电调速 |
188
139
 
189
- - `exit`:`true`、预设名、预设数组或 `{ from, to }`;离开视口时反向播放,再次进入时重新入场(默认隐含 `repeat: true`)。HTML:`data-sa-exit` / `data-sa-exit="zoom-out"`。原生引擎下退场同样随滚动驱动;减少动态效果时不播放。
140
+ 90 种效果共用一个注册表(`registerEffect()` / `playEffect()` / `bindEffect()` / `<usa-fx>`,位于 `motionary/components/fx`);5.x 效果包位于 `motionary/components/effects`。
190
141
 
191
- ```js
192
- import { parallax } from 'use-scroll-animate';
193
- const stop = parallax('.hero-bg', { speed: 0.3 }); // 正值:比页面慢(背景);负值:比页面快
194
- parallax('.badge', { speed: -0.15, axis: 'x' });
195
- ```
142
+ ### 全部 94 个动画组件
143
+
144
+ 可按分类导入(`motionary/components/cards`)、全部导入(`motionary/components`)、使用按需加载 CSS 的 `/components/lite`,或用 `lazyDefine()` 只加载页面上出现的标签。框架封装:`/components/react`、`/vue`、`/svelte`、`/solid`、`/angular`。
145
+
146
+ | 入口 | 元素 |
147
+ |---|---|
148
+ | **滚动揭示** (`/components/reveal`) | `<usa-reveal>` · `<usa-stagger>` · `<usa-scroll-progress>` · `<usa-scrolly>` |
149
+ | **文字** (`/components/text`) | `<usa-typewriter>` · `<usa-split-text>` · `<usa-scramble>` · `<usa-counter>` · `<usa-shimmer-text>` · `<usa-text-rotate>` · `<usa-wave-text>` · `<usa-glitch>` · `<usa-gradient-text>` · `<usa-handwriting>` · `<usa-scroll-highlight>` |
150
+ | **交互** (`/components/interaction`) | `<usa-ripple>` · `<usa-magnetic>` · `<usa-tilt>` · `<usa-spotlight>` · `<usa-press>` · `<usa-toggle>` |
151
+ | **反馈** (`/components/feedback`) | `<usa-spinner>` · `<usa-skeleton>` · `<usa-progress>` · `<usa-toaster>` · `<usa-check>` |
152
+ | **背景与装饰** (`/components/background`) | `<usa-aurora>` · `<usa-particles>` · `<usa-grain>` · `<usa-marquee>` · `<usa-acrylic>` · `<usa-grid-glow>` · `<usa-blobs>` · `<usa-water-ripple>` · `<usa-dot-network>` |
153
+ | **转场** (`/components/transitions`) | `<usa-dialog>` · `<usa-accordion>` · `<usa-view-switch>` |
154
+ | **弹簧与物理** (`/components/physics`) | `<usa-spring>` · `<usa-draggable>` · `<usa-overscroll>` |
155
+ | **卡片** (`/components/cards`) | `<usa-card>` · `<usa-card-stack>` · `<usa-sticky-stack>` · `<usa-carousel-3d>` |
156
+ | **点击与按钮** (`/components/click`) | `<usa-click>` · `<usa-button>` · `<usa-icon-morph>` · `<usa-like>` · `<usa-hold>` · `<usa-double-tap>` · `<usa-checkbox>` |
157
+ | **UI 组件** (`/components/ui`) | `<usa-tabs>` · `<usa-drawer>` · `<usa-bottom-sheet>` · `<usa-pull-refresh>` · `<usa-fab>` · `<usa-navbar>` · `<usa-slider>` · `<usa-rating>` · `<usa-tooltip>` · `<usa-popover>` · `<usa-badge>` · `<usa-avatar-stack>` |
158
+ | **整页** (`/components/page`) | `<usa-cursor>` · `<usa-fullpage>` · `<usa-loading-bar>` · `<usa-back-to-top>` · `<usa-ambient>` · `<usa-splash>` · `<usa-auto-skeleton>` · `<usa-motion-switch>` |
159
+ | **时间线** (`/components/timeline`) | `<usa-timeline>` |
160
+ | **手势** (`/components/gesture`) | `<usa-swipeable>` · `<usa-pinch-zoom>` |
161
+ | **SVG** (`/components/svg`) | `<usa-draw>` · `<usa-morph>` · `<usa-mask-reveal>` · `<usa-anim-icon>` |
162
+ | **WebGL** (`/components/webgl`) | `<usa-shader>` · `<usa-distort>` · `<usa-liquid>` · `<usa-post-fx>` |
163
+ | **3D 景深** (`/components/depth`) | `<usa-cube>` · `<usa-depth>` |
164
+ | **布局** (`/components/layout`) | `<usa-auto-animate>` · `<usa-masonry>` |
165
+ | **效果包** (`/components/packs`) | `<usa-pack>` |
166
+ | **效果注册表** (`/components/fx`) | `<usa-fx>` |
167
+ | **效果包** (`/components/effects`) | `<usa-player>` · `<usa-story>` · `<usa-audio>` · `<usa-theme>` · `<usa-gesture-fx>` |
168
+
169
+ ## 无障碍与减少动态效果
170
+
171
+ - 开启 `prefers-reduced-motion: reduce` 时,滚动揭示会立即显示内容(无入场、视差或随滚动动画),组件退回平静状态(`staticAlternative()` / `adaptKeyframes()`)。
172
+ - `motionary/components/a11y`:`setMotionSensitivity()` 分级让用户关闭闪烁、循环或视差;`announce()` 实时播报区域;`auditMotionA11y()`;`baselineReport()`。`<usa-motion-switch>` 是现成的面向用户的动效开关。
173
+ - 详见 [docs/accessibility.md](./docs/accessibility.md)。
174
+
175
+ ## 性能与体积
176
+
177
+ 默认不监听 scroll 事件(IntersectionObserver),动画运行在合成层(`transform`、`opacity`、`filter`、`clip-path`),可选主线程之外的原生滚动时间线(`engine: 'css'`)。每个入口都可摇树,并在 CI 中强制 gzip 预算(`size-budget.json`)。6.1 实测(压缩 + gzip):
178
+
179
+ | 导入内容 | gzip |
180
+ |---|---:|
181
+ | `import ScrollAnimate from 'motionary'` (default instance) | 5.72 kB |
182
+ | Everything from the main entry | 8.69 kB |
183
+ | `dist/index.umd.js` (CDN) | 8.81 kB |
184
+ | `parallax()` alone | 1.22 kB |
185
+ | `motionary/presets/extended` (181 presets) | 4.69 kB |
186
+ | `motionary/components/reveal` | 4.10 kB |
187
+ | `motionary/components/effects` (8 effect packs) | 26.40 kB |
188
+ | `motionary/components/lite` (every component, CSS on demand) | 68.48 kB |
189
+ | `motionary/components` (every component + CSS) | 85.15 kB |
190
+ | `dist/components.umd.js` (CDN, everything) | 106.75 kB |
191
+
192
+ 更多:[docs/performance.md](./docs/performance.md)。
193
+
194
+ ## 浏览器支持
195
+
196
+ 2023 年以来的常青浏览器:Chrome / Edge ≥ 111、Safari ≥ 16.4、Firefox ≥ 115、WebView2、Electron ≥ 24(Custom Elements、Web Animations、IntersectionObserver、ResizeObserver、可构造样式表)。View Transitions 与滚动驱动动画为渐进增强 —— 支持时使用,否则回退到 JS。在服务端(SSR)导入不会执行任何操作。可用 `baselineReport()` 检查浏览器。
197
+
198
+ ## 文档
199
+
200
+ - [API 参考](./docs/API.md)(英文)—— 所有导出、选项与 `data-sa-*` 属性
201
+ - [预设一览](./docs/presets.md)(全部 214 个)
202
+ - [组件文档](./docs/components.md)(每个 `<usa-*>` 元素、属性与事件)
203
+ - [框架与 SSR](./docs/frameworks-ssr.md) · [Windows 应用](./docs/windows-apps.md) · [混合应用(MAUI、Flutter、Electron、Tauri)](./docs/hybrid-apps.md)
204
+ - [动效令牌](./docs/motion-tokens.md) · [从 AOS 迁移](./docs/migration-from-aos.md) · [从 GSAP ScrollTrigger 迁移](./docs/migration-from-gsap-scrolltrigger.md)
205
+ - [演示页](./demo/index.html)(每个预设都可点击,无需构建)
206
+
207
+ ## 升级
196
208
 
197
- - `parallax(target, { speed = 0.2, axis = 'y', progressVar = '--sa-parallax', root, respectReducedMotion = true })`:进度写入 CSS 变量,位移写入独立的 `translate` 属性(与 `transform` 和入场动画互不冲突);`prefers-reduced-motion` 时只写变量不位移。返回停止函数。
209
+ - 从 `use-scroll-animate`:`npm i motionary`,把导入路径与 CDN 链接中的 `use-scroll-animate` 换成 `motionary` 即可,其余不变(旧包名会继续同步发布)。
210
+ - [升级到 6.0](./docs/upgrading-6.md)(`npx usa-codemod-6`)· [升级到 5.0](./docs/upgrading-5.md)(`npx usa-codemod-5`)· [4.0](./docs/upgrading-4.md) · [3.0](./docs/upgrading-3.md) · [2.0](./docs/deprecations.md)
211
+ - [更新日志](./CHANGELOG.md)
198
212
 
199
- ## 核心配置
213
+ ## 路线图
200
214
 
201
- | 选项 | 类型 | 默认值 | 描述 |
202
- |--------|------|---------|-------------|
203
- | `animation` | `string` \| `string[]` | `'fade-in-up'` | 预设名称或预设数组 |
204
- | `duration` | `number` | `600` | 动画持续时间 (ms) |
205
- | `delay` | `number` | `0` | 动画延迟 (ms) |
206
- | `once` | `boolean` | `true` | 是否只触发一次 |
207
- | `offset` | `number` | `0` | 触发动画的视口偏移量 (px) |
208
- | `parallax` | `object` | `{}` | 视差效果配置 |
209
- | `stagger` | `number` | `0` | 同批次显现的兄弟元素之间的额外延迟 (ms) |
210
- | `onProgress` | `(el, progress) => void` | – | 滚动进度回调 (0–1) |
211
- | `progressMode` | `'ratio'` \| `'scroll'` | `'ratio'` | 进度计算方式:可见比例或真实滚动进度 |
212
- | `engine` | `'auto'` \| `'js'` \| `'css'` | `'auto'` | 支持时使用原生滚动驱动时间线,否则回退 JS |
213
- | `viewRange` | `[string, string]` | `['entry 0%', 'entry 100%']` | 仅原生引擎:入场动画的时间线区间 |
215
+ 每个版本一个 PR,直至 7.0 —— 粒子与流体、文字特效、光影与材质、3D 场景、形变、转场、天气氛围、交互物理:[docs/ROADMAP.md](./docs/ROADMAP.md)。
214
216
 
215
- ## 许可证
217
+ ## 贡献与许可证
216
218
 
217
- 本项目采用 MIT 许可证 - 详情请参阅 [LICENSE](LICENSE) 文件。
219
+ 欢迎提交 Issue 与 PR —— 参见 [CONTRIBUTING.md](./CONTRIBUTING.md)。MIT © HarrisonCN —— 参见 [LICENSE](./LICENSE)。
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  /**
4
- * use-scroll-animate/components — shared base for the `<usa-*>` custom elements.
4
+ * motionary/components — shared base for the `<usa-*>` custom elements.
5
5
  *
6
6
  * Everything here is lazy: nothing touches `window`, `document`,
7
7
  * `HTMLElement` or `matchMedia` at import time, so the components can be
@@ -390,7 +390,7 @@ function deprecate(key, message) {
390
390
  return;
391
391
  warned.add(key);
392
392
  if (typeof console !== 'undefined')
393
- console.warn(`[use-scroll-animate] ${message}`);
393
+ console.warn(`[motionary] ${message}`);
394
394
  }
395
395
  /**
396
396
  * The `kind` attribute of `<usa-spinner>`, `<usa-check>`, `<usa-dialog>` and
@@ -433,4 +433,4 @@ exports.setStyleLoader = setStyleLoader;
433
433
  exports.shadowStyles = shadowStyles;
434
434
  exports.srText = srText;
435
435
  exports.withoutDeprecations = withoutDeprecations;
436
- //# sourceMappingURL=base-B5i8qQPR.cjs.map
436
+ //# sourceMappingURL=base-BaQV-2ha.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"base-BaQV-2ha.cjs","sources":["../../src/components/base.ts"],"sourcesContent":["/**\n * motionary/components — shared base for the `<usa-*>` custom elements.\n *\n * Everything here is lazy: nothing touches `window`, `document`,\n * `HTMLElement` or `matchMedia` at import time, so the components can be\n * imported during SSR (Next, Nuxt, Astro…) and in Electron/Tauri preload\n * scripts. Classes are created the first time a `define*()` function runs.\n */\n\nexport interface ComponentsConfig {\n /**\n * Inject each component's CSS when it is defined (default `true`). Uses a\n * constructable stylesheet (`document.adoptedStyleSheets`, which a strict\n * `style-src` CSP does not block) and falls back to a `<style>` tag. Set\n * to `false` when you load `motionary/components.css` yourself.\n */\n injectStyles?: boolean;\n /**\n * `'user'` (default) follows `prefers-reduced-motion`; `'reduce'` always\n * uses the reduced variants (e.g. a kiosk / battery-saver mode). 5.0: the\n * OS setting can no longer be ignored (`'no-preference'` was removed).\n */\n reducedMotion?: 'user' | 'reduce';\n /**\n * Global motion intensity (v2.7): `'low'` (shorter, calmer), `'normal'`\n * (default) or `'high'`. Scales every component animation's duration and\n * sets `--usa-motion` (0.6 / 1 / 1.25) on `<html>` for your own CSS. 5.0:\n * `'off'` was removed — use `motionSensitivity: 'minimal'`.\n */\n motionIntensity?: MotionIntensity;\n /**\n * Motion-sensitivity level (v4.4), finer than reduced motion:\n * `'full'` (default) · `'gentle'` (no spins, zooms, skews or parallax —\n * translations and fades only, safe for vestibular disorders) ·\n * `'minimal'` (fades only; components use their reduced-motion variants) ·\n * `'static'` (no animation: every component shows its static alternative).\n * See `setMotionSensitivity()` in `motionary/components/a11y`.\n */\n motionSensitivity?: MotionSensitivity;\n}\n\nexport type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';\nexport const MOTION_SENSITIVITY_LEVELS: readonly MotionSensitivity[] = ['full', 'gentle', 'minimal', 'static'];\n\nexport type MotionIntensity = 'low' | 'normal' | 'high';\nexport const MOTION_SCALE: Record<MotionIntensity, number> = { low: 0.6, normal: 1, high: 1.25 };\n\nconst config: Required<ComponentsConfig> = { injectStyles: true, reducedMotion: 'user', motionIntensity: 'normal', motionSensitivity: 'full' };\n\n/** Change global component settings (call before `define*()` for `injectStyles`). */\nexport function configureComponents(options: ComponentsConfig): void {\n options = { ...options };\n // 5.0: removed values are ignored (see docs/upgrading-5.md)\n if (options.motionIntensity && !(options.motionIntensity in MOTION_SCALE)) delete options.motionIntensity;\n if (options.reducedMotion && options.reducedMotion !== 'reduce') options.reducedMotion = 'user';\n Object.assign(config, options);\n if (options.motionIntensity && typeof document !== 'undefined') {\n document.documentElement.style.setProperty('--usa-motion', String(MOTION_SCALE[options.motionIntensity] ?? 1));\n document.documentElement.setAttribute('data-usa-motion', options.motionIntensity);\n }\n if (options.motionSensitivity && typeof document !== 'undefined') {\n if (options.motionSensitivity === 'full') document.documentElement.removeAttribute('data-usa-sensitivity');\n else document.documentElement.setAttribute('data-usa-sensitivity', options.motionSensitivity);\n }\n}\n\n/** The current motion-sensitivity level (v4.4). */\nexport function getMotionSensitivity(): MotionSensitivity {\n return config.motionSensitivity;\n}\n\nconst VESTIBULAR = /rotate|scale|skew|perspective|matrix3d/;\n/**\n * Adapt keyframes to the sensitivity level: `gentle` drops transforms that\n * spin, zoom or skew (and 3D), `minimal` keeps opacity only, `static` keeps\n * just the final frame. `full` returns them unchanged.\n */\nexport function adaptKeyframes(frames: Keyframe[], level: MotionSensitivity = config.motionSensitivity): Keyframe[] {\n if (level === 'full' || !frames.length) return frames;\n if (level === 'static') return [frames[frames.length - 1]];\n return frames.map((f) => {\n const out: Keyframe = {};\n for (const [k, v] of Object.entries(f)) {\n if (k === 'offset' || k === 'easing' || k === 'composite') out[k] = v as any;\n else if (level === 'minimal') {\n if (k === 'opacity') out[k] = v as any;\n } else if (k === 'rotate' || k === 'scale' || (k === 'transform' && VESTIBULAR.test(String(v)))) continue;\n else out[k] = v as any;\n }\n return out;\n });\n}\n\nlet quiet = 0;\n/** Run `fn` without 4.9 deprecation warnings (library-internal calls). */\nexport function withoutDeprecations<T>(fn: () => T): T {\n quiet++;\n try {\n return fn();\n } finally {\n quiet--;\n }\n}\n\n/** The current global motion intensity. */\nexport function getMotionIntensity(): MotionIntensity {\n return config.motionIntensity;\n}\n\n/** Duration multiplier for the current intensity (1 when `normal`). */\nexport function motionScale(): number {\n return MOTION_SCALE[config.motionIntensity] ?? 1;\n}\n\nexport const canDefine = (): boolean => typeof customElements !== 'undefined' && typeof HTMLElement !== 'undefined';\n\n/** `true` when animations should be reduced (OS setting or `configureComponents`). */\nexport function prefersReducedMotion(): boolean {\n if (config.motionSensitivity === 'minimal' || config.motionSensitivity === 'static') return true;\n if (config.reducedMotion === 'reduce') return true;\n return typeof matchMedia === 'function' && !!matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\nconst injected = new Set<string>();\n\n/** Add a component's stylesheet to the document once. */\nexport function adoptStyles(id: string, css: string): void {\n if (!config.injectStyles || !css || injected.has(id) || typeof document === 'undefined') return;\n injected.add(id);\n try {\n if (typeof CSSStyleSheet === 'function' && 'adoptedStyleSheets' in document) {\n const sheet = new CSSStyleSheet();\n sheet.replaceSync(css);\n document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];\n return;\n }\n } catch {\n /* fall through to <style> */\n }\n const style = document.createElement('style');\n style.setAttribute('data-usa', id);\n style.textContent = css;\n (document.head || document.documentElement).appendChild(style);\n}\n\n/** Attach `css` to a shadow root (constructable sheet where supported, else `<style>`). */\nexport function shadowStyles(root: ShadowRoot, css: string): void {\n try {\n if (typeof CSSStyleSheet === 'function' && 'adoptedStyleSheets' in root) {\n const sheet = new CSSStyleSheet();\n sheet.replaceSync(css);\n root.adoptedStyleSheets = [sheet];\n return;\n }\n } catch {\n /* fall through */\n }\n const style = document.createElement('style');\n style.textContent = css;\n root.prepend(style);\n}\n\nexport type Cleanup = () => void;\n\n/**\n * Members shared by every `<usa-*>` element. Attribute helpers, a cleanup\n * bag that is emptied on disconnect, and motion helpers that degrade to the\n * final state without WAAPI or under reduced motion.\n */\nexport interface UsaElement extends HTMLElement {\n /** `true` while reduced motion applies to this element. */\n readonly reduced: boolean;\n}\n\nexport interface UsaBase extends UsaElement {\n mount(): void;\n changed(name: string): void;\n unmount(): void;\n str(name: string, fallback?: string): string;\n num(name: string, fallback: number): number;\n flag(name: string): boolean;\n setFlag(name: string, on: boolean): void;\n onCleanup(fn: Cleanup): void;\n listen<K extends keyof HTMLElementEventMap>(\n target: EventTarget,\n type: K | string,\n fn: (e: any) => void,\n options?: AddEventListenerOptions\n ): void;\n inView(cb: (visible: boolean, entry?: IntersectionObserverEntry) => void, init?: IntersectionObserverInit, target?: Element): void;\n motion(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;\n emit(type: string, detail?: unknown): boolean;\n}\n\ntype BaseCtor = new () => UsaBase;\nlet baseClass: BaseCtor | null = null;\n\n/** The lazily created base class (needs `HTMLElement`). */\nexport function getBase(): BaseCtor {\n if (baseClass) return baseClass;\n class Base extends HTMLElement {\n private _cleanups: Cleanup[] = [];\n private _connected = false;\n\n get reduced(): boolean {\n return prefersReducedMotion();\n }\n\n connectedCallback(): void {\n if (this._connected) return;\n this._connected = true;\n styleLoader?.(this.localName);\n // Upgraded while the parser is still inside us (a <script> in <head>\n // defined the element): children/text are not there yet, so wait.\n if (typeof document !== 'undefined' && document.readyState === 'loading' && !this.nextSibling && !this.childNodes.length) {\n const go = () => {\n if (this._connected && this.isConnected) this.mount();\n };\n document.addEventListener('DOMContentLoaded', go, { once: true });\n this._cleanups.push(() => document.removeEventListener('DOMContentLoaded', go));\n return;\n }\n this.mount();\n }\n\n disconnectedCallback(): void {\n this._connected = false;\n this.teardown();\n }\n\n attributeChangedCallback(_name: string, oldValue: string | null, value: string | null): void {\n if (!this._connected || oldValue === value) return;\n this.changed(_name);\n }\n\n /** Re-mount on attribute change (override for finer updates). */\n changed(_name: string): void {\n this.teardown();\n this.mount();\n }\n\n private teardown(): void {\n this._cleanups.splice(0).reverse().forEach((fn) => fn());\n this.unmount();\n }\n\n mount(): void {}\n unmount(): void {}\n\n str(name: string, fallback = ''): string {\n const v = this.getAttribute(name);\n return v === null ? fallback : v;\n }\n\n num(name: string, fallback: number): number {\n const v = this.getAttribute(name);\n const n = v === null || v.trim() === '' ? NaN : Number(v);\n return Number.isFinite(n) ? n : fallback;\n }\n\n /** Boolean attribute: present and not `\"false\"`. */\n flag(name: string): boolean {\n const v = this.getAttribute(name);\n return v !== null && v !== 'false';\n }\n\n setFlag(name: string, on: boolean): void {\n if (on) this.setAttribute(name, '');\n else this.removeAttribute(name);\n }\n\n onCleanup(fn: Cleanup): void {\n this._cleanups.push(fn);\n }\n\n listen(target: EventTarget, type: string, fn: (e: any) => void, options?: AddEventListenerOptions): void {\n target.addEventListener(type, fn, options);\n this.onCleanup(() => target.removeEventListener(type, fn, options));\n }\n\n /** Calls `cb(true/false)` as the element enters / leaves the viewport. */\n inView(cb: (visible: boolean, entry?: IntersectionObserverEntry) => void, init?: IntersectionObserverInit, target: Element = this): void {\n if (typeof IntersectionObserver === 'undefined') {\n cb(true);\n return;\n }\n const io = new IntersectionObserver((entries) => {\n for (const e of entries) cb(e.isIntersecting, e);\n }, init);\n io.observe(target);\n this.onCleanup(() => io.disconnect());\n }\n\n /** `el.animate()` that returns `null` (and applies the last frame) without WAAPI. */\n motion(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null {\n return animateWithMotion(el, keyframes, options);\n }\n\n emit(type: string, detail?: unknown): boolean {\n return this.dispatchEvent(new CustomEvent(`usa:${type}`, { detail, bubbles: true, cancelable: true }));\n }\n }\n baseClass = Base as unknown as BaseCtor;\n return baseClass;\n}\n\n/**\n * `el.animate()` with the library's motion rules (5.0, shared by elements and\n * registered effects): motion sensitivity (keyframes adapted, `static` →\n * final frame), intensity (duration scale) and the animation budget. Returns\n * `null` (final frame applied) when nothing should animate.\n */\nexport function animateWithMotion(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null {\n if (typeof (el as HTMLElement).animate !== 'function' || config.motionSensitivity === 'static') {\n applyFrame(el as HTMLElement, keyframes[keyframes.length - 1]);\n return null;\n }\n keyframes = adaptKeyframes(keyframes);\n if (active >= maxActive) {\n applyFrame(el as HTMLElement, keyframes[keyframes.length - 1]);\n return null;\n }\n const k = motionScale();\n if (k !== 1 && k > 0 && typeof options.duration === 'number') options = { ...options, duration: options.duration * k, delay: (options.delay || 0) * k };\n const a = (el as HTMLElement).animate(keyframes, options);\n if (options.iterations !== Infinity) {\n active++;\n let done = false;\n const end = () => {\n if (!done) {\n done = true;\n active--;\n }\n };\n a?.finished?.then(end, end);\n }\n return a;\n}\n\n/** Write a keyframe's properties as inline styles (no-WAAPI fallback). */\nexport function applyFrame(el: HTMLElement, frame?: Keyframe): void {\n if (!frame) return;\n for (const [k, v] of Object.entries(frame)) {\n if (k === 'offset' || k === 'easing' || k === 'composite' || v == null) continue;\n (el.style as any)[k] = String(v);\n }\n}\n\n/**\n * Register `tag` with the class built by `make(Base)`. Returns the\n * constructor, the already registered one, or `undefined` without DOM.\n */\nexport function defineElement(\n tag: string,\n make: (Base: BaseCtor) => CustomElementConstructor,\n css?: { id: string; text: string }\n): CustomElementConstructor | undefined {\n if (!canDefine()) return undefined;\n adoptStyles('base', BASE_CSS);\n if (css) adoptStyles(css.id, css.text);\n const existing = customElements.get(tag);\n if (existing) return existing;\n const ctor = make(getBase());\n customElements.define(tag, ctor);\n return ctor;\n}\n\nconst BASE_CSS = '.usa-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}';\n\n/** A visually hidden copy of `text` for screen readers (the animated copy is `aria-hidden`). */\nexport function srText(text: string): HTMLSpanElement {\n const s = document.createElement('span');\n s.className = 'usa-sr';\n s.textContent = text;\n return s;\n}\n\n// --- shared rAF scheduler (4.5) ----------------------------------------------\n// Every component loop goes through one requestAnimationFrame per frame\n// instead of one per element: callbacks are batched, run in order, and a\n// throwing callback no longer starves the others (the first error is rethrown).\nconst frameQueue = new Map<number, FrameRequestCallback>();\nlet frameSeq = 1;\nlet frameHandle: number | ReturnType<typeof setTimeout> | 0 = 0;\nlet frameVia: unknown = null;\nconst frameStats = { frames: 0, callbacks: 0, peak: 0, last: 0 };\nconst frameListeners = new Set<(t: number, dt: number) => void>();\n\nfunction flushFrame(t: number): void {\n frameHandle = 0;\n const dt = frameStats.last && t > frameStats.last ? t - frameStats.last : 16.7;\n frameStats.last = t;\n frameStats.frames++;\n const cbs = Array.from(frameQueue.values());\n frameQueue.clear();\n frameStats.callbacks += cbs.length;\n frameStats.peak = Math.max(frameStats.peak, cbs.length);\n let error: unknown = null;\n for (const cb of cbs) {\n try {\n cb(t);\n } catch (e) {\n error ??= e;\n }\n }\n frameListeners.forEach((fn) => fn(t, dt));\n if (frameListeners.size) requestFlush();\n if (error) throw error;\n}\n\nfunction requestFlush(): void {\n const native = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : null;\n // A stale handle from a replaced requestAnimationFrame (tests, iframes) is dropped.\n if (frameHandle && frameVia === native) return;\n frameVia = native;\n frameHandle = native ? native(flushFrame) : setTimeout(() => flushFrame(now()), 16);\n}\n\n/** requestAnimationFrame through the shared scheduler (timeout fallback in jsdom / hidden documents). */\nexport const raf = (cb: FrameRequestCallback): number => {\n const id = frameSeq++;\n frameQueue.set(id, cb);\n requestFlush();\n return id;\n};\n/** Monotonic time in ms (rAF callback timestamps differ between environments, so loops use this). */\nexport const now = (): number => (typeof performance !== 'undefined' ? performance.now() : Date.now());\nexport const caf = (id: number): void => {\n frameQueue.delete(id);\n};\n\n/** Run `fn(time, dt)` every frame on the shared scheduler until the returned function is called. */\nexport function onFrame(fn: (t: number, dt: number) => void): () => void {\n frameListeners.add(fn);\n requestFlush();\n return () => frameListeners.delete(fn);\n}\n\n/** Scheduler counters: frames flushed, callbacks run, peak callbacks in one frame, pending now. */\nexport function schedulerStats(): { frames: number; callbacks: number; peak: number; pending: number; loops: number } {\n return { frames: frameStats.frames, callbacks: frameStats.callbacks, peak: frameStats.peak, pending: frameQueue.size, loops: frameListeners.size };\n}\n\n// --- active animation budget (4.5) ---------------------------------------------\nlet active = 0;\nlet maxActive = Infinity;\n/** Number of component animations running right now. */\nexport const activeAnimations = (): number => active;\n/** Cap concurrent component animations; extra ones jump to their final frame (`Infinity` = no cap). */\nexport function setAnimationBudget(max: number): void {\n maxActive = max > 0 ? max : Infinity;\n}\n/** The current cap. */\nexport const animationBudget = (): number => maxActive;\n\n// --- on-demand styles (4.5) -----------------------------------------------------\nlet styleLoader: ((tag: string) => void) | null = null;\n/** Called with each element's tag the first time one connects (used by the `lite` build to load CSS on demand). */\nexport function setStyleLoader(fn: ((tag: string) => void) | null): void {\n styleLoader = fn;\n}\n\nexport const EASE_OUT = 'cubic-bezier(0.22, 1, 0.36, 1)';\nexport const EASE_SPRING = 'cubic-bezier(0.34, 1.56, 0.64, 1)';\n/** Windows Fluent \"decelerate\" / \"point-to-point\" curves. */\nexport const FLUENT_DECELERATE = 'cubic-bezier(0.1, 0.9, 0.2, 1)';\n\nconst warned = new Set<string>();\n/** Log a deprecation once per key (console.warn). */\nexport function deprecate(key: string, message: string): void {\n if (warned.has(key)) return;\n warned.add(key);\n if (typeof console !== 'undefined') console.warn(`[motionary] ${message}`);\n}\n\n/**\n * The `kind` attribute of `<usa-spinner>`, `<usa-check>`, `<usa-dialog>` and\n * `<usa-acrylic>` (3.0: `variant` only selects a style variant).\n */\nexport function kindOf(el: Element, valid: readonly string[] | Record<string, unknown>, fallback: string): string {\n const k = el.getAttribute('kind');\n return k && (Array.isArray(valid) ? valid.includes(k) : k in (valid as object)) ? k : fallback;\n}\n\nexport const clamp = (v: number, min: number, max: number): number => Math.min(max, Math.max(min, v));\n"],"names":[],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  /**
2
- * use-scroll-animate/components — shared base for the `<usa-*>` custom elements.
2
+ * motionary/components — shared base for the `<usa-*>` custom elements.
3
3
  *
4
4
  * Everything here is lazy: nothing touches `window`, `document`,
5
5
  * `HTMLElement` or `matchMedia` at import time, so the components can be
@@ -388,7 +388,7 @@ function deprecate(key, message) {
388
388
  return;
389
389
  warned.add(key);
390
390
  if (typeof console !== 'undefined')
391
- console.warn(`[use-scroll-animate] ${message}`);
391
+ console.warn(`[motionary] ${message}`);
392
392
  }
393
393
  /**
394
394
  * The `kind` attribute of `<usa-spinner>`, `<usa-check>`, `<usa-dialog>` and
@@ -401,4 +401,4 @@ function kindOf(el, valid, fallback) {
401
401
  const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
402
402
 
403
403
  export { shadowStyles as A, srText as B, EASE_SPRING as E, FLUENT_DECELERATE as F, MOTION_SCALE as M, MOTION_SENSITIVITY_LEVELS as a, activeAnimations as b, canDefine as c, adaptKeyframes as d, animateWithMotion as e, animationBudget as f, configureComponents as g, getMotionIntensity as h, getMotionSensitivity as i, setAnimationBudget as j, clamp as k, applyFrame as l, motionScale as m, now as n, onFrame as o, prefersReducedMotion as p, caf as q, raf as r, schedulerStats as s, setStyleLoader as t, adoptStyles as u, deprecate as v, withoutDeprecations as w, defineElement as x, EASE_OUT as y, kindOf as z };
404
- //# sourceMappingURL=base-C3Sw9sAO.js.map
404
+ //# sourceMappingURL=base-Yno7N2eC.js.map