Ken Burns 幻燈片
緩慢縮放平移的經典紀錄片式幻燈片，交叉淡接。
以經典紀錄片運鏡（Ken Burns effect）呈現的幻燈片：每張畫面緩慢縮放與平移、方向逐張輪替，切換時交叉淡接，附底部圓點導航與懸停暫停，畫面以漸層與 SVG 山景模擬照片、完全自包含。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
8000
1200
1.16
<KenBurnsSlideshow />
安裝
npx shadcn@latest add https://webberui.com/r/ken-burns-slideshow.json或在 components.json 設定 registries 後，改用 @webberui/ken-burns-slideshow 安裝。
安裝依賴後，從 registry JSON（/r/ken-burns-slideshow.json 的 files[0].content）複製 ken-burns-slideshow.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { KenBurnsSlideshow } from "@/components/ui/ken-burns-slideshow";
<KenBurnsSlideshow
slides={[
{ title: "山嵐初醒", subtitle: "清晨的高山雲海", hue: 210 },
{ title: "金色稻浪", subtitle: "秋收時節的田野", hue: 42 },
]}
duration={8000}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
slides | KenBurnsSlide[] | — | 幻燈片資料，每項含 title、subtitle? 與主色相 hue（0–360） |
duration | number | 8000 | 每張停留時間（毫秒） |
fadeDuration | number | 1200 | 交叉淡接的時長（毫秒） |
zoom | number | 1.16 | Ken Burns 最大縮放幅度（≥ 1.02） |
autoPlay | boolean | true | 是否自動播放 |
pauseOnHover | boolean | true | 游標懸停時是否暫停自動播放 |
className | string | — | 透傳到外層容器，可覆寫比例與圓角 |
可及性
- 使用者系統開啟「減少動態效果」時，停用縮放平移運鏡與自動播放，僅保留圓點與方向鍵手動切換
- 容器可聚焦（
role="region"+aria-roledescription="輪播"），支援左右方向鍵切換上一張／下一張 - 每個圓點按鈕具描述性
aria-label（含張數與標題），當前張標記aria-current - 以
aria-live="polite"的隱藏區塊向螢幕閱讀器播報當前張數與標題 - 游標懸停即暫停自動播放並顯示暫停指示，方便閱讀字幕內容