Motion Design 資源庫：掌握 Prompt、元件庫、獎項網站與靈感資源，快速打造高質感動畫網站。
Motion Design 資源庫：從 Prompt 到獎項網站的完整參考清單
Motion Design 讓網站更具吸引力，但要快速上手往往需要大量範例、Prompt 與元件。本文整理了
- 可複製 Prompt / Code 的 Motion 元件與網站庫
- 以 Motion 為主題的獎項網站
- 供靈感與研究的 Motion / Web Animation 參考集合
並提供 需求優先看 的清單，協助你在不同階段選擇最適合的資源。
可複製 Prompt / Code 的 Motion 元件與網站庫
| 名稱 | 類型 | 說明 | 取得方式 |
|---|---|---|---|
| MotionSites AI | AI Prompt 庫 | 大量 Hero／Section／Landing Prompt，訂閱後可直接貼到 Lovable、Cursor 等產生動畫站 | 付費訂閱（$149–$349） |
| 21st.dev | 元件 + AI Prompt | 直接「Copy AI Prompt」貼進 Cursor、Claude、v0、Lovable；亦支援 shadcn 安裝與 MCP | 免費瀏覽，付費進階功能 |
| Aceternity UI | 動畫 React 元件 | Tailwind + Framer Motion 高動效 blocks／templates | 部分免費，All‑Access 付費 |
| Magic UI | 開源動畫元件 | 150+ React／TS／Tailwind／Motion 元件，直接貼進編輯器 | 開源免費 |
| React Bits | 開源互動元件 | 大量 animated／interactive React 元件與完整原始碼 | 開源免費 |
| Envato Elements – Motion Design for the Web | 素材訂閱庫 | 網頁向 motion 資產集合，訂閱後無限下載 | 訂閱制 |
小技巧：若想快速產生整站或區塊，建議先使用 21st.dev 的 Prompt，完成後再用 MotionSites AI 進行細節調整。
以 Motion 為主題的獎項網站
| 名稱 | 官方 URL | 說明 |
|---|---|---|
| Awwwards – Animations | Awwwards Nominees | 全球知名網站獎，收錄強動畫與互動獲獎站 |
| Awwwards – Framer Motion | Best Framer Motion Websites | Web Design Inspiration | 聚焦 Framer Motion 技術與動效表現的精選站 |
| CSS Design Awards – Animated | Animated Sites - A Gallery of Sites Featuring Animation via CSS Design Awards | 以 Animated feature 篩選的大型動畫網站畫廊 |
| The Motion Awards | Prior Editions — The Motion Awards X | 自 2016 起專做 Motion Design 領域的獎項與歷屆作品 |
建議：在設計前先瀏覽這些獎項網站，了解「獲獎級」的節奏與系統，作為實作的參考。
Motion Ideas / Web Animation 參考集合
| 名稱 | 官方 URL | 說明 |
|---|---|---|
| landing.love | https://www.landing.love/ | 2100+ 動畫網站 showcase，提供全頁錄影方便研究 timing 與轉場 |
| Refs.Gallery – Web Animation & Motion Design | https://www.refs.gallery/collections/web-animation-motion-design | 手挑完整 motion system（進場、轉場、互動回饋） |
| Refs.Gallery – Motion tag | https://refs.gallery/tags/motion | 數百個 Motion 標籤網站，每週更新 |
| WebInteractions Gallery | https://www.webinteractions.gallery/ | 專注 UI interaction：hover、page transition、menu、scroll 等 |
| A1 Gallery – Animated | https://www.a1.gallery/style/animated | Animated style 精選網站畫廊 |
| Best Website Gallery – Animation | Animation | Best Website Gallery | 依 Animation style 篩選的靈感庫 |
| Motionfolios | https://motionfolios.com/ | 專收 Motion Design 作品集與工作室站的策展畫廊 |
| Webflow – Made in Webflow / Motion Design | Best Motion Design Websites | Free Examples & Designs - Webflow | 可 clone 的 motion 向 Webflow 範例站 |
| Muzli – Motion Design | 60+ Best motion design Design Ideas (2026 Trends) | Muzli | 持續更新的 motion design 靈感合集 |
| Dribbble – Web Motion | https://dribbble.com/search/web-motion | 大量 web motion 短片與 UI 動效 shot |
| Behance – Motion | https://www.behance.net/galleries/motion?locale=en_US | Motion graphics／reel／動畫作品流 |
| School of Motion – Inspiration roundup | Great Sites for Motion Design Inspiration | 產業向 motion inspiration 網站策展文 |
需求優先看
| 需求 | 優先看 |
|---|---|
| 訂閱後直接複製 prompt 做整站／區塊 | MotionSites AI、21st.dev |
| 免費／開源 copy‑paste 動畫元件再餵給 AI | Magic UI、React Bits、Aceternity UI |
| 研究「獲獎級」整站 motion 與互動 | Awwwards、CSS Design Awards、The Motion Awards |
| 大量錄影／分類 reference 找 idea | landing.love、Refs.Gallery、WebInteractions Gallery |
| 作品集／工作室級 motion 展示 | Motionfolios、Behance Motion |
建議使用流程
- 先定位需求：是想快速產生整站、還是想研究獲獎級的系統？
- 選擇 Prompt / 元件庫：
- 需要整站 Prompt → 21st.dev 或 MotionSites AI
- 需要開源元件 → Magic UI、React Bits、Aceternity UI
- 參考獎項網站：瀏覽 Awwwards、CSS Design Awards 等，挑選符合風格的範例。
- 收集靈感：使用 landing.love、Refs.Gallery 等錄影資源，分析 timing、轉場與互動細節。
- 實作 & 測試：將 Prompt 或元件貼進你選擇的編輯器（Lovable、Cursor、Webflow 等），調整細節並測試在不同裝置上的表現。
- 迭代優化：根據使用者回饋與分析數據，持續微調動畫參數與互動流程。
小結：Motion Design 的成功關鍵在於「先有靈感、再有工具」。透過上述資源，你可以在短時間內從 Prompt 產生到完整動畫網站，並持續保持創新與品質。
參考來源：官方網站與產品頁面（如 MotionSites AI、21st.dev、Awwwards 等）