一句話結論
Motion Library（動態收藏）不是教學站，而是一個「動效靈感庫 ＋ 提示詞產生器」：把 9 大類、327 種網頁動態效果集中在一頁，每一種都能即時預覽，而且強調可以直接複製對應的 AI 提示詞 ——你不必抄程式碼，而是把提示詞貼給 Claude／Cursor，讓 AI 依照你自己的技術棧重寫一份。
網址：kittenjam-motion-library.vercel.app
它收錄什麼：9 大分類、327 種效果
| 分類 | 數量 | 內容樣貌（實際瀏覽所見） |
|---|---|---|
| 文字 | 105 | 逐字彈跳、遮罩揭露、SplitText 拆字、ScrambleText 亂碼解碼、3D 翻轉、萬花筒、隧道文字 |
| 按鈕 | 21 | hover 光暈、quickTo 彈性、@property 漸層、按住不放、滑動付款、Drag 拖曳 |
| 表單・控制項 | 17 | 浮動標籤、Stepper、Rating、驗證碼、input range、密碼錯誤抖動、通知提醒 |
| 卡片・群組 | 39 | Flip 翻牌、Grid stagger、Draggable＋Inertia、Skeleton、Toast、Steps、價目表 |
| 圖片・媒體 | 21 | clip-path 揭露、前後比較（BEFORE／AFTER）、Soft mask、視差、Velocity 驅動 |
| 圖形・SVG | 35 | DrawSVG 描邊、MorphSVG 變形、MotionPath 路徑、進度環、雷達圖、Blob |
| 背景・氛圍 | 36 | Canvas 粒子／trail／field、CSS blur bokeh、conic-gradient、feTurbulence 水波、Grain |
| 版面・頁面 | 37 | ScrollTrigger 捲動揭露、橫向捲動、Sticky 堆疊、Pull to refresh、Bottom sheet、Skeleton 頁 |
| 游標 | 16 | 自訂游標、Canvas trail、Click ripple、mix-blend-mode 反轉、放大鏡、Gooey 濾鏡 |
| 合計 | 327 | 上述數字直接取自頁面各分類標題，加總為 327 |
為什麼「複製提示詞」比「複製程式碼」更有用
這是它跟一般 CodePen／codepen 收集站最不一樣的地方。
| 舊做法：抄程式碼 | 新做法：抄提示詞 |
|---|---|
| 貼過來後要自己改成你的 class 名稱、你的框架、你的設計 token | 把提示詞丟給 AI，加上「用 Tailwind＋React，遵守我的變數命名」 |
| 範例常綁死 jQuery 或舊版 API | AI 會依你專案的版本重寫 |
| 你不一定看得懂每一行在做什麼 | 提示詞本身就是「這個效果怎麼做的」的白話說明 |
| 效果改一個參數要自己找位置 | 直接說「速度慢一半、改成由左進場」 |
對已經在用 Claude Code／Cursor 的人來說，「一份描述清楚的提示詞」比「一份要改 40 行的範例」更省時間，而且改動是可追溯的。
它用到哪些技術（你會在這裡看到什麼）
這個站本身就是「現代前端動效技術」的活教材，首頁到處都標了每個效果的實作方式：
| 技術族群 | 站上出現的具體項目 |
|---|---|
| GSAP 生態 | SplitText、ScrambleText、TextPlugin、DrawSVG、MorphSVG、MotionPath、Flip、Draggable、Inertia、ScrollTrigger（含 scrub／toggle／sticky）、Observer、quickTo、getVelocity、CustomBounce |
| 純 CSS | keyframes、transition、clip-path、@property、:has()、mix-blend-mode、background-clip、background-size、conic-gradient／radial-gradient、transform-origin、letter-spacing、grid-template-rows、CSS 3D |
| Canvas | 2D 粒子／trail／field／像素化、3D、spring、文字 |
| SVG | stroke-dashoffset 描邊、textPath、feTurbulence 雜訊、goo filter、blur／mask |
| JS 原生 | requestAnimationFrame、Math.atan2 角度計算、IntersectionObserver |
對正在學動效的人來說，這份「技術標籤」比效果本身更有價值 —— 你能很快看出「我想要的那種感覺，通常是用哪一套做的」。
怎麼用（四步）
- 挑分類：先想「我要文字效果還是版面效果」，從左側分類進去。
- 預覽：滑過去看動畫，有些是 hover、有些是 scroll 觸發、有些點擊才跑。
- 複製提示詞：頁面在說明裡明確標示「可預覽並複製 AI 提示詞」（實際在頁面上出現 5 次「提示詞／複製」字樣）。
- 交給你的 AI：貼給 Claude／Cursor／ChatGPT，補上你的技術棧與限制，例如「用 Vue 3 + Tailwind，動畫時間 400ms，尊重
prefers-reduced-motion」。
實務提醒：AI 產出的動效一定要自己驗一次 —— 特別是
prefers-reduced-motion（無障礙）、手機效能（Canvas 粒子在低階機會掉幀）、以及 CLS（版面位移）。
適合誰／誰不需要
適合：接案或做產品時需要「快速找到動效方向」的前端；已經在用 AI 寫程式、想提高「描述品質」的人；想學 GSAP／CSS 動效、需要大量可對照範例的學習者。
不需要：要「可直接商用、附授權與原始碼」的團隊（這個站沒有提供）；不需要動效、只做靜態頁面的人；想要完整教學（它給的是靈感與提示詞，不是 step-by-step 課程）。
三個使用前該知道的限制（誠實揭露）
| 限制 | 說明 |
|---|---|
| 沒有原始碼、沒有授權說明 | 頁面沒有任何 GitHub 連結，也找不到授權字樣。效果可以「參考」，但要直接搬去商用前，務必自行確認來源與權利 —— 也不能假設它是開源 |
| 是個人部署在 Vercel 的站 | 沒有官方 repo、沒有版本紀錄，站台隨時可能改版或下架；重要的效果建議自己截圖／錄影存一份 |
| 提示詞品質需要自己驗證 | 「可複製提示詞」是它主打的賣點，但提示詞寫得夠不夠精準、能不能一次生成到位，取決於效果複雜度；複雜的 3D／Canvas 效果通常還是要人工調 |
| 本文沒有逐項實測 327 個效果 | 分類數量取自頁面標題並加總驗算（9 類合計 327），但沒有逐一驗證每個效果都能正常播放 |
站內延伸閱讀
- HyperFrames：用程式碼做影片 — 同一套 GSAP 思維搬到影片時間軸上
- Mesh Avatar Studio：插畫變會動的虛擬形象 — 另一個「動態感」的實作方向
本文為獨立評測與整理，不含聯盟連結、未受任何廠商贊助。頁面內容與數量以 2026-10-28 瀏覽時為準。