Temple Oracle 線上抽籤：把廟宇抽籤的儀式節奏搬進網頁

為什麼做這個專案

網路上的「線上抽籤」很多，但大多是按一個按鈕、跳出一張籤詩就結束了。真正走進廟裡抽籤，其實是一段有節奏的過程：靜下心、默念姓名與問題、搖籤筒、擲筊請示，連續三個聖筊才算數，最後才去對照籤詩。

這個專案想做的不是「隨機產生籤詩的工具」，而是把這段儀式的節奏搬到網頁上。重點放在流程、排版、留白與細微的動態，讓使用者在螢幕前也能有片刻的沉靜。

收錄的籤詩

籤詩內容都整理成 JSON，元件只負責呈現。之後要新增其他廟宇的籤，只要補一份資料檔即可。

儀式流程：用狀態機串起每一步

台灣的三間廟共用同一套流程，用一個 step 狀態控制目前走到哪一步：

type Step = "intro" | "shaking" | "drawn" | "confirm" | "result";

1. intro：提示「請虔誠默念姓名與問題」
2. shaking：搖籤筒的動畫，約兩秒後抽出一支籤
3. drawn：顯示抽到第幾籤，準備擲筊確認
4. confirm：擲筊請示神明
5. result：直式排版的籤詩與解說

每一步只顯示該做的事，不把所有功能一次攤在畫面上。這也是和一般抽籤工具最大的差別。

擲筊：要連續三個聖筊

擲筊是整個流程最有儀式感的部分。規則照著實際習俗設計：

• 聖筊：神明同意，累積一次，連續三次才能看籤解
• 笑筊：神明笑而不答，計數歸零，再擲一次
• 陰筊：神明不認同，要回頭重新抽籤

if (r < 0.5) {
  currentResult = "sheng";          // 聖筊
  setShengCount((prev) => prev + 1);
} else if (r < 0.75) {
  currentResult = "yin";            // 陰筊：重抽
  setShengCount(0);
} else {
  currentResult = "laugh";          // 笑筊：重擲
  setShengCount(0);
}

機率上刻意把聖筊調到 50%。如果照真實的機率，連續三個聖筊的機會太低，使用者很容易在這一步就放棄。儀式感需要一點挫折，但不能讓人卡關，這是設計上取捨最久的地方。

筊杯本身用 CSS 畫出兩片半月形，靠圓角方向和顏色深淺區分平面與凸面，擲出時加上旋轉動畫。

直式排版：讓籤詩像籤詩

籤詩一定要直排才有味道。這裡用 CSS 的 writing-mode: vertical-rl，並依照不同籤詩的格式自動斷行：觀音籤一句一行，方便排成直欄；月老籤只在句號、分號斷開。

直排在手機上踩了一個坑：直排欄位原本用 flex-1 平分寬度，螢幕一窄就被壓縮，文字互相重疊。最後拿掉 flex-1，改成給每一欄固定的最小寬度才解決。

日本淺草觀音籤則是另一種呈現：做成可以翻面的籤紙，用 CSS 3D Transform 的 rotateY(180deg) 搭配 backface-visibility: hidden，正反面是真正的兩面內容，而不是把同一面鏡像翻轉。

視覺設計

• 色調：米白的紙張底色，中央一圈淡淡的暖光，像燭火映在紙上
• 字體：標題用襯線字體與加寬字距，營造莊重感
• 動態：只用緩慢、細微的轉場，避免花俏的特效破壞氣氛
• 深色模式：夜晚抽籤也不刺眼

這個專案在意的不是功能多寡，而是在數位介面中保留傳統文化的氛圍：留白比裝飾重要，節奏比速度重要。

技術架構

小結

做這個專案最大的收穫是：「體驗」往往藏在流程裡，而不是畫面上。同樣是抽一張籤，多了默念、搖籤、擲筊這幾個步驟，使用者對結果的感受就完全不同。

🌐 線上體驗　｜　💻 GitHub