前言

不知不覺間，鐵人賽的三十天挑戰也悄悄畫下句點。回頭一看，自己竟然已經和 Animate UI 朝夕相處超過一個月 🫨。從最初懷著好奇心與實驗精神開始，到後來逐步將它融入實際專案，這段學習旅程讓我對網頁動畫 Animation 有了全新的理解與體會。

這篇文章想和大家聊聊程式碼之外的事。不只是「怎麼用」，而是這 30 天以來，我對 Animate UI、對動畫設計、甚至對網頁互動的重新思考。

當然也得誠實說，Animate UI 目前仍處於早期開發階段，尚未完全穩定，用戶不算多、更新速度也相當頻繁。若後續文件與本文內容略有出入，建議前往官方 Animate UI Docs 查看最新版本。

這個系列主要聚焦在我認為特別有趣、實用的元件。至於像 Button、Dialog、Tabs 等常見元件，雖然這次沒有提及，但它們都已內建在套件中，等待你親自挖掘與發現。

Animate UI 只是其中之一

不可否認，Animate UI 確實讓網頁動畫的開發變得輕鬆又直覺。但也老實說，它並不是唯一的選擇。在官方文件中，其實也整理了一份參考清單 👉 Other Animated Distributions

裡面列出了多款同樣專注於動畫與互動設計的框架與函式庫，例如：
Magic UI、React Bits、Hover.dev、Pace UI、以及更為人熟知的 Framer Motion、GSAP 等。每個工具都有自己的特色與使用哲學，能透過不同方式實現網頁互動的靈動感。

至於 Animate UI 讓我特別喜愛的地方，在於它與 Shadcn UI 的完美整合。我的開發流程通常會先以 Shadcn UI 建立初始版本，確保結構與樣式完整，再以 Animate UI 的動畫元件替換或微調，讓畫面自然流暢又保有一致的設計風格。

動畫之外，更該關注使用者體驗

網頁動畫能讓畫面更生動、有趣，但若使用過多，反而可能造成干擾，讓使用者感到眼花撩亂。畢竟，使用者進到網站的目的，多半不是「欣賞動畫」，而是想完成任務。因此，除了追求畫面的流暢與動態效果外，更重要的是整體的 UI/UX 一致性。

在動手開發前，我非常推薦先參考 Shadcn Figma，了解各元件在排版與間距上的合理擺放方式。同時，也可以善用 shadcn/ui design system（由 Pietro Schirano 製作），這是一個免費且實用的設計系統範本。

若想要更完整的設計資源，也可以考慮 Shadcraft UI Kit 或 shadcn/ui kit by Matt Wierzbicki，甚至邀請專業的 UI/UX 設計師協助規劃，讓網站不僅在動畫上吸睛，更在結構與體驗上兼顧美觀與實用。

加碼工商時間 我的 Blog

這 30 天的學習心得，我也同步整理在自己的 Blog.Haoder 上。若之後有內容更新或修正，部落格會是最先更新的地方。

Blog 的文章主要以技術筆記為主，偶爾也會分享一些實用軟體的操作與安裝心得。如果你對這些主題有興趣，非常歡迎前往看看～

未來我也會持續更新更多內容，不只侷限在前端框架，還會探索更廣的主題與開發靈感。歡迎一起來討論、交流，甚至激發新的點子！💡

小結

這三十天的 Animate UI 初探，讓我深刻體會到 —— 動畫不只是畫面的點綴，更是一種讓介面有節奏、有溫度的語言。

未來，我會持續探索不同的框架與工具，尋找更實用、更有創意的技術分享給大家。同時也期待 Animate UI 能在社群的參與與回饋中不斷成長，變得更完整、更穩定。希望下次再提筆撰寫時，Animate UI 已成為更多前端設計師與開發者手中的日常利器。✨

特別感謝

首先，誠摯感謝團長 戴維廷 AndyAWD 的邀請。若不是他的熱情號召，我大概也不會踏上這次鐵人賽的挑戰之路。他撰寫的主題是關於 Android Vibe Coding 的開發實戰 ——「看見筆記捲土重來，試著用 Vibe Coding 完成一款 App 吧！」。這系列文章不僅實用，也充滿啟發性，強烈推薦一讀。

同時也想感謝一路並肩奮戰的夥伴們：
劉瑞元 RayYuanLiu 與 張喬閔 chiaominchang222。他們分別完成了「上班族的命令列 (CLI) 生存手冊」以及「轉職仔之 Data Science and AI Master 後的持續精進技術之路」。這兩系列都充滿乾貨與真實心路歷程，值得細細品讀。

最後，特別感謝家人的支持與照顧。讓我能安心投入寫作，不必為三餐煩惱，這份溫暖，是我能堅持完成三十天挑戰的重要力量。