use-scroll-animate 6.4.0 → 6.5.0

package/docs/ROADMAP.md

@@ -6,7 +6,7 @@
 - ✅ **v6.2** — 粒子与流体 2.0 + 组件：GPU 流体、烟雾、火焰、墨滴扩散、萤火虫、樱花与落叶、点击水花（WebGL2，自动降级 Canvas 2D）；新组件 轮播 / 滑块、动画指示器标签页、手风琴 2.0、快拍浏览器（独立入口 `motionary/components/widgets`）。
 - ✅ **v6.3** — 文字特效 3.0 + 组件：液态文字、霓虹书写、文字粒子聚散、故障字、光标拖影、可变字体呼吸、逐字 3D 翻转；新组件 通知 / Toast 堆叠、模态对话框、抽屉 / 底部面板。
 - ✅ **v6.4** — 光影与材质 + 组件：动态光源、玻璃折射、金属拉丝、珠光 / 镭射、体积光、指针实时阴影；新组件 进度条 / 进度环、计数器 / 里程表、骨架屏闪光、评分星。
-- **v6.5** — 3D 场景卡片 + 组件：景深层叠卡、可旋转商品展示、立方体画廊、折纸展开、轨道相机叙事；新组件 时间轴、瀑布流（布局动画）、图片对比滑块。
+- ✅ **v6.5** — 3D 场景卡片 + 组件：景深层叠卡、可旋转商品展示、立方体画廊、折纸展开、轨道相机叙事；新组件 时间轴、瀑布流（布局动画）、图片对比滑块。
 - **v6.6** — 形变与 SVG 2.0 + 组件：路径补间、液态 blob 按钮、描边绘制、SVG 滤镜转场、图标变形；新组件 Dock 栏（macOS 放大）、形变下划线导航、汉堡 → 关闭图标、提示 / 气泡。
 - **v6.7** — 转场大全 + 组件：涟漪溶解、碎片爆裂、马赛克翻牌、液体擦除、卷页、镜头推拉（View Transitions 优先，MPA 可用）；新组件 步骤条 / 向导、分页、分段控件、开关变体。
 - **v6.8** — 天气与氛围 + 交互物理 2.0 + 组件：玻璃雨滴、积雪、安全闪电、雾、极光、昼夜光照；软体、布料、绳索、磁吸、弹球、重力翻转（Verlet）；新组件 看板 / 拖拽排序、滑动卡片、下拉刷新。

package/docs/components.md

@@ -588,6 +588,32 @@ document.querySelector('usa-skeleton-reveal').loading = false; // dissolve → c
 - `<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.
 
+### v6.5 Widgets: milestones, masonry flow, compare, cube gallery (`components/widgets`) + 3D scene cards (`components/fx-3d`)
+
+```html
+<usa-milestones>
+  <div data-date="2024"><h3>Idea</h3></div><div data-date="2026"><h3>Launch</h3></div>
+</usa-milestones>
+<usa-masonry-flow min="160" gap="12"><img src="1.jpg" alt="…"><img src="2.jpg" alt="…"></usa-masonry-flow>
+<usa-compare labels="Before,After" intro><img src="before.jpg" alt="Before"><img src="after.jpg" alt="After"></usa-compare>
+<usa-cube-gallery autoplay="4000"><img src="a.jpg" alt="…"><img src="b.jpg" alt="…"></usa-cube-gallery>
+
+<usa-fx effect="depth-stack" trigger="load"><div class="card"><img data-depth="1" src="bg.png" alt=""><h3 data-depth="3">Title</h3></div></usa-fx>
+<usa-fx effect="card-flip-3d"><div class="card"><div>Front</div><div>Back</div></div></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { defineFx } from 'motionary/components/fx';
+import { register3dEffects } from 'motionary/components/fx-3d';
+defineWidgets(); defineFx(); register3dEffects();
+document.querySelector('usa-masonry-flow').filter('.cats'); // items glide (FLIP)
+```
+- `<usa-milestones layout="alternate | left">`: scroll-drawn rail, dots pop and cards slide in when reached; `usa:reach`.
+- `<usa-masonry-flow min gap>`: masonry with FLIP layout animation; `layout()`, `filter()`, `shuffle()`, `sort()`; `usa:layout`.
+- `<usa-compare orientation labels intro hover>`: before / after slider (`role="slider"`, keyboard), click-to-jump easing; `usa:change`.
+- `<usa-cube-gallery axis="y | x" autoplay>`: slides on a turning 3D cube, swipe / keys / buttons; `next()`, `prev()`, `goTo()`; `usa:change`.
+- 3D scene cards: `depth-stack` · `product-spin` (card) · `card-flip-3d` (click) · `origami` (enter) · `orbit-camera` (scroll). Reduced motion: no tilt / spin / orbit / fold, flips crossfade, milestones fully shown, cube fades.
+
 ## 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.4.0",
+  "version": "6.5.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",
@@ -448,6 +448,16 @@
         "default": "./dist/components/fx-light.cjs"
       }
     },
+    "./components/fx-3d": {
+      "import": {
+        "types": "./dist/components/fx-3d.d.ts",
+        "default": "./dist/components/fx-3d.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-3d.d.cts",
+        "default": "./dist/components/fx-3d.cjs"
+      }
+    },
     "./components/lite": {
       "import": {
         "types": "./dist/components/lite.d.ts",