Queue Waitlist Section
遊戲化等候名單區塊：提交 email 後 3D 翻牌揭示你的隊列號碼與前方人潮，複製推薦連結即以插隊動畫即時前移。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1284
12480
128
1
<QueueWaitlistSection />
安裝
npx shadcn@latest add https://webberui.com/r/queue-waitlist-section.json或在 components.json 設定 registries 後，改用 @webberui/queue-waitlist-section 安裝。
安裝依賴後，從 registry JSON（/r/queue-waitlist-section.json 的 files[0].content）複製 queue-waitlist-section.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { QueueWaitlistSection } from "@/components/ui/queue-waitlist-section";
<QueueWaitlistSection
title="搶先加入等候名單"
initialPosition={1284}
totalWaiting={12480}
referralUrl="webber.ui/r/AH29X"
referralBoost={128}
onSubmit={(email) => console.log(email)}
onReferral={(position) => console.log("新位置", position)}
/>受控模式
submitted 與 onSubmittedChange 讓你從外部掌控是否已翻到背面，適合搭配真實 API 回應：
const [submitted, setSubmitted] = React.useState(false);
<QueueWaitlistSection
submitted={submitted}
onSubmittedChange={setSubmitted}
onSubmit={async (email) => {
await joinWaitlist(email);
setSubmitted(true);
}}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | React.ReactNode | "搶先加入等候名單" | 區塊標題 |
description | React.ReactNode | — | 區塊描述 |
eyebrow | React.ReactNode | "搶先體驗" | 標題上方的徽章文字 |
placeholder | string | "you@example.com" | email 輸入框的 placeholder |
submitLabel | string | "加入等候名單" | 提交按鈕文字 |
initialPosition | number | 1284 | 加入後你的初始隊列位置 |
totalWaiting | number | 12480 | 等候總人數，顯示於表單下方 |
referralUrl | string | "webber.ui/r/AH29X" | 推薦連結內容，複製到剪貼簿 |
referralBoost | number | 128 | 每次複製推薦連結前進的名次 |
minPosition | number | 1 | 插隊後能達到的最前位置（下限） |
submitted | boolean | — | 受控：是否已提交（顯示背面） |
onSubmittedChange | (submitted: boolean) => void | — | 提交狀態變更回呼（受控與非受控皆觸發） |
onSubmit | (email: string) => void | — | 提交合法 email 時觸發 |
onReferral | (position: number) => void | — | 成功插隊後觸發，回傳新位置 |
className | string | — | 追加到外層區塊的 className |
細節
- 3D 翻牌：提交後外層卡片以
rotateY翻轉，於 90° 邊緣時交換正／背面內容，因此卡片高度可自然隨內容變化，翻面瞬間看不到內容跳動。 - 計數動畫：隊列號碼以 MotionValue 從 0 計數到你的位置；插隊時再往下計數，逐格更新不觸發 React re-render。
- 插隊動畫：前方人潮以一排頭像呈現，左緣漸層暗示還有大量人在前方。複製連結後你的頭像透過 Motion
layout往前重排，被超越的頭像自然讓位。 - 雙模式：
submitted支援受控／非受控；不傳時由元件內部管理翻牌狀態。 - 所有計時器（複製回饋、插隊徽章）皆在 unmount 時清除。
可及性
- 表單 email 欄位帶隱藏
<label>，驗證失敗時以role="alert"提示並設定aria-invalid與aria-describedby。 - 背面含
aria-live="polite"的螢幕閱讀器區塊，隨時朗讀「目前排在第 N 位、前方還有 M 人」，計數動畫本身對輔助科技隱藏。 - 提交與複製按鈕皆有
aria-label與focus-visible外框樣式。 - 使用者系統開啟「減少動態效果」時，不執行 3D 翻牌與計數／插隊動畫，改依狀態直接呈現對應面，數值即時落定。