Leaver Cards

一個用於揭露雙方比數的互動式動畫網頁。適合用於投票結果揭曉、比賽結果公布等場景。

功能特色

• 兩階段揭露動畫

  • 第一階段：逐批隨機揭露卡牌，直到雙方票數持平
  • 第二階段：一次揭露剩餘所有卡牌，顯示最終結果

• 平衡揭露機制

  • 雙方卡牌以平均速度揭露，營造懸念感
  • 動畫速度隨剩餘張數減少而變慢

• 雙視窗模式

  • 投影畫面 (/)：給觀眾看的乾淨介面，只有揭露與重置功能
  • 設定頁面 (/#setup)：給主持人使用，可調整所有參數
  • 跨分頁即時同步：設定頁面儲存後，投影畫面自動更新

• 可自訂參數

  • 雙方名稱與顏色
  • 各方票數
  • 動畫速度與減速係數
  • 每批次揭露的最小/最大數量

開始使用

# 安裝依賴
pnpm install

# 啟動開發伺服器
pnpm run dev

# 建置生產版本
pnpm run build

使用方式

雙視窗操作（推薦）

1. 開啟兩個瀏覽器視窗
2. 視窗 A：訪問 / - 投影給觀眾
3. 視窗 B：訪問 /#setup - 自己操作設定
4. 在設定頁面調整參數後點擊「儲存設定」
5. 投影畫面會自動同步新設定並重置卡牌
6. 回到投影畫面點擊「揭露」開始動畫

設定參數說明

參數	說明	預設值
選項名稱	雙方的顯示名稱	李昴星 / 李嚴
選項顏色	卡牌正面的顏色	#667eea / #f093fb
票數	各方的票數	57 / 43
初始間隔	第一階段每批次的基礎間隔（毫秒）	180
減速係數	動畫減速的程度，越大越慢	2
最小批量	每次揭露的最少卡牌數	2
最大批量	每次揭露的最多卡牌數	5

技術架構

• React 19
• TypeScript
• Vite
• localStorage + storage event（跨分頁同步）

Todo

• Split reveal and config panels into two routes
• SSG