framer-motion

UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.

UI 套件，可快速打造美觀、動畫化的介面。可自訂、開源

為設計工程師打造的元件，使用 Tailwind CSS 樣式，完全相容 Shadcn，輕鬆複製貼上即可整合。MIT 授權 🤌

一套面向 Next.js 專案的專業化組件、hooks 與工具集。

使用 React、TypeScript、Tailwind CSS、Motion 和 Shadcn CLI 建構的全動畫、開源元件庫。瀏覽您可以安裝、修改並在專案中使用的元件清單。

一個利用 CSS Flexbox 強大功能的靈活佈局網頁應用

UI Layouts不僅僅是個庫。它是你完整的前端宇宙，擁有組件、效果、設計工具與即用區塊，讓你更快構建現代介面

個人作品集網站，使用 React 與 three.js 建置

一款現代化的 React 後台管理範本。基於 React 19、Vite 和 TypeScript。速度極快！

適用於 Vue 的 Motion 動畫庫。

這是對應 YouTube 影片的程式碼儲存庫。在此教學中，我們將建置並部署一個即時聊天應用程式。涵蓋主題：React.js、SCSS、Framer Motion、Sanity

使用 Tailwind CSS、shadcn/ui 與 Motion 建構、可用於網站的精美元件開源集合

Cali Castle 的個人網站

使用 framer motion 動畫化的 Next.js 引導精靈流程 / 產品導覽

React 的動態元件。複製、貼上，搞定。

⭐使用 Next.js、Tailwind CSS 和 Framer-motion 打造令人驚豔的作品集網站。如果您想學習如何製作，可以參考 Read me 檔案中提供的教學連結。

適用於 React、Next.js 及其他 JSX 框架的 UI 元件庫。基於 Tailwind CSS 建置，讓建立美觀、互動式與響應式的介面變得快速又簡單。

生產就緒的 UI 區塊、元件與完整頁面，提供 shadcn/ui 與 Base UI 版本，由 Framer Motion 驅動，並附帶 Landing Page Builder、Background Builder 與 Grid Generator。

建構於 Sonner 且具備 Framer Motion 動畫的黏著變形提示訊息元件

互動式 3D 開發者作品集，配備將每個鍵帽都化為技能的鍵盤。使用 Next.js、React、TypeScript、GSAP 與 Motion 打造。免費使用！

Svelte Magic UI、Svelte Aceternity UI，使用 Tailwind CSS 與 Framer Motion 建構的 Svelte 元件

適用於 React 的免費開源動畫 SVG 圖示，專為流暢的微互動、輕鬆自訂以及輕量級效能而打造。

使用 Motion 構建的靈活底部對話框（bottom sheet）元件，在兼顧無障礙功能（accessibility）的同時提供極為流暢的使用者體驗 🪐

Yamada 的 React UI 元件，由 Yamada 打造，為 Yamada 而生，使用 React 與 Emotion 構建。

為你的下一個專案打造的手工 Framer Motion 變體集合。

AI 原生、CLI 優先的 React 元件庫。擁有 160+ 個具備動畫、無障礙支援、可直接用於生產環境的元件，並支援適用於 Cursor、Claude 與 GitHub Copilot 的 MCP 伺服器。採用複製貼上架構——程式碼完全屬於你。

免費取得基於 Tailwind CSS 的預先建置元件、動畫與特效——透過 Framer Motion 實現。只需複製、貼上即可直接使用！

使用簡潔的複製貼上組件簡化您的 UI，這些組件能最小化 JavaScript、最大化 CSS、激發創造力，並賦予您完全擁有和理解程式碼的能力。

使用 Next.js + TypeScript + Tailwind CSS 搭配 Cloud Firestore 與 Storage 建立的 Twitter 複製版