Amicro：基於 Motion 的 React 微互動元件庫，支援 shadcn CLI 引入

Amicro 是一個面向 React 專案的微互動與轉場動畫元件庫，由開發者 Syed Subhan 開源。它收集了一批精巧的互動細節、卡片佈局以及過渡動效，專門用來提升網頁介面的細膩質感。

它的設計思路不是打包成一個笨重的第三方 npm 依賴包，而是採用當下流行的 copy-to-code 模式。你可以直接把 TSX 原始碼拉到自己的專案程式碼倉庫裡，改起來毫無阻礙，也不會帶來多餘的執行時開銷。

它能做什麼

Amicro 目前包含的元件數量不算特別龐大，但每一個小動畫都調得相當剋制且精緻。

在基礎入場過渡方面，它提供了 fade-in、fade-up 和 zoom-in 等常用動效。在細節互動上，它包含支援懸停傾斜的 tilt-card、自帶吸附手感的 magnetic-button、文字漸顯效果 text-reveal，以及像 card-arc-5 這樣帶弧形動效的卡片元件和帶狀態切換的 download-button。

除了視覺元件，它還封裝了自定義 Hook 和動畫預設，比如用來監聽滾動進度的 use-scroll-progress，以及現成的彈簧動效預設 presets。

所有的動效都基於 motion/react 構建，支援硬體加速，保證滑動和互動時的幀率表現。同時元件在色彩上也照顧到了深色與淺色模式，切換主題時無需額外調整樣式。

怎麼用起來

專案對技術棧的要求很清晰：需要 Node.js 18 及以上版本，支援 React 18 或 19，樣式基於 Tailwind CSS v3 或 v4，動畫底層依賴 motion 或 framer-motion。

如果你習慣使用 Amicro 自帶的命令列，在 React、Next.js 或 Vite 專案中執行 npx @subhanhq/amicro@latest init 即可完成配置初始化，之後通過 add 命令按需新增元件。

更方便的是它完全相容 shadcn 社群生態。你可以在 components.json 檔案的 registries 里加上 @amicro 的源地址，直接執行 npx shadcn add @amicro/tilt-card 或 npx shadcn add @amicro/magnetic-button，元件原始碼就會自動放入 components/amicro 目錄下。

如果你不想改配置，也可以直接通過公開的 GitHub raw 連結用 shadcn 命令列抓取單個元件。

專案遵循 MIT 協議開源，原始碼和登錄檔均託管在 GitHub 上，可以免費用於個人或商業專案。

為什麼重要

對於正在用 Tailwind CSS 和 shadcn/ui 搭建介面的獨立開發者和前端工程師來說，Amicro 非常值得塞進工具箱。很多開發者想給頁面加一點吸睛的微動效，但自己手寫彈簧物理引數不僅耗時，還容易把介面做得花哨油膩。Amicro 提供的恰好是一套開箱即用、剋制且有設計感的高品質預設。

從架構上看，它緊跟 shadcn 引領的原始碼分發趨勢，既避開了傳統元件庫版本鎖死、樣式難覆蓋的痛點，又不需要承擔額外的執行時體積負擔。雖然目前的元件庫規模有限，但由於原始碼完全在自己手裡，按需拿走一兩個按鈕或卡片元件就能立刻給產品加分。