# Syed Subhan 推出 Amicro 程式庫讓開發者透過 CLI 加入元件

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 原作者：Kiyotaka (@SubhanHQ) · 策展與摘要：EasyVibeCoding · 平台：X (Twitter) · 熱度：🔥🔥 · 日期：2026-07-27

> 原始來源：https://x.com/SubhanHQ/status/2080986155047440808

## 中文摘要

Syed Subhan 推出 Amicro 程式庫讓開發者透過 CLI 加入元件。

**專案核心特色與背景**
開發者 Syed Subhan 於 2026 年 7 月發布了名為 Amicro 的開源專案。這是一套專為 React、Next.js 與 Vite 專案設計的高級微互動（micro-interactions）與過場動畫精選元件庫，目標是讓開發者用一行 CLI 指令，就能為應用程式加上流暢且具現代感的互動效果。作者在原推列出的重點是 Loaders、卡片 hover、按鈕互動與流暢過場，一行 CLI 指令就能加進專案；官網的 loader 目錄分成 Dots & Pulses、Rings & Spinners、Bars & Waves、Geometric Shapes 與 Text & Interface 五類，合計逾百個 loader。該專案推出後在 GitHub 上迅速獲得超過 660 個 Star，可在 [amicro.vercel.app](http://amicro.vercel.app) 試用，並支援透過 npm、yarn 或 pnpm 安裝。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1785113364380-i6n5x7to.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/62d6f245e36d0bda.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> Amicro 官網的 loader 元件目錄：Dots & Pulses、Rings & Spinners、Bars & Waves、Geometric Shapes、Text & Interface 等分類。

**快速安裝與 CLI 指令操作**
使用者可以透過以下指令在專案中初始化並載入 Amicro 的元件：

1. 在專案中安裝核心套件：
```bash
npm install @subhanhq/amicro
# 或
yarn add @subhanhq/amicro
# or
pnpm add @subhanhq/amicro
```

2. 初始化專案設定：
```bash
npx @subhanhq/amicro@latest init
```

3. 將個別元件（如下載按鈕或特定的卡片互動元件）直接加入程式碼庫中：
```bash
npx @subhanhq/amicro@latest add download-button
# 新增特定卡片互動元件
npx @subhanhq/amicro@latest add card-arc-5
```

**shadcn/ui 註冊表整合**
Amicro 支援與 shadcn 進行無縫整合，開發者可以直接利用 shadcn CLI 安裝 Amicro 的動態基礎元件（motion primitives）、自訂 hook 以及彈簧動畫（spring）預設值。
- 直接透過公開 Raw URL 安裝單一元件：
```bash
npx shadcn add https://raw.githubusercontent.com/Subhan-code/Amicro--Micro-transitions-/main/registry/ui/fade-in.json
```
- 建議在專案的 `components.json` 中的 `registries` 欄位加入 `@amicro` 命名空間對應：
```json
{
  "registries": {
    "@amicro": "https://raw.githubusercontent.com/Subhan-code/Amicro--Micro-transitions-/main/registry/{name}.json"
  }
}
```
README 也提供 namespace 寫法，設定完成後即可直接透過名稱安裝：
```bash
# 安裝進場過場元件（置於 components/amicro/ 目錄下）
npx shadcn add @amicro/fade-in
npx shadcn add @amicro/fade-up
npx shadcn add @amicro/zoom-in

# 安裝懸停與文字元件
npx shadcn add @amicro/tilt-card
npx shadcn add @amicro/magnetic-button
npx shadcn add @amicro/text-reveal

# 安裝 hook 與公用程式
npx shadcn add @amicro/use-scroll-progress
npx shadcn add @amicro/presets
```

> 實測提醒：repo 現況把元件放在 `registry/ui/`、`registry/hooks/`、`registry/lib/` 子目錄下，而 namespace 樣板會解析成 `registry/{name}.json`，因此 `@amicro/fade-in` 目前會 404；要能跑請改用上面的完整 Raw URL 寫法。

**豐富的卡片排版與互動元件**
Amicro 提供多種佈局與互動效果的卡片元件，滿足不同的介面設計需求：
- **ARC (5 Cards)**（`npx @subhanhq/amicro@latest add card-arc-5`）：由 5 個項目組成、形成整齊優雅弧形的扇形卡片佈局。
- **ARC (7 Cards)**（`npx @subhanhq/amicro@latest add card-arc-7`）：可容納 7 個項目的加大版弧形卡片佈局。
- **Long ARC (5 Cards)**（`npx @subhanhq/amicro@latest add card-long-arc-5`）：向兩側大幅延伸平移的寬幅弧形卡片。
- **Linear Spread**（`npx @subhanhq/amicro@latest add card-linear-spread`）：無旋轉、水平橫向滑動的卡片列。
- **Corner Fan**（`npx @subhanhq/amicro@latest add card-corner-fan`）：從固定左下角原點錨點向外放射狀展開的元素。
- **Stamp Arc**（`npx @subhanhq/amicro@latest add card-stamp-arc`）：帶有動態弧度、間距與偏移控制的穿孔郵票風格卡片。
- **Cascade Stagger**（`npx @subhanhq/amicro@latest add card-cascade-stagger`）：以對角線階梯式垂直錯開部署的卡片。
- **Scatter Desk Deal**（`npx @subhanhq/amicro@latest add card-scatter-spread`）：滑鼠懸停時會散開成重疊手牌佈局的互動效果。
- **Wheel Radial Fan**（`npx @subhanhq/amicro@latest add card-wheel-fan`）：以中心錨點為圓心、向外呈半圓形放射展開的卡片。
- **Interactive Carousel**（`npx @subhanhq/amicro@latest add card-carousel`）：具備圓點指示器與前一頁/後一頁控制項的 3D 動態輪播元件。
- **CoverFlow Carousel**（`npx @subhanhq/amicro@latest add card-cover-flow`）：沿著透視路徑展示卡片的高級 3D CoverFlow 輪播。
- **Time Machine Stack**（`npx @subhanhq/amicro@latest add card-time-machine`）：具備時間軸拖曳控制器的蘋果風格透視深度卡片堆疊。

**技術規格與社群迴響**
該專案基於 `motion/react` 提供硬體加速動畫，採用零執行期開銷（zero runtime overhead）的複製到程式碼（copy-to-code）模式，讓原始的 TSX 原始碼直接寫入專案中，並完整支援深色與淺色模式。系統需求方面，需使用 Node.js `v18.0.0` 或更高版本、React `^18.0.0` 或 `^19.0.0`、Tailwind CSS `v3` 或 `v4`，以及 `motion` 或 `framer-motion`。專案採用 MIT 授權條款釋出。社群開發者與使用者紛紛回饋此庫能有效改善 AI 產出介面的設計質感，提供實用的設計靈感；也有人指出多數效果依賴滑鼠 hover、行動裝置上會失色，作者回應正在為行動端準備新東西。

## 媒體內容

**Amicro 官網的 loader 元件目錄：Dots & Pulses、Rings & Spinners、Bars & Waves、Geometric Shapes、Text & Interface 等分類。**

**影片中的 Prompt 與操作**

操作步驟：

1. （00:00）瀏覽網頁頂部導覽列及首個物理模擬元件
2. （00:01）向下捲動瀏覽 Dots & Pulses、Rings & Spinners、Bars & Waves、Geometric Shapes 與 Text & Interface 等各分類互動元件

## 標籤

CLI, 開源專案, 新產品, Web, Next, React, Amicro, shadcn