use-scroll-animate 6.4.0 → 6.6.0

package/docs/ROADMAP.md

@@ -6,8 +6,8 @@
 - ✅ **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.6** — 形变与 SVG 2.0 + 组件：路径补间、液态 blob 按钮、描边绘制、SVG 滤镜转场、图标变形；新组件 Dock 栏（macOS 放大）、形变下划线导航、汉堡 → 关闭图标、提示 / 气泡。
+- ✅ **v6.5** — 3D 场景卡片 + 组件：景深层叠卡、可旋转商品展示、立方体画廊、折纸展开、轨道相机叙事；新组件 时间轴、瀑布流（布局动画）、图片对比滑块。
+- ✅ **v6.6** — 形变与 SVG 2.0 + 组件：路径补间、液态 blob 按钮、描边绘制、SVG 滤镜转场、图标变形；新组件 Dock 栏（macOS 放大）、形变下划线导航、汉堡 → 关闭图标、提示 / 气泡。
 - **v6.7** — 转场大全 + 组件：涟漪溶解、碎片爆裂、马赛克翻牌、液体擦除、卷页、镜头推拉（View Transitions 优先，MPA 可用）；新组件 步骤条 / 向导、分页、分段控件、开关变体。
 - **v6.8** — 天气与氛围 + 交互物理 2.0 + 组件：玻璃雨滴、积雪、安全闪电、雾、极光、昼夜光照；软体、布料、绳索、磁吸、弹球、重力翻转（Verlet）；新组件 看板 / 拖拽排序、滑动卡片、下拉刷新。
 - **v6.9** — 7.0 预备 + 组件：动画编辑器 2.0、效果市场清单格式、7.0 弃用警告、`upgrading-7.md` 与 `usa-codemod-7`；新组件 日期选择器、取色器、文件拖放区动画。

package/docs/components.md

@@ -588,6 +588,57 @@ 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.
+
+### v6.6 Widgets: dock, nav morph, menu toggle, tip (`components/widgets`) + morph & SVG 2.0 (`components/fx-morph`)
+
+```html
+<usa-dock magnify="1.9" bounce label="Apps">
+  <button data-label="Music" aria-label="Music">🎵</button><a href="/mail" data-label="Mail" aria-label="Mail">✉️</a>
+</usa-dock>
+<usa-nav-morph indicator="underline"><a href="/" aria-current="page">Home</a><a href="/docs">Docs</a></usa-nav-morph>
+<usa-menu-toggle for="site-menu" variant="cross"></usa-menu-toggle><nav id="site-menu" hidden>…</nav>
+<usa-tip text="Copied!" placement="top"><button>Copy</button></usa-tip>
+
+<usa-fx effect="path-morph" trigger="loop" options='{"paths":["M…","M…"]}'><svg viewBox="0 0 100 100"><path d="M…"/></svg></usa-fx>
+<usa-fx effect="blob-button" trigger="load"><button>Get started</button></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { defineFx } from 'motionary/components/fx';
+import { registerMorphEffects2 } from 'motionary/components/fx-morph';
+defineWidgets(); defineFx(); registerMorphEffects2();
+```
+- `<usa-dock magnify range bounce orientation>`: cosine magnification, labels from `data-label`, click bounce; `role="toolbar"`.
+- `<usa-nav-morph indicator="underline | pill | blob | dot">`: indicator stretches to the hovered / focused link and back to `aria-current="page"`; arrow keys; `usa:change`.
+- `<usa-menu-toggle variant="cross | arrow | minus | plus-x" for>`: hamburger morph toggle with `aria-expanded`, controls `hidden` / `show()` / `close()` of its target; `usa:toggle`.
+- `<usa-tip text placement trigger="hover | click" delay>`: spring-out tooltip / popover with arrow, viewport flip + shift, Esc, rich `[slot="tip"]` content.
+- Morph & SVG 2.0: `path-morph` (loop) · `blob-button` (hover) · `stroke-draw` · `noise-reveal` (enter) · `icon-swap` (click); helpers `samplePath()`, `pointsToPath()`. Reduced motion: no magnification / stretch / morph loops; reveals and swaps fade.
+
 ## 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.6.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,26 @@
         "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/fx-morph": {
+      "import": {
+        "types": "./dist/components/fx-morph.d.ts",
+        "default": "./dist/components/fx-morph.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-morph.d.cts",
+        "default": "./dist/components/fx-morph.cjs"
+      }
+    },
     "./components/lite": {
       "import": {
         "types": "./dist/components/lite.d.ts",