Container Scroll 3d
捲動時容器 3D 旋轉揭示內容，由後仰逐漸攤平，把畫面推到觀者眼前。
隨頁面捲動把容器從後仰視角攤平面向觀者，適合在 hero 或 feature 段落揭示產品畫面、儀表板或圖表。透過 useScroll 綁定元素在視口中的行程，攤平、縮放與陰影全由捲動進度驅動。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
22
1.05
40
1000
<ContainerScroll3d />
安裝
npx shadcn@latest add https://webberui.com/r/container-scroll-3d.json或在 components.json 設定 registries 後，改用 @webberui/container-scroll-3d 安裝。
安裝依賴後，從 registry JSON（/r/container-scroll-3d.json 的 files[0].content）複製 container-scroll-3d.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { ContainerScroll3d } from "@/components/ui/container-scroll-3d";
<ContainerScroll3d title={<h2 className="text-3xl font-bold">捲動即揭示</h2>}>
<img src="/dashboard.png" alt="Dashboard" className="w-full" />
</ContainerScroll3d>;children 就是攤平後揭示的內容，可放任何 JSX：截圖、video、圖表或即時元件。title 為選填，會隨捲動輕微上移淡入。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | React.ReactNode | — | 卡片上方標題，隨捲動上移淡入 |
children | React.ReactNode | — | 卡片內揭示的內容 |
rotate | number | 22 | 初始向後仰角（deg），中段歸零攤平 |
scaleFrom | number | 1.05 | 初始縮放，攤平時收斂到 1 |
titleTranslate | number | 40 | 標題上移距離（px） |
perspective | number | 1000 | 3D 透視深度（px），越小透視越誇張 |
container | React.RefObject | — | 巢狀捲動容器的 ref；預設以視窗為捲動容器 |
className | string | — | 外層容器樣式 |
cardClassName | string | — | 卡片外框樣式 |
可及性
- 使用者系統開啟「減少動態效果」時，卡片直接以攤平靜態呈現，不套用捲動變換
- 使用
useScroll綁定元素在視口的行程，離開視口即停止計算，不佔用額外資源