直式故事輪播
限時動態式直式輪播：頂部分段進度條、自動播放與點按切換
限時動態式的 9:16 直式輪播卡片：頂部分段進度條自動推進，點按左半邊回上一則、右半邊到下一則，長按任意處暫停播放。場景以漸層與 emoji 構成，無需任何外部圖片。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
5000
<VerticalStoryCarousel />
安裝
npx shadcn@latest add https://webberui.com/r/vertical-story-carousel.json或在 components.json 設定 registries 後，改用 @webberui/vertical-story-carousel 安裝。
安裝依賴後，從 registry JSON（/r/vertical-story-carousel.json 的 files[0].content）複製 vertical-story-carousel.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { VerticalStoryCarousel } from "@/components/ui/vertical-story-carousel";
<VerticalStoryCarousel
duration={4000}
stories={[
{ tag: "週末靈感", emoji: "🏔️", title: "清晨的合歡山", description: "等一場日出。" },
{ tag: "週末靈感", emoji: "🌊", title: "東海岸公路", description: "一路向南的藍。" },
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
stories | StoryItem[] | — | 故事清單，依序自動播放 |
duration | number | 5000 | 每則故事的播放時間（毫秒） |
loop | boolean | true | 播完最後一則後是否回到第一則重新循環 |
className | string | — | 透傳到最外層 9:16 卡片容器 |
StoryItem 欄位：
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | string | — | 故事主標題，顯示於卡片下方 |
description | string | — | 補充文案，顯示於標題下方 |
gradient | string | 內建漸層 | 場景漸層（CSS background-image 值） |
emoji | string | — | 場景中央的 emoji 裝飾，緩慢上下漂浮 |
tag | string | — | 左上角的小標籤，例如帳號名稱或分類 |
可及性
- 使用者系統開啟「減少動態效果」時，關閉轉場與漂浮動畫，當前進度條直接顯示為滿格靜態
- 容器可聚焦（
tabIndex={0}），支援鍵盤操作：方向鍵切換上一／下一則，空白鍵暫停／繼續 - 以
role="group"與aria-roledescription="carousel"標示輪播語意，並標註總則數 - 切換故事時透過
aria-live="polite"播報「第 X 則，共 Y 則：標題」 - 裝飾性光暈與 emoji 均標記
aria-hidden，不干擾螢幕閱讀器