前言

這系列文章都在聊 Animate UI，但好像一直沒說清楚我到底是怎麼跟它相遇的？🤔
今天就來講講這段遇見 Animate UI 的緣起吧！

電商歷史價格查詢的誕生

故事要從我前陣子做的「電商歷史價格查詢」網站開始說起。
這個網站的靈感來自 TWBuyer.info —— 輸入網址，就能查商品歷史價格的神器。可惜後來它不知道什麼原因下架了 🥲，於是我心想：「那我就自己來做一個吧！」

於是開啟了復刻 TWBuyer 計畫，打造一個簡潔、直覺又好用的版本，讓大家在購物前，能用最直覺的方式判斷「現在買會不會被貴到」。

初代版本：Streamlit 篇

一開始的目標很單純：快！要快！
畢竟只是想先驗證概念（MVP, Minimum Viable Product），所以我毫不猶豫地選擇熟悉的 Python 生態系。
由於前陣子才用過 Flask，這次就想試試看外觀更「現代感」的前端框架 —— Streamlit。

Streamlit 的確沒讓人失望。開發速度快得像開外掛，一行行程式碼就能生成漂亮的互動介面，互動式的元件也非常美觀簡潔。

不過實際部署後，問題就一個接一個登場：

1. 🔍 SEO 大敵來襲：搜尋引擎似乎對這種動態載入的架構不太感冒，導致整個網站幾乎無法被索引。Google 看不見、用戶找不到，SEO 直接變成隱形模式。

2. 🧩 Tabs 的崩潰日常：每次切換 Tabs，整個頁面都會重新 re-run，導致資料重新載入。更慘的是，當其他擴充套件和 Tabs 一起登場時，錯誤訊息就像爆米花一樣蹦蹦跳跳。

3. ☁️ 燒錢的雲端冒險：當時手上還有些 Google Cloud 的額度，於是乾脆把它丟上 Cloud Run。結果一開始看似順利，後來才發現——流量一多，錢包比程式還快掛掉 😬。

於是我開始思考：

「有沒有更平價、穩定，又能兼顧美觀與 SEO 的方案？」

就這樣，我踏上了尋找新框架的修煉之旅，準備從 Streamlit 的舒適圈畢業，
去探索更符合 Web 開發主流的新世界。

第二階段：重構與技術棧轉換

接下來我評估了幾個方向，包括「純 HTML + JS + CSS + jQuery」的組合。
但冷靜想想，從 0 開始手刻整套系統，太花時間了，因此這個方案很快就捨棄。

就在這時代轉變的浪潮中，各種 AI 開發工具 陸續登場，像是 GitHub Copilot、Claude、Gemini 等好夥伴。

經過測試，發現——它們產出的前端程式碼幾乎都偏向 Next.js 架構，與 React 生態圈更為契合，既然 AI 都這麼懂潮流，那我也就順勢入坑。

幾年前使用 Laravel 時，那種「開發起來像在堆積木」的流暢感，讓人懷念到不行。
既然已經轉向 React，那 UI 層面是否也能找到一個同樣優雅的搭配？

因此開始尋找一個能與 Next.js 搭配、同時又有美觀 UI 的解決方案，最後就遇到了...

Shadcn UI 登場

沒錯，就是 Shadcn/UI 🎨。
這套框架的元件覺得很熟悉，很多網頁都使用，而且套件更新速度也非常穩定，不是那種「上傳完就被遺棄」的開源專案。
它既現代、又靈活，完美符合我想要的開發流程，而且它的 Componenets 非常好用，簡單上手。

於是我順利地把網站重構成基於 Next.js + Shadcn 的版本，一切看起來都很不錯。
但工程師的天性就是——「還可以再更好一點 ✨」。

Animate UI

就在我思考如何讓畫面更有互動感時，突然發現了 Animate UI。
它不只是支援 shadcn/UI，而是專門為 React + Tailwind + Motion 生態量身設計的動畫元件套件庫。

我一試就上癮，幾乎不用大改原本的程式碼，只要微調元件設定，就能讓網站套上動畫。
使用後我心裡只浮現一句話：

「這東西太香了，不推不行啊！」

也因此，我開始撰寫這系列關於 Animate UI 的介紹文章。希望能讓更多開發者認識這套工具，親自體驗動畫如何讓介面更有生命力。

目前我在「電商歷史價格查詢」專案中也實際套用幾個 Animate UI 元件。像是 Sidebar，收納功能簡潔又快速；Button 的動畫則讓使用者一眼就知道系統還在運作、並沒有當機。
我也持續調整整體介面，讓網站在視覺與互動上都更順手、更貼心。

小結

從 Streamlit 到 Next.js，再到 Shadcn + Animate UI，
這一路的轉換不只是技術升級，更像是一場開發美學修行，誰說工程師只能寫出冷冰冰的頁面？
透過這些優秀的工具，我們也能寫出有靈魂、節奏與表的介面。