有人為 shadcn/ui 做了 75 個動畫組件，開源免費，複製粘貼就能用
整理版優先睇
cult/ui 為 shadcn/ui 提供 75+ 免費動效組件，複製源碼即可用，接入零成本
呢篇文章係介紹 cult/ui，一個專為 shadcn/ui 設計嘅動效組件擴展庫，由 nolly-studio 開發，GitHub 4.2k Star，MIT 協議，免費可商用。作者想解決嘅問題係：shadcn/ui 生態欠缺高質素動效組件，開發者想加動畫需要自己寫 Framer Motion 或者拼湊 demo。整體結論係：cult/ui 以 shadcn 嘅方式（複製源碼、完全可控）提供 75+ 組件，幾乎無接入成本，適合多數用 shadcn 搭建 SaaS 產品或官網嘅場景。
cult/ui 唔係傳統 npm 包，而係直接將 TypeScript 源碼複製到項目，用戶可以隨意修改，唔受版本升級幹擾。呢個思路嘅好處係動效組件需要同設計系統深度結合，直接拎源碼改顏色、時長、曲線都好方便。技術棧用 Tailwind CSS v4 + TypeScript + Framer Motion，同 shadcn/ui 一致。
組件分為視覺效果類（背景動畫、文字動效）、卡片容器類（懸停光效、3D 視差）、交互控件類（動效按鈕、滑塊）、營銷組件類（標籤、公告欄）。上手可以透過 shadcn CLI 安裝或者手動複製。免費版已經夠用，另外有付費嘅 Cult Pro 同 AI SDK Agents 針對更高需求。
- 結論：cult/ui 填補咗 shadcn/ui 欠缺動效組件嘅空白，以源碼複製方式提供 75+ 免費組件，MIT 許可，可商用。
- 方法：分發方式同 shadcn/ui 一樣，唔係 npm 包，而係直接複製源碼到項目，保證完全可控同易於定製。
- 差異：同傳統 npm 動效庫唔同，cult/ui 嘅源碼歸用戶所有，唔受版本升級影響，改顏色、時長、曲線都係一行 code 嘅事。
- 啟發：對於用 shadcn 搭建 SaaS 或官網嘅團隊，直接取用 cult/ui 組件比從零寫 Framer Motion 省力，尤其係 Landing Page 首屏嘅動效可以快速提升質感。
- 可行動點：可以即刻去 cult-ui.com 睇組件預覽，透過 `npx shadcn@beta add @cult-ui/組件名` 安裝，或者直接複製源碼，為項目加入動效。
cult/ui GitHub 倉庫
GitHub 開源倉庫，包含所有組件源碼
cult/ui 官方網站
組件預覽與文檔，每個組件有實時效果同完整代碼
背景：shadcn 生態嘅動效缺口
用 shadcn/ui 搭界面嘅人都知，組件質量高、定製方便，但 大多數組件都係靜態。想加漸入動效、懸停光暈、背景粒子，一係自己寫 Framer Motion，一係揾一堆零散 demo 拼湊。cult/ui 就係為咗解決呢個問題而存在。
點解 cult/ui 唔係 npm 包？
cult/ui 唔係傳統 npm 包，你唔會喺 package.json 見到 @cult-ui/components。佢嘅分發方式同 shadcn/ui 一模一樣：源碼歸你所有。每個組件嘅 TypeScript 代碼直接複製進你嘅項目，你可以隨意修改，唔受版本升級幹擾。
技術棧上，cult/ui 使用 Tailwind CSS v4 同 TypeScript，底層依賴 Framer Motion 做動畫，同 shadcn/ui 嘅技術路線完全一致。
75+ 組件覆蓋四大場景
組件按用途大致分成幾類，每個都對應實際開發嘅常見需求：
- 視覺效果類：背景動畫（漸變、粒子、噪聲）、光暈特效、文字動效（逐字出現、模糊漸入、打字機），用喺 Landing Page 首屏最多，幾行 code 就拉到質感差距。
- 卡片與容器類：帶懸停光效嘅卡片（Magic Card 效果）、邊框動畫、3D 視差卡片，常見於產品展示區、功能介紹模塊。
- 交互控件類：動效按鈕、滑塊、切換組件，比標準 shadcn 控件多咗進入/離開動畫，適合需要強調操作反饋嘅場景。
- 營銷組件類：標籤徽章、公告欄、特性展示網格，偏向 SaaS 官網或產品落地頁嘅排版需求。
每個組件頁面都有 實時預覽 同 完整代碼，可以先睇效果再決定用唔用。
上手：兩種方式，零成本接入
前提條件：項目需要已經完成 shadcn/ui 初始化，並安裝咗 Tailwind CSS v4。如果未初始化，先跑 pnpm dlx shadcn@latest init。
- 1 方式一（推薦）：用 shadcn CLI，喺 components.json 註冊 cult/ui 嘅註冊表地址，然後執行 npx shadcn@beta add @cult-ui/text-gif，組件源碼會下載到 components/ui/ 目錄。
- 2 方式二：手動複製，上 cult-ui.com 對應組件頁直接拎源碼，適合只需要一兩個組件、唔想改配置嘅情況。
import { TextGif } from "@/components/ui/text-gif"
export default function Hero() {
return (
<TextGif text="Build faster" />
)
}cult/ui 嘅組件 API 設計同 shadcn 保持一致，習慣咗 shadcn 寫法嘅話 基本冇學習成本。框架兼容 Next.js、Astro、Remix、Gatsby，React Server Components 下需要加 "use client" 指令——同 shadcn/ui 完全一致。
用 shadcn/ui 整界面嘅人應該有呢種感受：組件質量高、定製方便，但大多數組件都係靜態嘅。想加少少漸入動效、懸停光暈、背景粒子，一係自己寫 Framer Motion，一係揾一堆零散嘅 demo 拼湊。
cult/ui 就係為瞭解決呢件事而存在嘅。佢係一套專門為 shadcn/ui 設計嘅動效組件擴展庫，有 4.2k GitHub Star，MIT 協議，免費可商用。
佢係點樣運作嘅
cult/ui 唔係傳統意義上嘅 npm 包。你唔會喺 package.json 裏看到 @cult-ui/components 呢種依賴。
佢嘅分發方式同 shadcn/ui 本身一模一樣：源碼歸你所有。每個組件嘅 TypeScript 代碼直接複製入你嘅項目，你可以隨意修改，唔受版本升級幹擾。
呢個思路有佢嘅道理。動效組件往往需要同項目嘅設計系統深度結合，一旦封入 npm 包，定製反而麻煩。直接拎到源碼，改顏色、改時長、改曲線都係一行嘅事。
技術棧方面，cult/ui 使用 Tailwind CSS v4 同 TypeScript，底層依賴 Framer Motion 做動畫（視乎具體組件而定），同 shadcn/ui 嘅技術路線完全一致。
75+ 組件覆蓋邊啲場景
組件按用途大致可以分成幾類：
視覺效果類：背景動畫（漸變、粒子、噪聲）、光暈特效、文字動效（逐字出現、模糊漸入、打字機）。呢類組件用喺 Landing Page 嘅首屏最多，幾行代碼就可以拉開質感差距。
卡片同容器類：帶懸停光效嘅卡片（Magic Card 效果）、邊框動畫、3D 視差卡片。常見於產品展示區、功能介紹模塊。
交互控件類：動效按鈕、滑塊、切換組件。比標準 shadcn 控件多咗進入/離開動畫，適合需要強調操作反饋嘅場景。
營銷組件類：標籤徽章、公告欄、特性展示網格。呢啲偏向 SaaS 官網或產品落地頁嘅排版需求。
每個組件頁面都有實時預覽同完整代碼，可以睇咗效果先決定用唔用。
點樣上手
前提條件：項目需要已經完成 shadcn/ui 嘅初始化，並安裝咗 Tailwind CSS v4。
如果仲未初始化，先跑一下：
pnpm dlx shadcn@latest init
安裝單個組件有兩種方式：
方式一：透過 shadcn CLI（推薦）
在 components.json 中註冊 cult/ui 嘅註冊表地址，然後用 shadcn 命令直接安裝：
npx shadcn@beta add @cult-ui/text-gif
把 text-gif 替換成你需要嘅組件名就得。命令會將組件源碼下載到你項目嘅 components/ui/ 目錄下。
方式二：手動複製
進入 cult-ui.com 對應組件頁，直接複製源碼文件到項目裏。適合只需要一兩個組件、唔想改配置嘅情況。
安裝完成後直接引用：
import { TextGif } from"@/components/ui/text-gif"
export default function Hero() {
return (
<TextGif text="Build faster" />
)
}
cult/ui 嘅組件 API 設計同 shadcn 保持一致，習慣咗 shadcn 寫法嘅話基本冇學習成本。
免費版之外仲有啲咩
cult/ui 嘅免費組件係核心產品。除此之外，項目仲提供咗兩條付費線：
Cult Pro：高級營銷組件，主要係更複雜嘅動效 Block，例如接入 Gemini API 嘅圖像編輯組件、多步驟 AI Agent 交互模式等。適合喺 cult/ui 免費組件基礎上有更深定製需求嘅團隊。
AI SDK Agents：92+ 個 AI Agent 交互模式，包含競品分析 Agent、數據分析 Agent、品牌設計提取 Agent 等完整實現，以及 4 套包含鑑權、支付、數據庫嘅全棧 Next.js 模板。呢部分面向需要快速搭建 AI 產品嘅開發者，同動效組件係兩條相對獨立嘅產品線。
如果只係想俾 shadcn 項目加啲動效，免費嘅 75+ 組件已經夠用。
寫喺最後
cult/ui 解決嘅係一個好具體嘅問題：shadcn/ui 生態裏缺少高質量嘅動效組件。佢嘅選擇唔係另起爐灶，而係以 shadcn 嘅方式（複製源碼、完全可控）做動效擴展，所以幾乎冇接入成本。
佢唔係銀彈。如果項目需要高度定製嘅動效邏輯，或者團隊有能力自己封裝 Framer Motion，cult/ui 嘅價值會打折扣。但對於多數用 shadcn 搭建 SaaS 產品或官網嘅場景嚟講，從呢度直接取用組件係比從零寫省力嘅選擇。
框架兼容方面，Next.js、Astro、Remix、Gatsby 都支援，React Server Components 下需要加 "use client" 指令——呢個同 shadcn/ui 嘅使用方式完全一致。
GitHub：https://github.com/nolly-studio/cult-ui
掃碼直達 ⤵️ 或加微信 sanmu1598
用 shadcn/ui 搭界面的人應該有這種感受：組件質量高、定製方便，但大多數組件都是靜態的。想加一點漸入動效、懸停光暈、背景粒子，要麼自己寫 Framer Motion，要麼找一堆零散的 demo 拼湊。
cult/ui 就是為了解決這件事而存在的。它是一套專門為 shadcn/ui 設計的動效組件擴展庫，4.2k GitHub Star，MIT 協議，免費可商用。
它是怎麼工作的
cult/ui 不是傳統意義上的 npm 包。你不會在 package.json 裏看到 @cult-ui/components 這種依賴。
它的分發方式和 shadcn/ui 本身一模一樣：源碼歸你所有。每個組件的 TypeScript 代碼直接複製進你的項目，你可以隨意修改，不受版本升級的干擾。
這個思路有它的道理。動效組件往往需要和項目的設計系統深度結合，一旦封進 npm 包，定製反而麻煩。直接拿到源碼，改顏色、改時長、改曲線都是一行的事。
技術棧上，cult/ui 使用 Tailwind CSS v4 和 TypeScript，底層依賴 Framer Motion 做動畫（視具體組件而定），與 shadcn/ui 的技術路線完全一致。
75+ 組件覆蓋哪些場景
組件按用途大致可以分成幾類：
視覺效果類：背景動畫（漸變、粒子、噪聲）、光暈特效、文字動效（逐字出現、模糊漸入、打字機）。這類組件用在 Landing Page 的首屏最多，幾行代碼就能拉開質感差距。
卡片與容器類：帶懸停光效的卡片（Magic Card 效果）、邊框動畫、3D 視差卡片。常見於產品展示區、功能介紹模塊。
交互控件類：動效按鈕、滑塊、切換組件。比標準 shadcn 控件多了進入/離開動畫，適合需要強調操作反饋的場景。
營銷組件類：標籤徽章、公告欄、特性展示網格。這些偏向 SaaS 官網或產品落地頁的排版需求。
每個組件頁面都有實時預覽和完整代碼，可以先看效果再決定要不要用。
如何上手
前提條件：項目需要已經完成 shadcn/ui 的初始化，並安裝了 Tailwind CSS v4。
如果還沒初始化，先跑一下：
pnpm dlx shadcn@latest init
安裝單個組件有兩種方式：
方式一：通過 shadcn CLI（推薦）
在 components.json 中註冊 cult/ui 的註冊表地址，然後用 shadcn 命令直接安裝：
npx shadcn@beta add @cult-ui/text-gif
把 text-gif 替換成你需要的組件名即可。命令會把組件源碼下載到你項目的 components/ui/ 目錄下。
方式二：手動複製
進入 cult-ui.com 對應組件頁，直接複製源碼文件到項目裏。適合只需要一兩個組件、不想改配置的情況。
安裝完成後直接引用：
import { TextGif } from"@/components/ui/text-gif"
export default function Hero() {
return (
<TextGif text="Build faster" />
)
}
cult/ui 的組件 API 設計和 shadcn 保持一致，習慣了 shadcn 寫法的話基本沒有學習成本。
免費版之外還有什麼
cult/ui 的免費組件是核心產品。在此之外，項目還提供了兩條付費線：
Cult Pro：高級營銷組件，主要是更復雜的動效 Block，比如接入 Gemini API 的圖像編輯組件、多步驟 AI Agent 交互模式等。適合在 cult/ui 免費組件基礎上有更深定製需求的團隊。
AI SDK Agents：92+ 個 AI Agent 交互模式，包含競品分析 Agent、數據分析 Agent、品牌設計提取 Agent 等完整實現，以及 4 套包含鑑權、支付、數據庫的全棧 Next.js 模板。這部分面向需要快速搭建 AI 產品的開發者，和動效組件是兩條相對獨立的產品線。
如果只是想給 shadcn 項目加點動效，免費的 75+ 組件已經夠用。
寫在最後
cult/ui 解決的是一個很具體的問題：shadcn/ui 生態裏缺少高質量的動效組件。它的選擇不是另起爐灶，而是以 shadcn 的方式（複製源碼、完全可控）做動效擴展，因此幾乎沒有接入成本。
它不是銀彈。如果項目需要高度定製的動效邏輯，或者團隊有能力自己封裝 Framer Motion，cult/ui 的價值會打折扣。但對於多數用 shadcn 搭建 SaaS 產品或官網的場景來說，從這裏直接取用組件是比從零寫省力的選擇。
框架兼容方面，Next.js、Astro、Remix、Gatsby 均支持，React Server Components 下需要加 "use client" 指令——這和 shadcn/ui 的使用方式完全一致。
GitHub：https://github.com/nolly-studio/cult-ui
掃碼直達 ⤵️ 或加微信 sanmu1598