use-scroll-animate 5.9.0 → 6.0.1

package/CHANGELOG.md

@@ -7,6 +7,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [6.0.1] - 2026-10-08
+
+### Fixed
+- **Showcase — components gallery overflowed phones horizontally (~48 px at 390 px wide).** The header's six nav items (Store · Playground · Story · language · theme · GitHub) could not shrink, so the whole page scrolled sideways and the scroll-progress bar ran past the edge. On screens ≤ 480 px the bar now shrinks and tightens to one row (the sticky filter bar keeps its offset): the duplicate “Animation Store” link is hidden (the logo already links to the store) along with the “Components” badge, and below 375 px the GitHub icon moves to the footer link only. Checked in headless Chromium at 320 / 360 / 390 / 414 / 480 px in English and Chinese: `scrollWidth` equals the viewport width and every remaining header control is on screen.
+- Crawl of all showcase pages (`/showcase/`, `components.html`, `playground.html`, `story.html`, desktop 1280 px + mobile 390 px): no other console errors, failed requests or overflow found.
+
+### Tests
+- New `test/fixes-6-0-1.test.ts` regression suite.
+
+## [6.0.0] - 2026-10-08
+
+### ⚠ BREAKING CHANGES
+- **Removed `burst()`, `confetti()`, `shake()`** from `use-scroll-animate/components`, `/components/click` and the UMD global (deprecated in 5.9). Play the registered effects instead: `playEffect(document.body, 'burst', { x, y, …options })`, `playEffect(el, 'confetti', options)`, `playEffect(el, 'shake', { intensity, duration })` (`use-scroll-animate/components/fx`). `haptic()` stays.
+- **Removed `<usa-cursor mode="trail">`** (deprecated in 5.9): `CURSOR_MODES` is now `dot` · `magnetic` · `glow`, and an unknown mode renders as `dot`. Use the 5.7 `comet-trail` effect: `<usa-fx effect="comet-trail" trigger="load" self>…</usa-fx>`.
+- Every effect now goes through the 5.0 registry (`registerEffect()` / `playEffect()` / `bindEffect()` / `<usa-fx>`); the 5.1–5.9 packs live in `use-scroll-animate/components/effects`.
+
+### Migration
+- `npx usa-codemod-6 --write src` rewrites the helper calls and imports (aliases and the `UsaComponents` global included) and lists `<usa-cursor mode="trail">` for a manual edit. Guide: `docs/upgrading-6.md`.
+- CDN URLs move to the `@6` range: `https://unpkg.com/use-scroll-animate@6/dist/components.umd.js`.
+
+### Docs
+- README (EN / 中文 / 日本語): new **Effect packs** (`/components/effects`) row.
+- `docs/ROADMAP.md`: post-6.0 roadmap (v6.1 → v7.0).
+
 ## [5.9.0] - 2026-10-08
 
 ### Added

package/README.md

@@ -39,7 +39,7 @@ defineComponents(); // or per category: import { defineTextComponents } from 'us
 
 ```html
 <!-- or with no build step -->
-<script src="https://unpkg.com/use-scroll-animate@5/dist/components.umd.js"></script>
+<script src="https://unpkg.com/use-scroll-animate@6/dist/components.umd.js"></script>
 <usa-typewriter words="Hello, Windows.|Hello, web."></usa-typewriter>
 <usa-spinner kind="fluent"></usa-spinner>
 ```
@@ -54,7 +54,7 @@ defineComponents(); // or per category: import { defineTextComponents } from 'us
 | **Transitions** (`/components/transitions`) | `<usa-dialog>` (modal / drawer / sheet) · `<usa-accordion>` · `<usa-view-switch>` · `viewTransition()` · `flip()` |
 | **Spring & physics** (`/components/physics`) | `<usa-spring>` (bounce-in · pop · drop · jelly · rubber-band) · `<usa-draggable>` (spring-back · inertia · snap) · `<usa-overscroll>` · `spring()` · `createSpring()` · `SPRING_PRESETS` |
 | **Card effects** (`/components/cards`) | `<usa-card>` (flip · holo · glass · border-glow · conic-border · lift · spotlight · sheen · parallax-layers · expand — combinable) · `<usa-card-stack>` (swipe) · `<usa-sticky-stack>` · `<usa-carousel-3d>` |
-| **Click & tap** (`/components/click`) | `<usa-button>` **button click deformation** (squash · wobble · gooey · dent · shape morph · submit→loading→success) · `<usa-icon-morph>` · `<usa-click>` (ripple · burst · confetti · squish · press-spring · shake) · `<usa-like>` · `<usa-hold>` · `<usa-double-tap>` · `<usa-checkbox>` · `confetti()` · `haptic()` |
+| **Click & tap** (`/components/click`) | `<usa-button>` **button click deformation** (squash · wobble · gooey · dent · shape morph · submit→loading→success) · `<usa-icon-morph>` · `<usa-click>` (ripple · burst · confetti · squish · press-spring · shake) · `<usa-like>` · `<usa-hold>` · `<usa-double-tap>` · `<usa-checkbox>` · `haptic()` (click effects from code: `playEffect(el, 'confetti')`) |
 | **UI components & variants** (`/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="minimal \| neon \| glass \| brutalist \| fluent \| material"` on every component |
 | **Page & app-wide** (`/components/page`) | `pageTransition()` (fade · slide · circle · blinds · pixel · zoom; SPA + MPA) · `themeTransition()` · `<usa-cursor>` · `smoothScroll()` · `<usa-fullpage>` · `<usa-loading-bar>` · `<usa-back-to-top>` · `<usa-ambient>` (particles · snow · stars · noise · gradient) · `<usa-splash>` · `<usa-auto-skeleton>` · `<usa-motion-switch>` / `setMotionIntensity()` |
 | **Timeline & choreography** (`/components/timeline`) | `timeline()` (chain · overlap · labels · seek · reverse · scrub) · `<usa-timeline>` (`data-tl` steps) |
@@ -65,6 +65,7 @@ defineComponents(); // or per category: import { defineTextComponents } from 'us
 | **Layout animation** (`/components/layout`) | `<usa-auto-animate>` / `autoAnimate()` (list & grid reflow) · `<usa-masonry>` · `sharedTransition()` (shared elements) |
 | **Effect packs** (`/components/packs`) | `<usa-pack>` (`name="ecommerce \| portfolio \| dashboard \| game \| landing"`) · `applyPack()` · `flyToCart()` · `countUp()` |
 | **Effects — plugin API** (`/components/fx`) | `<usa-fx>` (`effect` · `trigger` click / hover / enter / load / loop) · `registerEffect()` · `playEffect()` · `bindEffect()` · built-ins: every timeline entrance, pulse · pop · jelly · wiggle · heartbeat · bounce · flash · tada · shake, burst · confetti · ripple |
+| **Effect packs** (`/components/effects`) | `registerAllEffects()` · card & click 2.0 · physics · page-wide · `<usa-story>` scroll stories · generative backgrounds · sound-reactive (`<usa-audio>`) · cursor trails & gestures (`<usa-gesture-fx>`) · theme packs (`<usa-theme>`) · 23 micro-interactions · `<usa-player>` JSON animations |
 
 Whole bundle ≈ 22 kB gzip (JS + CSS); one category 3.5–6.4 kB; a single component ≈ 2 kB. The scroll-animation core below is unaffected.
 

package/README_ja.md

@@ -53,6 +53,7 @@ defineComponents(); // カテゴリ単位: import { defineTextComponents } from
 | **レイアウト** (`/components/layout`) | `<usa-auto-animate>` / `autoAnimate()` · `<usa-masonry>` · `sharedTransition()`（共有要素） |
 | **エフェクトパック** (`/components/packs`) | `<usa-pack>` (`name="ecommerce \| portfolio \| dashboard \| game \| landing"`) · `applyPack()` · `flyToCart()` |
 | **エフェクト API** (`/components/fx`) | `<usa-fx>` · `registerEffect()` · `playEffect()` · `bindEffect()` · 内蔵: タイムライン入場、pulse · pop · jelly · wiggle · bounce · tada · shake、burst · confetti · ripple |
+| **エフェクトパック** (`/components/effects`) | `registerAllEffects()` · カード & クリック 2.0 · 物理 · ページ全体 · `<usa-story>` スクロールストーリー · ジェネレーティブ背景 · サウンド連動（`<usa-audio>`）· カーソル & ジェスチャー（`<usa-gesture-fx>`）· テーマパック（`<usa-theme>`）· マイクロインタラクション 23 種 · `<usa-player>` JSON アニメーション |
 
 ## ドキュメント
 

package/README_zh.md

@@ -36,7 +36,7 @@ defineComponents(); // 或按分类：import { defineTextComponents } from 'use-
 
 ```html
 <!-- 或免构建直接使用 -->
-<script src="https://unpkg.com/use-scroll-animate@5/dist/components.umd.js"></script>
+<script src="https://unpkg.com/use-scroll-animate@6/dist/components.umd.js"></script>
 <usa-typewriter words="你好，Windows。|你好，Web。"></usa-typewriter>
 <usa-spinner kind="fluent"></usa-spinner>
 ```
@@ -62,6 +62,7 @@ defineComponents(); // 或按分类：import { defineTextComponents } from 'use-
 | **布局动画** (`/components/layout`) | `<usa-auto-animate>` / `autoAnimate()`（列表与网格重排）· `<usa-masonry>`（瀑布流）· `sharedTransition()`（共享元素） |
 | **效果包** (`/components/packs`) | `<usa-pack>` (`name="ecommerce \| portfolio \| dashboard \| game \| landing"`) · `applyPack()` · `flyToCart()` · `countUp()` |
 | **特效插件 API** (`/components/fx`) | `<usa-fx>`（`effect` · `trigger`）· `registerEffect()` · `playEffect()` · `bindEffect()` · 内置：全部时间线入场、pulse · pop · jelly · wiggle · heartbeat · bounce · flash · tada · shake、burst · confetti · ripple |
+| **特效包** (`/components/effects`) | `registerAllEffects()` · 卡片与点击 2.0 · 物理 · 全页特效 · `<usa-story>` 滚动叙事 · 生成式背景 · 声音响应（`<usa-audio>`）· 光标拖尾与手势（`<usa-gesture-fx>`）· 主题包（`<usa-theme>`）· 23 个微交互 · `<usa-player>` JSON 动画 |
 
 完整包约 22 kB gzip（JS + CSS）；单个分类 3.5–6.4 kB；单个组件约 2 kB。下方的滚动动画核心不受影响。
 

package/dist/components/angular.d.cts

@@ -1033,8 +1033,8 @@ interface UsaCheckboxElement extends UsaElement {
  * `<usa-button>` (button click deformation: squash, wobble, gooey, dent;
  * shape morph; submit → loading → success), `<usa-icon-morph>`,
  * `<usa-like>`, `<usa-hold>`, `<usa-double-tap>`, `<usa-checkbox>`, plus
- * `haptic()` (`burst()`, `confetti()`, `shake()` are deprecated in 5.9 —
- * use the registered effects through `playEffect()`).
+ * `haptic()`. 6.0: `burst()`, `confetti()` and `shake()` were removed — play
+ * the registered effects instead: `playEffect(el, 'burst' | 'confetti' | 'shake')`.
  */
 
 declare global {
@@ -1226,10 +1226,11 @@ declare global {
 }
 
 /**
- * `<usa-cursor mode="dot | trail | magnetic | glow">` — a custom cursor for
+ * `<usa-cursor mode="dot | magnetic | glow">` — a custom cursor for
  * the page (place it once, e.g. at the end of `<body>`).
  * - `dot` — a ring that follows with spring lag around the real pointer;
- * - `trail` — a comet tail of dots;
+ * (6.0: `mode="trail"` was removed — use the registered `comet-trail` effect;
+ * unknown modes render as `dot`.)
  * - `magnetic` — the ring snaps onto and wraps hovered targets (`a`,
  *   `button`, `[data-cursor]`);
  * - `glow` — a large soft light following the pointer (great on dark UIs).

package/dist/components/angular.d.ts

@@ -1033,8 +1033,8 @@ interface UsaCheckboxElement extends UsaElement {
  * `<usa-button>` (button click deformation: squash, wobble, gooey, dent;
  * shape morph; submit → loading → success), `<usa-icon-morph>`,
  * `<usa-like>`, `<usa-hold>`, `<usa-double-tap>`, `<usa-checkbox>`, plus
- * `haptic()` (`burst()`, `confetti()`, `shake()` are deprecated in 5.9 —
- * use the registered effects through `playEffect()`).
+ * `haptic()`. 6.0: `burst()`, `confetti()` and `shake()` were removed — play
+ * the registered effects instead: `playEffect(el, 'burst' | 'confetti' | 'shake')`.
  */
 
 declare global {
@@ -1226,10 +1226,11 @@ declare global {
 }
 
 /**
- * `<usa-cursor mode="dot | trail | magnetic | glow">` — a custom cursor for
+ * `<usa-cursor mode="dot | magnetic | glow">` — a custom cursor for
  * the page (place it once, e.g. at the end of `<body>`).
  * - `dot` — a ring that follows with spring lag around the real pointer;
- * - `trail` — a comet tail of dots;
+ * (6.0: `mode="trail"` was removed — use the registered `comet-trail` effect;
+ * unknown modes render as `dot`.)
  * - `magnetic` — the ring snaps onto and wraps hovered targets (`a`,
  *   `button`, `[data-cursor]`);
  * - `glow` — a large soft light following the pointer (great on dark UIs).

package/dist/components/click.cjs

@@ -847,27 +847,9 @@ function defineCheckbox(tag = 'usa-checkbox') {
  * `<usa-button>` (button click deformation: squash, wobble, gooey, dent;
  * shape morph; submit → loading → success), `<usa-icon-morph>`,
  * `<usa-like>`, `<usa-hold>`, `<usa-double-tap>`, `<usa-checkbox>`, plus
- * `haptic()` (`burst()`, `confetti()`, `shake()` are deprecated in 5.9 —
- * use the registered effects through `playEffect()`).
+ * `haptic()`. 6.0: `burst()`, `confetti()` and `shake()` were removed — play
+ * the registered effects instead: `playEffect(el, 'burst' | 'confetti' | 'shake')`.
  */
-/**
- * @deprecated 5.9 — removed in 6.0. Use the registered effect:
- * `playEffect(document.body, 'burst', { x, y, ...options })` (`use-scroll-animate/components/fx`).
- */
-function burst(x, y, options = {}) {
-    base.deprecate('burst()', "burst() is deprecated and removed in 6.0 — use playEffect(el, 'burst', { x, y, …options }) from use-scroll-animate/components/fx (npx usa-codemod-6).");
-    return fx.burst(x, y, options);
-}
-/** @deprecated 5.9 — removed in 6.0. Use `playEffect(document.body, 'confetti', options)`. */
-function confetti(options = {}) {
-    base.deprecate('confetti()', "confetti() is deprecated and removed in 6.0 — use playEffect(el, 'confetti', options) from use-scroll-animate/components/fx (npx usa-codemod-6).");
-    return fx.confetti(options);
-}
-/** @deprecated 5.9 — removed in 6.0. Use `playEffect(el, 'shake', { intensity, duration })`. */
-function shake(el, intensity = 8, duration = 480) {
-    base.deprecate('shake()', "shake() is deprecated and removed in 6.0 — use playEffect(el, 'shake', { intensity, duration }) from use-scroll-animate/components/fx (npx usa-codemod-6).");
-    return fx.shake(el, intensity, duration);
-}
 /** Register every component of this category under its default tag. */
 function defineClickComponents() {
     defineClick();
@@ -883,8 +865,6 @@ exports.haptic = fx.haptic;
 exports.BUTTON_DEFORMS = BUTTON_DEFORMS;
 exports.CLICK_EFFECTS = CLICK_EFFECTS;
 exports.MORPH_ICONS = MORPH_ICONS;
-exports.burst = burst;
-exports.confetti = confetti;
 exports.defineButton = defineButton;
 exports.defineCheckbox = defineCheckbox;
 exports.defineClick = defineClick;
@@ -894,5 +874,4 @@ exports.defineHold = defineHold;
 exports.defineIconMorph = defineIconMorph;
 exports.defineLike = defineLike;
 exports.morphPath = morphPath;
-exports.shake = shake;
 //# sourceMappingURL=click.cjs.map