滾動變形斑點
隨滾動進度在多個有機形狀間變形的漸層斑點。
以 useScroll 追蹤滾動進度，透過 useTransform 在多組結構一致的 SVG 路徑之間插值，斑點會如液體般在有機形狀間變形，同時交叉淡化多層漸層完成轉色，適合作為長頁面或滾動敘事的裝飾背景。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
280
60
<ScrollMorphBlob />
安裝
npx shadcn@latest add https://webberui.com/r/scroll-morph-blob.json或在 components.json 設定 registries 後，改用 @webberui/scroll-morph-blob 安裝。
安裝依賴後，從 registry JSON（/r/scroll-morph-blob.json 的 files[0].content）複製 scroll-morph-blob.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import * as React from "react";
import { ScrollMorphBlob } from "@/components/ui/scroll-morph-blob";
function ScrollStory() {
const containerRef = React.useRef<HTMLDivElement>(null);
return (
<div ref={containerRef} className="relative h-[400px] overflow-y-auto">
<div className="pointer-events-none sticky top-0 flex h-[400px] items-center justify-center">
<ScrollMorphBlob containerRef={containerRef} size={240} />
</div>
<div className="relative -mt-[400px]">{/* 滾動內容分段… */}</div>
</div>
);
}未提供 containerRef 時，斑點會改為追蹤整頁（viewport）的滾動進度。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
containerRef | React.RefObject<HTMLElement | null> | — | 滾動容器的 ref；未提供時追蹤整頁滾動進度 |
paths | string[] | 內建 4 組 | blob 路徑序列（至少 2 組，SVG 指令結構必須一致才能插值） |
colors | Array<[string, string]> | 內建 4 組 | 每個形狀階段的漸層雙色，數量不足時循環使用 |
size | number | 280 | 斑點邊長（px），SVG 以 200×200 viewBox 等比縮放 |
rotate | number | 60 | 捲動全程的累積旋轉角度（度），設 0 停用旋轉 |
glow | boolean | true | 是否在斑點後方疊加高斯模糊光暈 |
className | string | — | 透傳到外層容器 |
可及性
- 斑點為純裝飾元素，外層容器標記
aria-hidden，輔助科技會完全略過 - 使用者系統開啟「減少動態效果」時，改為渲染第一組形狀與漸層的靜態斑點，不做變形、旋轉或縮放
- 動畫完全由滾動進度驅動，沒有自動播放的動態，畫面變化與使用者輸入同步
pointer-events-none確保斑點不會攔截點擊或滾動操作