Amicro とは？shadcn/ui対応のReactマイクロアニメーション集を徹底解説
GitHubで急上昇中のAmicro（1228スター）は、Reactアプリにプレミアムなマイクロインタラクション・トランジション・カードレイアウトを1行のCLIコマンドで追加できるオープンソースコンポーネントライブラリです。Framer Motionの後継となるMotionライブラリを動力源とし、shadcn/uiのレジストリ形式にも対応しているため、既存のNext.jsやViteプロジェクトに摩擦なく統合できます。フロントエンド開発者が「アニメーションを自前実装するのは面倒」という問題を、コピペ不要のCLIアプローチで解決した点が人気の理由です。
Amicro とは？Reactマイクロアニメーションライブラリの概要
Amicro（npmパッケージ名: @subhanhq/amicro）は、UIの体験品質を大幅に向上させるマイクロインタラクションコンポーネントをコレクションとして提供するライブラリです。単なるCSSアニメーションではなく、物理ベースのスプリングアニメーションをMotionで実現しており、ユーザーの操作に「重力感」や「弾力感」を付与できます。
提供されるコンポーネントは大きく3カテゴリに分かれます。
- Entrance Transition（登場アニメーション） — fade-in・fade-up・zoom-inなど、ページロード時やコンポーネントマウント時の表示演出
- Interactive（インタラクティブ） — tilt-card・magnetic-button・text-revealなど、ホバーや操作への反応
- Card Layout（カードレイアウト） — ARC・Linear Spread・CoverFlow・Carouselなど、洗練されたカード配置
npmパッケージとshadcn/uiの二刀流
Amicroはnpm install @subhanhq/amicroでのパッケージインストールと、shadcn/ui互換のnpx shadcn add @amicro/xxxの両方をサポートしています。shadcn/ui方式ではコンポーネントのソースコードが自プロジェクトにコピーされるため、詳細なカスタマイズが容易になります。
React トランジション コンポーネント ライブラリ — クイックスタート
インストール
npm install @subhanhq/amicro
# または
yarn add @subhanhq/amicro
pnpm add @subhanhq/amicro
CLIでのプロジェクト初期化
# React / Next.js / Vite プロジェクトで初期化
npx @subhanhq/amicro@latest init
コンポーネントの追加
# ボタンインタラクション
npx @subhanhq/amicro@latest add download-button
# カードレイアウト（5枚のARC配置）
npx @subhanhq/amicro@latest add card-arc-5
# ホバーアニメーション
npx @subhanhq/amicro@latest add tilt-card
shadcn/ui レジストリ経由での追加
// components.json に @amicro ネームスペースを追加
{
"registries": {
"@amicro": "https://raw.githubusercontent.com/Subhan-code/Amicro--Micro-transitions-/main/registry/{name}.json"
}
}
# 設定後はnpx shadcn add で直接インストール
npx shadcn add @amicro/fade-in
npx shadcn add @amicro/magnetic-button
npx shadcn add @amicro/text-reveal
shadcn Motion アニメーション 使い方 — 主要コンポーネント詳解
Entrance Transition（登場トランジション）
| コンポーネント | CLI | 動作 |
|---|---|---|
fade-in |
npx shadcn add @amicro/fade-in |
フェードイン |
fade-up |
npx shadcn add @amicro/fade-up |
下から上にフェード |
zoom-in |
npx shadcn add @amicro/zoom-in |
中心からズームイン |
Interactive（インタラクティブコンポーネント）
| コンポーネント | CLI | 動作 |
|---|---|---|
tilt-card |
npx shadcn add @amicro/tilt-card |
マウスに追従してカードが傾く |
magnetic-button |
npx shadcn add @amicro/magnetic-button |
カーソルに引き寄せられるボタン |
text-reveal |
npx shadcn add @amicro/text-reveal |
スクロールに合わせてテキストが現れる |
Scroll Hook
npx shadcn add @amicro/use-scroll-progress
# スクロール進捗を数値(0-1)で取得するカスタムフック
Presets（スプリングプリセット）
npx shadcn add @amicro/presets
# gentle / bouncy / stiff などのモーションプリセットを一括追加
FRamer Motion・shadcn/ui・Magic UIとの違い・なぜ今このツールか
Amicroは「Reactアニメーションライブラリ」という競争激しい市場に登場した新参ですが、既存ツールとの棲み分けが明確です。
Framer Motion / Motion との関係: AmicroはMotionライブラリ上に構築されており、競合ではなくMotionを使いやすくするアドオンです。Motion自体は低レベルなAPIを提供しますが、Amicroはその上に「実際のUIで使えるコンポーネント」をキュレーションしています。
shadcn/ui との関係: shadcn/uiはコンポーネントライブラリのインフラ（レジストリ方式・Tailwind統合）を提供しますが、アニメーション特化のコンポーネントはほとんど含まれません。Amicroはそのギャップを埋める位置づけです。
Magic UI / Aceternity UI との比較: 同種のアニメーションコンポーネント集である Magic UI や Aceternity UI と比べると、Amicroはカードレイアウト（ARC・CoverFlow等）の多様さに特徴があります。CLIによる直接追加方式はshadcn/uiユーザーに馴染みやすく、導入の敷居を下げています。
GitHubで1228スターまで急上昇した理由は、shadcn/uiのエコシステムが成熟するにつれて「shadcn/ui互換のアニメーション集」への需要が高まったことと、CLIという馴染みある操作感が相まったことです。
こんな人に向いている — 職種別活用シナリオ
フロントエンドエンジニア（React/Next.js開発者）
LPやSaaSダッシュボードの各セクションに登場アニメーションを追加したいとき、npx shadcn add @amicro/fade-up1コマンドで実装できます。アニメーションを0から実装する工数を削減し、Motionのプリセットを活用することでデザインの一貫性も保てます。
UIデザイナー（コードにも触れる）
Figmaでデザインしたカードレイアウトをインタラクティブなプロトタイプとして素早く実装したい場合、ARC・CoverFlow・Scatter Desk Dealなどのカードコンポーネントが即活用できます。コピーしてカスタマイズするshadcn/ui方式なので、Tailwindクラスの変更だけで見た目を調整できます。
フリーランスWeb開発者
クライアントの企業Webサイトやポートフォリオに「動きのある体験」を低工数で追加したい場合に最適です。1コマンドでコンポーネントをプロジェクトにコピーし、必要な部分だけをカスタマイズするアプローチは、短納期プロジェクトでも実践しやすい手法です。
使う前に知っておきたいこと — 依存関係とライセンス
必要な依存関係
AmicroはMotion（旧Framer Motion）とReact 18以上が必要です。TypeScriptプロジェクト（Next.js App Router, Vite+TypeScript）が対象で、plain JavaScriptでも動作しますが型補完の恩恵はありません。Tailwind CSSが前提となるコンポーネントが多く、Tailwind未使用プロジェクトへの適用は難易度が上がります。
shadcn/ui方式の特性
shadcn/ui経由でコンポーネントを追加すると、ソースコードがcomponents/amicro/配下にコピーされます。これはAmicroのnpmパッケージの更新を自動では受け取れないことを意味します。最新のコンポーネントを得るには再度npx shadcn addを実行する必要があります。
ライセンス
MITライセンスで商用利用・改変・再配布が自由です。コントリビューターが現在1名と少人数プロジェクトのため、長期的なメンテナンスは状況によって変動する可能性があります。
パフォーマンス考慮
Motionライブラリ自体が~50KBのバンドルサイズを持つため、アニメーション不要なページではtree-shakingや遅延読み込みの考慮が必要です。Next.js App Routerでは'use client'ディレクティブが必要なコンポーネントが含まれます。
まとめ — shadcn/ui時代のReactアニメーション標準候補
Amicroは「CLIで追加できるMotionアニメーション集」というシンプルな価値提案で1228スターを集めた、注目のReactコンポーネントライブラリです。shadcn/uiのレジストリ方式との親和性が高く、Next.js App Router環境での採用に特に向いています。Magic UIやAceternity UIに親しんでいる方にも違和感なく使え、カードレイアウトの豊富さが差別化になっています。Framer Motion/Motionを既に使っているプロジェクトへの導入コストは極めて低いため、まずはnpx @subhanhq/amicro@latest initで試してみることをおすすめします。
関連ツール・おすすめサービス
- DigitalOcean — Next.js・ReactアプリのホスティングならApp Platformでかんたんデプロイ
この技術を学ぶ
ReactとアニメーションUXに興味を持った方には、UdemyのReact・フロントエンドコースもおすすめです。
- 🎓 React・Next.js関連コース一覧 — セール時（最大90%OFF）を狙うとお得です
関連記事
この記事が役に立ったらシェアしてください