# Introduction（引言）

醫學會議、科部春酒、教學活動常需要當場進行抽獎環節，但市售線上抽獎工具往往帶有廣告、要求註冊或無法自訂風格。對於希望提供俐落視覺體驗的活動主持人，自有抽獎應用是更乾淨的選擇。本專案以 React 與 Tailwind CSS 打造一個可立即部署的抽獎介面，支援名單匯入、抽出動畫與結果保存，作為個人活動的可複用工具。

# Methods（方法）

實作以 TypeScript 與 React 為主，搭配 Tailwind CSS 處理樣式。功能包含：名單匯入（支援貼上、CSV）、抽出動畫（滾動效果以增加儀式感）、抽出後從名單中移除（避免重複中獎）、以及結果匯出。整體部署為靜態網站，可直接掛在 Vercel 或 Netlify。

設計重點為「現場使用體驗」：考量到活動主持人需要在大螢幕投影下操作，介面字體偏大、按鈕反應快、抽獎動畫足以引起觀眾注意但不過分喧鬧。所有資料停留於瀏覽器本地，不上傳伺服器，符合個人化使用情境。

# Results（結果）

工具已能在實際活動中順利運作：從導入名單到抽出多名獲獎者皆可在數十秒內完成，且視覺效果優於多數線上替代品。對於常需主持小型活動的個人或團隊，本應用提供穩定可靠的抽獎工具，且因為是自有的，能依當下主題微調樣式。

# Discussion（討論）

本專案展現了「個人化前端工具」的價值：當特定情境的需求被反覆觸發，自有應用便比商用替代物更貼合使用習慣。限制方面，目前僅支援單輪抽獎與單一名單，多輪／多獎項仍需手動切換；抽獎隨機性以瀏覽器內建 PRNG 為主，公平度足以滿足休閒情境但非適用法規場景。未來可加入主題切換、多獎項並行抽出與聲音特效。

# 連結

• GitHub：htlin222/lottery
• 主要語言：TypeScript
• 最後更新：2026-03-28