use-scroll-animate 8.2.0 → 8.3.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.
- package/CHANGELOG.md +12 -0
- package/dist/components/fx-organic.cjs +115 -0
- package/dist/components/fx-organic.cjs.map +1 -0
- package/dist/components/fx-organic.d.cts +66 -0
- package/dist/components/fx-organic.d.ts +66 -0
- package/dist/components/fx-organic.js +111 -0
- package/dist/components/fx-organic.js.map +1 -0
- package/dist/components/fx2.cjs +6 -0
- package/dist/components/fx2.cjs.map +1 -1
- package/dist/components/fx2.d.cts +23 -1
- package/dist/components/fx2.d.ts +23 -1
- package/dist/components/fx2.js +5 -1
- package/dist/components/fx2.js.map +1 -1
- package/dist/components/widgets.cjs +269 -139
- package/dist/components/widgets.cjs.map +1 -1
- package/dist/components/widgets.d.cts +30 -2
- package/dist/components/widgets.d.ts +30 -2
- package/dist/components/widgets.js +268 -140
- package/dist/components/widgets.js.map +1 -1
- package/dist/widgets.umd.js +1 -1
- package/dist/widgets.umd.js.map +1 -1
- package/docs/ROADMAP.md +1 -1
- package/docs/components.md +21 -0
- package/package.json +21 -1
package/docs/ROADMAP.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
- ✅ **v8.1** — 节日特效包:烟花、新春(灯笼、福字、鞭炮)、圣诞飘雪、万圣节;新组件 节日横幅、红包。
|
|
6
6
|
- ✅ **v8.2** — 复古风:像素化、CRT 显示器、VHS 噪点、Y2K;新组件 复古按钮、终端窗口。
|
|
7
|
-
- **v8.3** — 自然有机:水波涟漪、藤蔓生长、花朵绽放;新组件 有机卡片、液态导航。
|
|
7
|
+
- ✅ **v8.3** — 自然有机:水波涟漪、藤蔓生长、花朵绽放;新组件 有机卡片、液态导航。
|
|
8
8
|
- **v8.4** — 赛博 / 科幻:HUD 线框、扫描线、全息投影;新组件 HUD 面板、雷达扫描。
|
|
9
9
|
- **v8.5** — 纸张与手绘:折纸、铅笔素描、水彩晕染;新组件 便利贴墙、手绘图表。
|
|
10
10
|
- **v8.6** — 霓虹 / 玻璃 / 新拟态主题系统;新组件 主题切换器。
|
package/docs/components.md
CHANGED
|
@@ -1003,6 +1003,27 @@ term.addEventListener('usa:done', () => term.replay());
|
|
|
1003
1003
|
- `<usa-retro-button variant type disabled name value>`: `button`, `variant`; `RETRO_VARIANTS`.
|
|
1004
1004
|
- Retro: `pixelate-in` (`steps`) · `crt-power` · `vhs-glitch` (`intensity`) · `y2k-shine` (`color`); `pixelSteps(steps)`.
|
|
1005
1005
|
|
|
1006
|
+
### v8.3 Widgets: organic card, liquid nav (`components/widgets`) + organic pack (`motionary/fx/organic`)
|
|
1007
|
+
|
|
1008
|
+
```html
|
|
1009
|
+
<usa-organic-card tint="ocean"><h3>Deep sea</h3><p>…</p></usa-organic-card>
|
|
1010
|
+
<usa-liquid-nav label="Main">
|
|
1011
|
+
<a href="/" aria-current="page">Home</a><a href="/shop">Shop</a><a href="/about">About</a>
|
|
1012
|
+
</usa-liquid-nav>
|
|
1013
|
+
|
|
1014
|
+
<usa-fx effect="vine-grow" trigger="enter"><svg viewBox="0 0 200 80"><path d="M5 75 C60 10 120 90 195 10"/><circle data-leaf cx="70" cy="40" r="6"/></svg></usa-fx>
|
|
1015
|
+
<usa-fx effect="water-drop" trigger="click"><button>Drop</button></usa-fx>
|
|
1016
|
+
```
|
|
1017
|
+
```js
|
|
1018
|
+
import { defineWidgets } from 'motionary/components/widgets';
|
|
1019
|
+
import { registerOrganicPack } from 'motionary/fx/organic';
|
|
1020
|
+
defineWidgets(); registerOrganicPack();
|
|
1021
|
+
nav.addEventListener('usa:change', (e) => route(e.detail.index));
|
|
1022
|
+
```
|
|
1023
|
+
- `<usa-organic-card tint seed>`: `morph(seed?)`.
|
|
1024
|
+
- `<usa-liquid-nav label value>`: `value`; `usa:change` { index, item }.
|
|
1025
|
+
- Organic: `vine-grow` · `bloom` (`stagger`) · `water-drop` (`rings`, `color`) · `breathe`; `blobRadius(seed)`.
|
|
1026
|
+
|
|
1006
1027
|
## Frameworks
|
|
1007
1028
|
|
|
1008
1029
|
Custom elements work in every framework. Register once (e.g. in your entry file), then use the tags.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "use-scroll-animate",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.3.0",
|
|
4
4
|
"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.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -308,6 +308,16 @@
|
|
|
308
308
|
"default": "./dist/components/fx-retro.cjs"
|
|
309
309
|
}
|
|
310
310
|
},
|
|
311
|
+
"./fx/organic": {
|
|
312
|
+
"import": {
|
|
313
|
+
"types": "./dist/components/fx-organic.d.ts",
|
|
314
|
+
"default": "./dist/components/fx-organic.js"
|
|
315
|
+
},
|
|
316
|
+
"require": {
|
|
317
|
+
"types": "./dist/components/fx-organic.d.cts",
|
|
318
|
+
"default": "./dist/components/fx-organic.cjs"
|
|
319
|
+
}
|
|
320
|
+
},
|
|
311
321
|
"./components/reveal": {
|
|
312
322
|
"import": {
|
|
313
323
|
"types": "./dist/components/reveal.d.ts",
|
|
@@ -848,6 +858,16 @@
|
|
|
848
858
|
"default": "./dist/components/fx-retro.cjs"
|
|
849
859
|
}
|
|
850
860
|
},
|
|
861
|
+
"./components/fx-organic": {
|
|
862
|
+
"import": {
|
|
863
|
+
"types": "./dist/components/fx-organic.d.ts",
|
|
864
|
+
"default": "./dist/components/fx-organic.js"
|
|
865
|
+
},
|
|
866
|
+
"require": {
|
|
867
|
+
"types": "./dist/components/fx-organic.d.cts",
|
|
868
|
+
"default": "./dist/components/fx-organic.cjs"
|
|
869
|
+
}
|
|
870
|
+
},
|
|
851
871
|
"./components/lite": {
|
|
852
872
|
"import": {
|
|
853
873
|
"types": "./dist/components/lite.d.ts",
|