Animate-UI：shadcn/uiユーザー必見のアニメーションコンポーネント集

はじめに

Webサイトやアプリを作っていると、ボタンのホバーエフェクトとかモーダルの開閉アニメーションとか、地味に面倒な部分がある。自分で一から実装すると時間がかかるし、かといって既存のUIライブラリだとカスタマイズが効かなかったりする。

そんな悩みを解決してくれるのがAnimate-UIというライブラリなんですよね。

正直なところ、shadcn/uiを使っている人なら導入のハードルはほぼゼロだと思います。同じCLIで追加できるし、コンポーネントのコードはプロジェクトにコピーされるから自由にカスタマイズできる。個人的にはこの「コピーファースト」のアプローチがかなり気に入っています。

Animate-UIとは

Animate-UIは、React、TypeScript、Tailwind CSS、そしてFramer Motion（Motion）を使って構築されたオープンソースのUIコンポーネント集です。GitHubでは3,000以上のスターを獲得していて、コミュニティも活発に活動しています。

技術スタック

React - UIフレームワーク
TypeScript - 型安全性
Tailwind CSS - スタイリング
Framer Motion - アニメーション
Radix UI / Base UI - アクセシビリティ対応のプリミティブ

主な特徴

まず特筆すべきは、すべてのコンポーネントにアニメーションが組み込まれている点。ボタンのホバー、モーダルの開閉、アコーディオンの展開など、よくあるインタラクションに適切なモーションが設定されています。

もう一つ重要なのが、shadcn/uiと同じ導入方法という点。CLIでコンポーネントを追加すると、コードがプロジェクトにコピーされる仕組みです。node_modulesに隠れないから、必要に応じて自由に修正できます。これ、意外と重要なんですよね。

インストール方法

shadcn/uiを使ったことがある人なら、ほぼ同じ手順で導入できます。

1. shadcn/uiの初期化

まだshadcn/uiをセットアップしていない場合は、先に初期化します。

# npm
npx shadcn@latest init

# pnpm
pnpm dlx shadcn@latest init

# yarn
yarn shadcn@latest init

# bun
bunx --bun shadcn@latest init

2. コンポーネントの追加

使いたいコンポーネントをCLIで追加します。

# 例：Sliding Numberコンポーネントを追加
npx shadcn@latest add @animate-ui/primitives-texts-sliding-number

これでコンポーネントがプロジェクトのcomponents/animate-ui/配下にコピーされます。

基本的な使い方

Buttonコンポーネント

一番よく使うであろうButtonコンポーネントを例に説明します。

import { Button } from '@/components/animate-ui/buttons/button';

export default function Example() {
  return (
    <div className="flex gap-4">
      <Button>デフォルト</Button>
      <Button variant="accent">アクセント</Button>
      <Button variant="outline">アウトライン</Button>
      <Button variant="ghost">ゴースト</Button>
    </div>
  );
}

主要なprops

prop	型	デフォルト値	説明
`variant`	"default" \| "accent" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	"default"	ボタンのスタイル
`size`	"default" \| "sm" \| "lg" \| "icon"	"default"	サイズ
`hoverScale`	number	1.05	ホバー時の拡大率
`tapScale`	number	0.95	クリック時の縮小率

個人的には、hoverScaleとtapScaleでアニメーションの強度を調整できるのが良いと思います。派手すぎると思ったら数値を下げればいいだけなので。

アニメーション背景

ヒーローセクションとかで使えるアニメーション背景も用意されています。

import { GradientBackground } from '@/components/animate-ui/backgrounds/gradient';

export default function Hero() {
  return (
    <div className="relative h-screen">
      <GradientBackground />
      <div className="relative z-10">
        <h1>コンテンツ</h1>
      </div>
    </div>
  );
}

背景系は7種類あって、Bubble、Fireworks、Gradient、Gravity Stars、Hexagon、Hole、Starsから選べます。

利用可能なコンポーネント

カテゴリ別に整理すると、こんな感じです。

Animate UI オリジナル（7種類）

Avatar Group、Code、Code Tabs、Cursor
GitHub Stars Wheel、Tabs、Tooltip

Radix UIベース（18種類）

Accordion、Alert Dialog、Checkbox、Dialog、Dropdown Menu
Files、Hover Card、Popover、Progress、Radio Group
Sheet、Sidebar、Switch、Tabs、Toggle、Toggle Group、Tooltip
Preview Link Card

Base UIベース（15種類）

Accordion、Alert Dialog、Checkbox、Dialog、Files
Menu、Popover、Preview Card、Progress、Radio
Switch、Tabs、Toggle、Toggle Group、Tooltip

ボタン系（8種類）

Button、Copy Button、Flip Button、GitHub Stars Button
Icon Button、Liquid Button、Ripple Button、Theme Toggler Button

背景系（7種類）

Bubble、Fireworks、Gradient、Gravity Stars
Hexagon、Hole、Stars

コミュニティ製（12種類）

Flip Card、Motion Carousel、Radial Intro、Radial Menu
Management Bar、Notification List、Pin List、Playful Todolist

コンポーネント数としてはかなり充実していると思います。

実践的なユースケース

ランディングページのCTAボタン

ユーザーのアクションを促すボタンには、適度なアニメーションがあると効果的です。

import { Button } from '@/components/animate-ui/buttons/button';
import { RippleButton } from '@/components/animate-ui/buttons/ripple-button';

export function CTASection() {
  return (
    <div className="flex flex-col items-center gap-4">
      <RippleButton size="lg" variant="accent">
        今すぐ始める
      </RippleButton>
      <Button variant="ghost">
        詳しく見る
      </Button>
    </div>
  );
}

RippleButtonはクリック時に波紋エフェクトが出るので、メインのCTAに使うと目を引きます。

ダッシュボードのサイドバー

アプリケーションでよく使うサイドバーも用意されています。

import { Sidebar } from '@/components/animate-ui/radix/sidebar';

export function DashboardLayout({ children }) {
  return (
    <div className="flex">
      <Sidebar>
        {/* ナビゲーション項目 */}
      </Sidebar>
      <main className="flex-1">
        {children}
      </main>
    </div>
  );
}

開閉時のアニメーションが自然で、モバイル対応も考慮されています。

フォームの入力フィードバック

Progressコンポーネントを使えば、フォームの入力完了度を視覚的に表示できます。

import { Progress } from '@/components/animate-ui/radix/progress';

export function FormProgress({ currentStep, totalSteps }) {
  const progress = (currentStep / totalSteps) * 100;

  return (
    <div className="w-full">
      <Progress value={progress} />
      <p className="text-sm text-muted-foreground mt-2">
        ステップ {currentStep} / {totalSteps}
      </p>
    </div>
  );
}