滑鼠視差場景
多層元素隨滑鼠位移形成景深，附陀螺儀後備。
容器內的多個 ParallaxLayer 依 depth 係數反向跟隨滑鼠、經 spring 平滑，形成攝影機平移般的景深視差；滑鼠離開時所有層緩緩回中，行動裝置改用陀螺儀驅動（權限被拒則保持靜態），適合 hero 場景與展示卡片。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
24
4
120
18
<MouseParallaxScene />
安裝
npx shadcn@latest add https://webberui.com/r/mouse-parallax-scene.json或在 components.json 設定 registries 後，改用 @webberui/mouse-parallax-scene 安裝。
安裝依賴後，從 registry JSON（/r/mouse-parallax-scene.json 的 files[0].content）複製 mouse-parallax-scene.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import {
MouseParallaxScene,
ParallaxLayer,
} from "@/components/ui/mouse-parallax-scene";
<MouseParallaxScene
intensity={24}
className="relative h-80 overflow-hidden rounded-2xl"
>
<ParallaxLayer depth={0.3} className="absolute inset-0">
背景形狀
</ParallaxLayer>
<ParallaxLayer
depth={1}
className="absolute inset-0 flex items-center justify-center"
>
主要卡片
</ParallaxLayer>
<ParallaxLayer depth={1.7} className="absolute inset-0">
前景徽章
</ParallaxLayer>
</MouseParallaxScene>小技巧：把每一層的內容做得比容器稍大（例如 left-[-5%] w-[110%]），位移時才不會露出邊緣。
Props
MouseParallaxScene
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
intensity | number | 24 | 最大位移強度（px）：depth = 1 的層在滑鼠移到邊緣時的位移距離 |
tilt | number | 4 | 整體場景隨滑鼠的最大傾斜角度（度），設 0 可關閉 3D 傾斜 |
stiffness | number | 120 | spring 剛性，數值越大層的跟隨越即時 |
damping | number | 18 | spring 阻尼，數值越小回中時的餘晃越明顯 |
gyro | boolean | true | 是否在行動裝置啟用陀螺儀後備 |
className | string | — | 透傳至最外層容器，用來設定場景尺寸、圓角與 overflow |
children | ReactNode | — | 場景內容，放入多個 ParallaxLayer |
ParallaxLayer
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
depth | number | 1 | 景深係數：0 完全不動、越大位移越多；正值反向於滑鼠、負值同向跟隨 |
className | string | — | 透傳至層容器，通常搭配 absolute inset-0 定位 |
children | ReactNode | — | 層內容 |
可及性
- 使用者系統開啟「減少動態效果」時，所有層固定置中、不追蹤滑鼠與陀螺儀
- 位移只透過 CSS transform，層內文字與互動元素仍可被輔助科技正常讀取與聚焦
- iOS 13+ 的陀螺儀權限會在第一次觸控時請求，被拒或不支援時場景保持靜態、不擲錯
- 純裝飾層（山景 SVG 等）建議加上
aria-hidden或pointer-events-none，示範程式已示意