媒體
Macbook Scroll
捲動時畫面自 MacBook 螢幕升起
隨頁面捲動，MacBook 的螢幕自闔上狀態旋轉開啟，內容緩緩浮現。純 CSS 3D transform 打造，不依賴 WebGL。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/macbook-scroll.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1400
編輯中的呼叫預設屬性
<MacbookScroll/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/macbook-scroll.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/macbook-scroll 安裝。
使用
import { MacbookScroll } from "@/components/ui/macbook-scroll";
<MacbookScroll title="向下捲動查看">
<div className="h-full w-full bg-indigo-600" />
</MacbookScroll>children 會渲染在螢幕內；未提供時使用漸層佔位。元件自帶捲動軌道，放進一般會捲動的頁面即可運作。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | React.ReactNode | — | 螢幕上方標題，開蓋時淡出 |
children | React.ReactNode | 漸層佔位 | 顯示在螢幕內的內容 |
showGradient | boolean | true | 螢幕底部疊淡出漸層 |
trackHeight | number | 1400 | 捲動軌道高度（px），越高開蓋越慢 |
container | React.RefObject<HTMLElement | null> | — | 巢狀 overflow 捲動容器的 ref；未提供時追蹤視窗 |
className | string | — | 透傳至外層軌道容器 |
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染開啟到底的靜態 MacBook，不綁定捲動
- 使用
mounted兩段式渲染避免 SSR hydration mismatch，window存取僅發生在掛載後