Amicro：Motion を活用した軽量な React マイクロインタラクション UI 集

Amicro は、開発者の Syed Subhan が公開した React 向けのマイクロインタラクションおよび画面遷移コンポーネント集です。手触りの良い細やかなアニメーションとカードレイアウトを厳選して収録しています。

巨大な npm パッケージを依存関係に追加する従来のアプローチとは異なり、shadcn/ui で主流となった copy-to-code 方式を採用しています。TSX 形式のソースコードを自分のプロジェクト内に直接取り込んで使うため、追加のランタイム負荷はゼロで、カスタマイズも自由自在です。

何ができるか

Amicro は手当たり次第に数を増やすのではなく、完成度の高い洗練されたアニメーションに絞って提供されています。

要素のフェードインやスライドインを担う fade-in、fade-up、zoom-in といった導入系アニメーションはもちろん、文字を印象的に出現させる text-reveal も用意されています。また、カーソルに合わせて立体的に傾く tilt-card や、吸い付くような動きの magnetic-button、状態変化を伴う download-button、曲線を活かした card-arc-5 など、触っていて気持ちのいい UI パーツが揃っています。

ビジュアルコンポーネントだけでなく、スクロール進捗を監視する use-scroll-progress などのカスタムフックや、自然なスプリング挙動をまとめたプリセットも含まれています。

アニメーションの処理は motion/react を採用しており、ハードウェアアクセラレーションによって滑らかな描画を実現しています。ライトモードとダークモードの配色にも標準で対応しています。

導入手順と要件

動作環境としては、Node.js 18 以上、React 18 または 19、Tailwind CSS v3 または v4、そしてアニメーションライブラリの motion または framer-motion が必要です。

Amicro 専用の CLI を使えば、React、Next.js、Vite の環境で npx @subhanhq/amicro@latest init を実行して初期化し、add コマンドで必要なコンポーネントを追加できます。

さらに shadcn CLI とも完全な互換性があります。プロジェクトの components.json に @amicro のレジストリ設定を追記するだけで、npx shadcn add @amicro/tilt-card のように名前を指定して直接コンポーネントを配置できます。GitHub の Raw URL を直接指定して個別に取り込むことも可能です。

ライセンスは MIT で、ソースコードはすべて GitHub 上で公開されています。

なぜ重要か

Tailwind CSS や shadcn/ui をベースにプロダクトを開発している個人開発者やフロントエンドエンジニアにとって、手軽に UI の質感を底上げできる実用的な選択肢です。心地よいスプリングアニメーションを自前で一から調整するのは手間がかかりますが、Amicro を使えば抑制の効いた高品質な動態を即座に導入できます。

ソースコードを直接プロジェクトにコピーする設計のため、パッケージの更新による破壊的変更やバンドルサイズの肥大化を気にする必要がありません。ボタンひとつ、カードひとつを取り入れるだけでも、プロダクトの洗練度を確実に高めてくれます。