本文重點：Motion Library 動態收藏是免費的網頁動態效果收藏庫，收錄 327 種效果，可依元件、時機、情境交叉篩選並線上預覽，也能一鍵複製描述動作與節奏的 AI 提示詞。
開發網站或應用程式介面時，經常會看到別人的作品有很漂亮的動態效果，自己卻說不出那個效果的名稱，也不知道要怎麼把它描述給 AI 聽？本文要介紹的「Motion Library」動態收藏是一個免費的網頁動態效果收藏庫，目前收錄 327 種效果，每個效果都能直接線上預覽，也能一鍵複製描述動作與節奏的 AI 提示詞，只要複製、貼給 AI 工具就能有個實作的起點。
這個動態圖庫集主要收錄很多動態效果，網站不需要註冊登入，打開就能瀏覽，介面與效果說明皆為繁體中文。
Motion Library 是什麼
Motion Library 動態收藏由 UI/UX 設計師 Hannah 整理，收錄「網頁上好看的動態效果」，剛好在 Threads 社群網站上看到討論就順手存下來，截至 2026 年 10 月底，共有 327 種效果，依技術分成 CSS 194 種、GSAP 119 種、Canvas 14 種。
收錄的效果有三種分類方式，可以交叉篩選：
| 分類方式 | 內容 |
|---|---|
| 元件 | 文字、按鈕、表單・控制項、卡片・群組、圖片・媒體、圖形・SVG、背景・氛圍、版面・頁面、游標，共 9 類 |
| 時機 | 進場、退場、切換、循環待機、懸停・點擊、捲動觸發、拖曳手勢，共 7 種 |
| 情境 | 標題・Hero、強調重點、數字資訊、背景裝飾、轉場切換、Logo・品牌、介面互動、捲動效果、App 介面，共 9 種 |
每個效果是一張卡片，包含編號、中英文名稱、一句話說明、時機與情境標籤、使用技術，以及最重要的「複製 AI 提示詞」按鈕。提示詞只描述動作、節奏與構圖，不指定顏色，貼到自己的專案時可以搭配自己網站的主題色。
簡單來說，Motion Library 就像是這些動態效果的「免費圖庫」，網站把預覽效果整理好直接給使用者看，遇到喜歡、想要複製的效果就取得提示詞，即可讓 AI 製作出相同的動態效果。
網站資訊
網站標題：Motion Library 動態收藏
網站連結：https://kittenjam-motion-library.vercel.app/
費用：網站未標示任何收費項目，瀏覽、預覽與複製提示詞都不需要註冊或登入。
使用教學
用瀏覽器開啟 Motion Library 動態收藏，首頁最上方是網站標題與目前收錄的效果總數，往下捲會依元件分組，從「文字」開始，依序是按鈕、表單・控制項、卡片・群組、圖片・媒體、圖形・SVG、背景・氛圍、版面・頁面，最後是游標。
每個分組標題旁會顯示該分類的收錄數量，在寫這篇文章時一共有 327 種效果。
透過首頁上方的「篩選器」功能，可以用下列方式縮小範圍：
- 搜尋框：輸入效果名稱或標籤。
- 技術下拉選單：選「CSS」、「GSAP」或「Canvas」，想要不依賴函式庫的效果，可以先選 CSS。
- 元件、時機、情境三列標籤：可以交叉選擇，例如「按鈕 × 懸停・點擊」或「卡片・群組 × 進場」，每個標籤旁都有數量，選完後頁面會即時重排。
- 排序下拉選單：預設依元件分組，也可以改成「最新收錄」，一次看最近新增的效果。
組合沒有收錄效果時，頁面會顯示「這個組合目前還沒有收錄效果」，換個標籤再試即可。
每張卡片上方就是動態預覽，互動類的效果可以直接用滑鼠移動、捲動或拖曳試玩。
預覽的文字效果預設使用範例文字，如果想看看自己的標題套上去的樣子，可以在篩選面板的「自訂預覽文字」欄位輸入文字（下圖圈選處），文字類效果的預覽會跟著改變，少數固定文字的效果不會套用，算是蠻有趣的功能。
找到喜歡的效果後，按卡片下方的「複製 AI 提示詞」，按鈕會短暫顯示「已複製」，提示詞會用文字說明效果的外觀、動作順序、節奏與時長，例如閃電砸落的提示詞會描述強光閃爍、文字從放大瞬間縮回、落地輕微震動與整段約 2.4 秒的節奏。
把複製的提示詞貼到常用的 AI 工具，再補上自己的需求，例如：
- 說明要套用的元素，例如「首頁主標題」或「CTA 按鈕」。
- 說明專案環境，例如純 HTML、WordPress、React 或 Tailwind，以及是否允許使用 GSAP。
- 補上網站的主題色與字體，因為提示詞本身不含顏色。
- 請 AI 提供可以直接貼上的程式碼，並說明如何在手機上關閉或簡化動畫。
生成後在瀏覽器實際測試，再依畫面微調時長與強度，下圖就是我使用 Claude 實作出來的「雷射切斷」效果，除了可預覽的動畫效果，下方會有 CSS 程式碼能直接複製使用。
順帶一提，如果想看更多「複製提示詞再交給 AI 做成動畫」的例子，可以參考站內介紹過的 Claude Opus 5.5 影片作品集，每支作品都附有原作者的提示詞與即時重製版。
網站右下角有「我要投稿」按鈕，點開後可以填寫效果名稱或描述、參考連結與圖片或影片、你的稱呼，整理者表示會考慮收錄，若手邊有不錯的動態效果想要分享給更多人使用，可以在 Motion Library 以投稿方式提供給站方。
使用前的提醒
截至 2026 年 10 月，網站頁尾說明預覽動畫是示意重製，名稱與描述屬於原作者整理，並列出兩則 Threads 貼文作為參考來源，同時標示「僅供個人參考學習」，多少還是可能有風險，站上提供的是描述效果的提示詞，並非可以直接商用的程式碼，如果打算用在商業專案，建議先自行確認效果原作者的授權。
AI 依提示詞生成的結果會因工具與專案環境而有差異，需要自己測試與微調，同時也要留意動畫對網頁效能的影響，例如在行動裝置簡化動畫，或尊重使用者設定的減少動態效果，頁面本身會載入 GSAP 與多個外掛來呈現預覽，舊電腦或低階手機可能感覺較吃力，卡頓時可以先用篩選縮小顯示範圍。
常見問題
Motion Library 要付費或註冊嗎？
網站未標示任何收費項目，瀏覽、預覽與複製提示詞都不需要註冊或登入。
Motion Library 有中文介面嗎？
有。介面與效果說明皆為繁體中文，每個效果另附英文名稱。
Motion Library 的效果可以商用嗎？
站方標示名稱與描述屬原作者整理，預覽動畫為示意重製，僅供個人參考學習。打算用在商業專案的話，建議先自行確認效果原作者的授權。
貼上提示詞後，AI 會做出一模一樣的效果嗎？
不一定。提示詞描述的是動作、節奏與時長，實際結果會因工具與專案環境而有差異，需要自己補上網站主題色，並在瀏覽器測試與微調。
不想錯過好用的免費資源嗎？
已有 3.5 萬位讀者訂閱，新文章直接寄到你的信箱。
