Macbook Scroll
捲動時畫面自 MacBook 螢幕升起
隨頁面捲動，MacBook 的螢幕自闔上狀態旋轉開啟，內容緩緩浮現。純 CSS 3D transform 打造，不依賴 WebGL。
載入預覽⋯
安裝
npx shadcn@latest add https://webberui.com/r/macbook-scroll.json或在 components.json 設定 registries 後，改用 @webberui/macbook-scroll 安裝。
安裝依賴後，從 registry JSON（/r/macbook-scroll.json 的 files[0].content）複製 macbook-scroll.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
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），越高開蓋越慢 |
className | string | — | 透傳至外層軌道容器 |
可及性
- 使用者系統開啟「減少動態效果」時，直接渲染開啟到底的靜態 MacBook，不綁定捲動
- 使用
mounted兩段式渲染避免 SSR hydration mismatch，window存取僅發生在掛載後