結論：最值得先看的 10 個
| 排名 | 網站 | 核心用途 | 為何值得先看 | 對標 MotionSites |
|---|---|---|---|---|
| 1 | AI UI Prompt＋元件原始碼 | 可預覽元件、複製 TSX、Prompt，並透過 MCP 導入 Cursor 或 Claude Code；工作流程最接近 MotionSites。turn265819search4turn470599search6 | 極高 | |
| 2 | Made With GSAP | 高階 GSAP 動畫效果原始碼 | 專門收集可直接使用的 GSAP 效果，包含 Scroll、Drag、Mouse Move、Infinite Animation，屬於 MotionSites 的「Code-first」版本。turn697796search9 | 極高 |
| 3 | Motion.dev | Motion／Framer Motion 範例與 AI Kit | 有大量可複製範例、Motion UI、AI Kit，支援把動畫知識與元件來源直接交給 AI Agent。turn915388view4 | 極高 |
| 4 | Aceternity UI | 動態 React Landing Page 元件 | React、Next.js、Tailwind CSS、Motion 動畫元件，Hero、背景、卡片與 3D 效果完整。turn917773search4turn228958search5 | 高 |
| 5 | Magic UI | Animated Shadcn 元件 | 專注行銷網站與 Landing Page，提供可複製的 React、Tailwind、Motion 元件與效果。turn470599search2turn470599search26 | 高 |
| 6 | React Bits | 創意動畫元件 | 大量文字動畫、背景動畫與互動 UI，可選不同動畫與 CSS 實作。turn470599search0turn470599search3 | 高 |
| 7 | Landing Love | 完整網站動態錄影 | 不只截圖，而是保存完整頁面錄影，並可依 GSAP、WebGL、Three.js、Framer、Webflow 篩選。turn915388view1 | 高 |
| 8 | Ripplix | UI Motion／Micro-interaction 資料庫 | 收集真實產品中的 UI Animation 與 Micro-interaction，適合建立 Motion Pattern Library。turn337197search6 | 高 |
| 9 | 微互動與 UI 動畫靈感 | 聚焦 iOS 與 Web App 的高品質動畫細節，可依 Button、Card、Drag、Glow、Confetti 等模式篩選。turn337197search14 | 中高 | |
| 10 | Awwwards Animation Collection | 得獎級 Motion 元素參考 | 專門收錄 Canvas、SVG、CSS、WebGL 動畫與 Micro-interaction，不必逐站尋找。turn337197search19 | 中高 |
A. Prompt、Code 與可直接複製的 Motion 元件
| 網站 | 類型 | 可取得內容 | 技術／平台 | 存取模式 | 對標程度 |
|---|---|---|---|---|---|
| MotionSites | AI Website Prompt Library | 可直接貼入 Lovable、Bolt、Cursor、Claude 的網站與 3D 動畫 Prompt。turn265819search3turn265819search25 | AI Builders | Premium | 基準 |
| AI UI Library | 預覽元件、複製程式碼與 Prompt，也能由 AI 生成多個 UI Variants。turn265819search4turn470599search6 | React、Tailwind、Shadcn、AI Agent | 免費＋進階功能 | 極高 | |
| Motion.dev Examples | Animation Code Library | 大量 Copy-and-paste 動畫範例，包括 Parallax、Ticker、Cursor、Typewriter、Layout Transition。turn915388view4 | React、JavaScript、Vue | Core 免費；Motion+ 付費 | 極高 |
| Motion UI | Production Motion Sections | 可安裝的完整動畫 Section 與 Component，沿用專案 Design Tokens。turn915388view4 | React、Shadcn Tokens | Motion+ | 極高 |
| Motion AI Kit | AI Agent Motion Context | 將文件、範例、效能審查與動畫實作知識交給 AI Agent。turn915388view4 | Cursor、AI Coding Agents | Motion+ | 極高 |
| Made With GSAP | Premium GSAP Effects | 可直接整合的 Scroll、Drag、Mouse、Infinite 與其他 Creative Development 效果。turn697796search9 | GSAP、JavaScript | Membership | 極高 |
| Aceternity UI | Animated Component Library | Hero、Card、Background、3D、Spotlight、Text、Scroll 等元件原始碼。turn917773search4turn228958search5 | React、Next.js、Tailwind、Motion | 免費＋Templates | 高 |
| Magic UI | Animated Shadcn Library | Animated Beam、Marquee、Dock、Text、Particle、Border、Background 等效果。turn470599search2turn470599search26 | React、TypeScript、Tailwind、Motion | 開源＋Pro | 高 |
| React Bits | Creative Animation Library | 文字、背景、互動元件與完整 UI Blocks，可複製不同版本的來源碼。turn470599search0turn470599search3 | React、GSAP、Motion、CSS | 開源 | 高 |
| Animata | Copy-paste Animations | 大量動畫 React Component，可單獨複製，不需要導入整套大型 UI Package。turn470599search8turn470599search12 | React、Tailwind、部分 Motion | 免費開源 | 高 |
| Motion Primitives | Motion Building Blocks | Text Effect、Transition、Dialog、Morphing、Micro-interaction 等可組合動畫元件。turn470599search4turn470599search6 | React、Next.js、Tailwind、Motion | 開源 | 高 |
| Animate UI | Animated Shadcn Distribution | 動畫 Primitive、Component 與 Icon，可透過 Registry 安裝。turn470599search13turn228958search14 | React、Tailwind、Motion、Shadcn | 開源 | 高 |
| Hover.dev | Animated Sections and Components | Button、Navbar、Carousel、Hero、Card、Feature Section 與各類 Hover Interaction。turn228958search0turn228958search4 | React、Tailwind、Motion／JS | 免費＋Pro | 高 |
| Cult UI | Expressive Shadcn Components | Animated Cards、Text、Grid、Effect、Blocks 與 Templates，可直接貼入專案。turn228958search2turn228958search10 | React、Next.js、Shadcn、Motion | 免費開源＋Pro | 高 |
| Framer University Resources | Framer Copy-paste Library | Framer Components、Code Overrides、Scroll Animations、Effects、Interactions 與網站拆解。turn697796search11 | Framer | 多數免費 | 中高 |
| SegmentUI Remix | Framer Remix Collection | Framer Interactions、Entrance Animation、Text Effects、Scrolling、Sticky、Code Override。turn697796search30 | Framer | 免費 | 中高 |
| Framer Marketplace Components | Community Component Marketplace | Framer Components、Animations、Plugins、Templates 與視覺 Assets。turn697796search7 | Framer | 免費＋付費 | 中高 |
| Frameblox | Framer Section Library | 大量預製 Framer Sections 與 Components，付費後可直接 Copy and Paste。turn697796search23 | Framer | Pro／Premium | 中高 |
| Made in Webflow — Interactions | Webflow Cloneables | Hover、Scroll、Page Load、Mouse、Navbar 等 Interaction，可篩選 Cloneable。turn697796search1 | Webflow | 免費＋展示作品 | 中高 |
| Made in Webflow — Cloneable | Cloneable Website Library | 可直接 Clone、拆解與修改完整 Webflow 網站及互動。turn697796search31 | Webflow | 免費＋混合 | 中高 |
| Showcased | Webflow Cloneable Search | 聚合大量 Webflow Cloneable、Template 與 Component，適合搜尋特定動畫。turn697796search12 | Webflow | 免費 | 中高 |
B. Motion Design、UI Animation 與 Micro-interaction 靈感庫
| 網站 | 專注內容 | 動態呈現方式 | 最適合用途 |
|---|---|---|---|
| Landing Love | 動態網站、3D、GSAP、WebGL、Three.js | 完整頁面錄影，不是只有靜態截圖。turn915388view1 | Hero、Scroll Narrative、Creative Website |
| Ripplix | 真實 App 與網站的 UI Animation | 以動畫片段呈現並依 Interaction Pattern 分類。turn337197search6 | Motion Design System、產品微互動 |
| iOS 與 Web App 動畫細節 | 可依 3D、Card、Drag、Glow、Counter、Delete 等標籤搜尋。turn337197search14 | 高品質 Micro-interaction | |
| Design Spells | Micro-interaction、Easter Egg、設計細節 | 收集網路產品中具有個性與趣味性的互動。turn337197search4 | 細節設計、品牌個性 |
| Mobbin | 真實 Mobile／Web Product Flow | 提供影片、完整流程、互動 Hotspots，並支援複製至 Figma。turn337197search0 | 產品 UX、Transition、Flow |
| Page Flows | App User Flow 與 UI Pattern | 大量錄製流程、Screens 與真實操作路徑。turn337197search8 | Onboarding、Checkout、Search、Account Flow |
| Awwwards UI Animation Collection | 得獎級動畫元素 | 專門收集 Navigation、Hover、Content、Canvas、SVG、WebGL 動畫片段。turn337197search19 | Creative Direction、Interaction Benchmark |
| Land-book Motion | Website Motion 與頁面設計 | 主站提供 Motion、Website、Section、Mobile 等分類。turn893842search3 | Landing Page 與網站動態方向 |
| Muzli Motion Design | 全球 Motion Design 專案 | 聚合 UI、Branding、3D、Typography 與 Product Motion。turn863104search8 | 廣泛 Moodboard、趨勢探索 |
| Jitter UI Templates | 可編輯 UI Animation Templates | 可選擇預製 UI Animation 並在 Jitter 中自訂。turn337197search23 | 動態 Prototype、展示影片 |
| Recent | Web、Motion、3D、Branding 靈感 | 可依 Motion、Web、Interface、3D 等內容類型瀏覽。turn915388view3 | 每日綜合設計探索 |
| Motion.page Showcase | WordPress Motion Website | 社群作品展示，可依最新、熱門與隨機瀏覽。turn863104search6 | WordPress／GSAP 動畫參考 |
| Screenlane | Mobile App、Web App、Marketing Site UI | 依產品、畫面與 UI Component 瀏覽真實產品案例。turn337197search5 | UI Layout 與產品介面參考 |
| Mindsparkle Mag | Web、Motion、Interactive、Branding | 提供 Website of the Day、案例介紹與 Motion Design 標籤。turn171766search3 | Art Direction、品牌與網站整合 |
C. Website Awards 與高品質網站策展平台
| 網站 | 類型 | 特色 | Motion 參考價值 |
|---|---|---|---|
| Awwwards | 國際網站獎項＋Gallery | 評選設計師、開發者、工作室與數位體驗，並提供 Animation、WebGL、3D 等分類。turn936378search4turn863104search7 | 極高 |
| CSS Design Awards | Website Awards | 主要評選 UI、UX、Innovation，提供 Nominees 與 Website of the Day。turn936378search0 | 高 |
| Webby Awards Gallery | 全球數位作品獎項 | 可查詢 Website、Mobile Site、Data Visualization、Art & Design 等 Winners 和 Nominees。turn936378search30 | 高 |
| Orpetron | Web Design Awards＋Inspiration | 全球網站評選、Weekly Picks、文章與設計作品展示。turn936378search3turn936378search11 | 高 |
| Siteinspire | 人工策展 Website Gallery | 可依 Style、Type、Subject、Platform 與設計工作室篩選。turn936378search1 | 中高 |
| Lapa Ninja | Landing Page Gallery | 完整頁面截圖、網站錄影、分類、歷史版本與搜尋功能。turn936378search2turn893842search22 | 高 |
| One Page Love | One-page Website Gallery | 同時收集完整網站與個別 Sections，適合定位 Hero、Feature、Pricing 等區塊。turn936378search6 | 中高 |
| Land-book | Website Design Gallery | 提供 Websites、Sections、Mobile、Motion、OG Images、Headlines 等分類。turn893842search3 | 高 |
| Minimal Gallery | Curated Website Gallery | 聚焦乾淨、精緻與極簡網站，持續收錄全球設計作品。turn893842search2 | 中 |
| Httpster | Curated Website Gallery | 偏 Typography、Minimal、Brutalist 與高質感網站。turn936378search24 | 中 |
| Siiimple | Minimalist Web Gallery | 長期策展的極簡網站資料庫，適合研究克制型 Motion 與排版。turn893842search9 | 中 |
| Web Design Inspiration | Daily Inspiration Gallery | 由編輯人工挑選網站，可依類別、風格與產業尋找案例。turn171766search2turn171766search10 | 中 |
| Mindsparkle Mag | Design Magazine＋SOTD | 收錄 Interactive Design、Motion Design、WebGL、Three.js 與網站案例。turn171766search3 | 高 |
| Recent | 綜合設計策展 | 同時涵蓋 Website、Interface、Motion、3D、Typography 與 Branding。turn936378search5 | 中高 |
| Made in Webflow | Community Showcase | 可依 Animation、Interactions、CMS 與 Cloneable 篩選社群網站。turn697796search16 | 高 |
依使用目的選擇
| 你的目的 | 最適合的平台組合 |
|---|---|
| 複製 Prompt 到 Claude Code、Cursor、Lovable | MotionSites、21st.dev |
| 直接取得高品質 Motion 原始碼 | Made With GSAP、Motion.dev、Aceternity UI、Magic UI |
| React Landing Page 快速加入動畫 | React Bits、Animata、Motion Primitives、Animate UI、Hover.dev、Cult UI |
| Framer 直接複製 Component／Interaction | Framer University、SegmentUI、Framer Marketplace、Frameblox |
| Webflow 直接 Clone | Made in Webflow、Showcased |
| 找完整網站的動畫錄影 | Landing Love、Lapa Ninja |
| 建立 UI Micro-interaction 資料庫 | Ripplix、60fps、Design Spells、Mobbin、Page Flows |
| 找得獎級 Creative Website | Awwwards、CSS Design Awards、Webby、Orpetron |
| 找高品質 Landing Page 排版 | Land-book、Lapa Ninja、One Page Love、Siteinspire |
| 找克制、極簡的網站方向 | Minimal Gallery、Httpster、Siiimple |