做「微光採集瓶」的動機

不管是新聞標題或是文章內容，大家應該都有接收過這個資訊：「現代人越來越重視心理健康。」，這顯然是一個好消息；但換個角度想，會有這種趨勢，有沒有一部分原因是現今繁忙的社會促使？

「光是好好活著，就很厲害了。」這句話常出現在社群上，道盡了現代人在緊湊步調與生活重壓下的疲憊。每天在工作與住處兩點一線之間奔波，日子彷彿一成不變，到了假日也只想躺著休息。在這種狀態下，我們很難在當下去感知生活中的小細節，往往一天結束時，只剩下「今天好累、好像忙了一整天卻什麼都沒做」的虛無感。

但如果換個方式，在睡前回想時留一點空檔，很多微小的事物其實都是閃閃發光的——可能是早上睡到自然醒，或是吹著一陣舒服的晚風散步。這次 30 天鐵人賽，我想藉此打造一個「微光採集瓶」：讓使用者每天記錄一件感到幸福、開心的事，系統會將這些記憶化作閃爍微光的小珠子收進玻璃瓶中，藉由建立「發現美好」的習慣，為疲憊的生活重新注入前進的動力。

使用工具

這次的專案，會用 Vue 3 搭配 Vite 建置開發環境，並透過 LocalStorage，把每一顆光珠的資料都留在使用者自己的瀏覽器裡。

目標成果

為了讓「收集微光」的過程不僅僅是枯燥的文字紀錄，而是一種溫柔、溫暖的儀式感，在這個專案中，我預計會完成以下幾個重點：

1. 開場的儀式感：打開網頁的第一刻，會先看到一段簡潔的標題文字淡入淡出，接著才過渡到真正的玻璃瓶畫面，這段開場是給使用者靜下心來的時間。
2. 每日收集儀式：每天一次的「收集」動作，寫下一件當日的美好。
3. 動態堆疊：光珠會依照你選的心情色調，自然地落進瓶中堆疊。
4. 缺席提醒：如果某天忙到忘記，隔天回來會看到一顆橘色光珠落在瓶中。（不會是空著的原因是：我不希望「每天記錄」變成一種壓力，忘記紀錄時，我想讓系統表現出：「應該是因為你忙著快樂，才忘記上來填寫吧！」的回應。）
5. 光珠裡的回憶：收集進瓶中的每一顆光珠，並不會因為變成一顆珠子就失去了它的故事。點下任何一顆光珠，都能重新看見當初寫下的那句話。
6. 月底回顧：每個月的最後一天，瓶中光珠會像流星一樣傾倒而出，匯聚成一張專屬這個月的回顧色譜卡片，可以下載保存。

30 天大致規劃

• 第一階段（Day 1-10）：認識工具與設計瓶身
  認識現代前端工具 Vite 與 Vue 3，了解語法、屬性的代表意義，並著手設計瓶身外觀。
• 第二階段（Day 11-20）：網頁互動與動態內容
  打造首頁與採集頁兩個頁面，設計心情色譜選擇、輸入框雙向綁定、光珠落下的過渡動畫，並讓元件之間能夠互相傳遞資料。
• 第三階段（Day 21-30）：記錄保存與結果圖片匯出
  串接 LocalStorage 實現資料持久保存，處理跨月份的資料管理與日期邏輯判斷，最後將畫面轉換為圖片並提供下載。

跟著我在這 30 天一邊寫程式碼一邊學習，看著充滿美好紀錄的玻璃瓶在眼前慢慢成形吧！

下篇預告

明天（Day 02），我們就先來聊聊這次專案選用的兩位好幫手：Vue 3 與 Vite，看看它們有什麼特色和功能吧！