Aceternity UI スキル

概要

Aceternity UIは、Next.jsアプリケーション向けに設計されたプレミアムで本番環境対応のReactコンポーネントライブラリです。Tailwind CSSとFramer Motionで構築された、美しくアニメーション化されたインタラクティブなコンポーネント100種以上を提供します。コンポーネントはshadcn CLIを介してインストールされ、コードベース内で直接カスタマイズできます。

主な機能:

• 100種以上のアニメーション化された本番環境対応コンポーネント
• Next.js 13+（App Router対応）向けに構築
• 完全なTypeScript対応
• Tailwind CSS v3+スタイリング
• Framer Motionアニメーション
• ダークモード対応
• コピー&ペーストフレンドリー（npmパッケージではありません）
• カスタマイズ用に完全なソースコードへのアクセス

前提条件:

• Next.js 13+（App Router推奨）
• React 16.8+
• Tailwind CSS v3+
• TypeScript（推奨）
• Node.js 18+（bun、npm、pnpm）

インストール

初期セットアップ

新規プロジェクトの場合:

# Next.jsプロジェクトを作成（bunを推奨）
bunx create-next-app@latest my-app
# または: npx create-next-app@latest my-app
# または: pnpm create next-app@latest my-app

cd my-app

# 以下のオプションを選択:
# - TypeScript: Yes
# - ESLint: Yes
# - Tailwind CSS: Yes
# - src/ directory: Optional
# - App Router: Yes (推奨)
# - Import alias: @/* (デフォルト)

shadcn CLI経由でAceternity UIを初期化:

# bunを使用（推奨）
bunx --bun shadcn@latest init

# npmを使用
npx shadcn@latest init

# pnpmを使用
pnpm dlx shadcn@latest init

# セットアップ中:
# - Style: New York (推奨)
# - Color: Zinc (または好みの色)
# - CSS variables: Yes (推奨)

レジストリを設定:

初期化後、components.jsonを更新してAceternyレジストリを追加します:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@aceternity": "https://ui.aceternity.com/registry/{name}.json"
  }
}

コンポーネントのインストール

shadcn CLI 3.0+を使用（名前空間付きレジストリ）:

# 特定のコンポーネントをインストール
bunx shadcn@latest add @aceternity/background-beams
# または: npx shadcn@latest add @aceternity/background-beams
# または: pnpm dlx shadcn@latest add @aceternity/background-beams

# コンポーネントが追加される先: components/ui/background-beams.tsx

手動インストール:

レジストリ方式が機能しない場合は、手動でインストールしてください:

1. 必要な依存関係をインストール:

bun add motion clsx tailwind-merge
# または: npm install motion clsx tailwind-merge

2. lib/utils.tsにユーティリティ関数を追加:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

3. ui.aceternity.comからコンポーネントコードをプロジェクトにコピー

セキュアなインストール

このセットアップでは複数のリモートコード実行（create-next-app、shadcn init、shadcn add）が行われます。インストール前に、サプライチェーンセキュリティのベストプラクティスに従ってください:

• ポストインストールスクリプトをブロック — npm config set ignore-scripts true（またはBun: デフォルトで無効）
• クールダウン期間 — 新しいパッケージバージョンをコミュニティで検証されるまで7日間待機
• インストール前に監査 — socket package score npm <pkg>を実行するか、socket npm install <pkg>を使用してパッケージを確認

dependency-upgradeスキルを読み込んで、Socket CLI統合、クールダウン設定、ロックファイル検証、CI強制を含む完全なセキュリティ設定を行います。

コンポーネントカテゴリ

1. 背景とエフェクト（28コンポーネント）

ヒーローセクションとフルページレイアウト用の、素晴らしいアニメーション背景とビジュアルエフェクトを作成します。

主なコンポーネント:

• Background Beams - SVGパスに従う、アニメーション化された光るビーム
• Background Gradient - 滑らかなグラデーション背景とトランジション
• Wavy Background - アニメーション化された波のパターン
• Aurora Background - オーロラにインスパイアされたアニメーション化されたグラデーション
• Sparkles - パーティクルスパークルエフェクト
• Meteors - 流星のアニメーション
• Spotlight - ダイナミックなスポットライトエフェクト
• Grid and Dot Backgrounds - 微妙なグリッド/ドットパターン
• Vortex - 渦巻きアニメーション
• Canvas Reveal Effect - キャンバスアニメーションでコンテンツを表示

使用例:

"use client";
import { BackgroundBeams } from "@/components/ui/background-beams";

export default function HeroSection() {
  return (
    <div className="h-screen w-full relative">
      <div className="max-w-4xl mx-auto z-10 relative p-8">
        <h1 className="text-5xl font-bold">Welcome</h1>
        <p className="text-xl mt-4">Beautiful animated backgrounds</p>
      </div>
      <BackgroundBeams />
    </div>
  );
}

使用時:

• ビジュアルインパクトが必要なヒーローセクション
• アニメーション背景のあるランディングページ
• 深さが必要なフルスクリーンセクション
• ポートフォリオまたはエージェンシーウェブサイト
• マーケティングページとコールトゥアクション

2. カードコンポーネント（15コンポーネント）

ホバーエフェクト、アニメーション、3D変形を備えたインタラクティブなカード。

主なコンポーネント:

• 3D Card Effect - CSS perspectiveと3D変形を使用したカード
• Card Hover Effect - 滑らかなホバーアニメーションとトランジション
• Expandable Card - より多くのコンテンツを表示するために拡張するカード
• Focus Cards - ホバー時にフォーカス/ハイライトされるカード
• Card Spotlight - マウスに従うスポットライトエフェクト
• Glare Card - ホログラフィック光沢エフェクト
• Wobble Card - 楽しい揺れるアニメーション
• Infinite Moving Cards - 自動スクロールするカードカルーセル
• Direction Aware Hover - カーソル方向に基づくホバーエフェクト

使用例:

"use client";
import { CardBody, CardContainer, CardItem } from "@/components/ui/3d-card";

export function ProductCard() {
  return (
    <CardContainer>
      <CardBody className="bg-gray-50 rounded-xl p-6">
        <CardItem translateZ="50" className="text-2xl font-bold">
          Product Title
        </CardItem>
        <CardItem translateZ="60" as="p" className="text-sm mt-2">
          Product description goes here
        </CardItem>
        <CardItem translateZ="100" className="w-full mt-4">
          <img src="/product.jpg" className="rounded-xl" alt="Product" />
        </CardItem>
      </CardBody>
    </CardContainer>
  );
}

使用時:

• 製品ショーケース
• 機能ハイライト
• ポートフォリオアイテム
• チームメンバープロフィール
• 料金プラン
• ブログ投稿プレビュー

3. スクロールとパラレックス（5コンポーネント）

魅力的なスクロールベースのアニメーションとパラレックスエフェクトを作成します。

主なコンポーネント:

• Parallax Scroll - パラレックススクロールを備えた画像
• Sticky Scroll Reveal - スクロール中にコンテンツが表示される
• Container Scroll Animation - アニメーション化されたスクロールコンテナ
• Hero Parallax - パラレックスヒーローセクション
• MacBook Scroll - MacBookスタイルのスクロールインタラクション

使用例:

import { StickyScroll } from "@/components/ui/sticky-scroll-reveal";

const content = [
  {
    title: "Feature One",
    description: "Description of feature one...",
    content: <div>Visual content here</div>
  },
  // More items...
];

export function Features() {
  return <StickyScroll content={content} />;
}

使用時:

• スクロールインタラクションを備えた機能ショーケース
• ストーリーテリングレイアウト
• 製品ツアー
• ビジュアルブレークを含むロングフォームコンテンツ
• インタラクティブなタイムライン

4. テキストコンポーネント（10コンポーネント）

見出し、タイトル、インタラクティブなタイポグラフィのためのアニメーション化されたテキストエフェクト。

主なコンポーネント:

• Text Generate Effect - 文字が1文字ずつ表示されるテキスト
• Typewriter Effect - タイピングアニメーション
• Flip Words - 単語ローテーションアニメーション
• Text Hover Effect - ホバー時のインタラクティブなテキスト
• Hero Highlight - グラデーションテキストハイライト
• Encrypted Text - マトリックススタイルの暗号化されたテキストエフェクト
• Colourful Text - グラデーションアニメーション化されたテキスト

使用例:

import { TypewriterEffect } from "@/components/ui/typewriter-effect";

const words = [
  { text: "Build" },
  { text: "amazing" },
  { text: "websites", className: "text-blue-500" }
];

export function Hero() {
  return <TypewriterEffect words={words} />;
}

使用時:

• ヒーロー見出し
• 注目を集めるタイトル
• ダイナミックなコンテンツ表示
• インタラクティブなランディングページ
• アニメーション化されたCTA

5. ボタン（4コンポーネント）

アニメーションとエフェクトを備えた拡張ボタンコンポーネント。

主なコンポーネント:

• Tailwind CSS Buttons - スタイルボタンのコレクション
• Hover Border Gradient - アニメーション化されたグラデーション境界
• Moving Border - アニメーション化された境界移動
• Stateful Button - トランジション付きマルチステートボタン

使用例:

import { MovingBorder } from "@/components/ui/moving-border";

export function CTAButton() {
  return (
    <MovingBorder duration={2000} className="p-4">
      <span>Get Started</span>
    </MovingBorder>
  );
}

6. ナビゲーション（5コンポーネント）

モダンなナビゲーションメニューとタブシステム。

主なコンポーネント:

• Floating Navbar - フローティングナビゲーションバー
• Navbar Menu - フル機能のナビゲーションメニュー
• Tabs - アニメーション化されたタブコンポーネント
• Resizable Navbar - レスポンシブナビゲーション
• Sticky Banner - スティッキーアナウンスメントバナー

7. 入力とフォーム（3コンポーネント）

拡張フォーム入力とファイルアップロードコンポーネント。

主なコンポーネント:

• Signup Form - アニメーション化されたサインアップフォーム
• Placeholders and Vanish Input - アニメーション化されたプレースホルダーを備えた入力
• File Upload - ドラッグ&ドロップファイルアップロード

使用例:

import { PlaceholdersAndVanishInput } from "@/components/ui/placeholders-and-vanish-input";

export function SearchBar() {
  const placeholders = [
    "Search for anything...",
    "What are you looking for?",
    "Type to search..."
  ];

  return (
    <PlaceholdersAndVanishInput
      placeholders={placeholders}
      onChange={(e) => console.log(e.target.value)}
      onSubmit={(e) => {
        e.preventDefault();
        console.log("submitted");
      }}
    />
  );
}

8. オーバーレイとポップオーバー（3コンポーネント）

アニメーション付きのモーダルダイアログとツールチップ。

主なコンポーネント:

• Animated Modal - スムーズアニメーション付きモーダル
• Animated Tooltip - エンター/イグジットアニメーション付きツールチップ
• Link Preview - ホバー時のリンクプレビューポップオーバー

使用例:

import { Modal, ModalBody, ModalContent, ModalTrigger } from "@/components/ui/animated-modal";

export function BookingModal() {
  return (
    <Modal>
      <ModalTrigger className="bg-black text-white px-4 py-2 rounded-md">
        Book Now
      </ModalTrigger>
      <ModalBody>
        <ModalContent>
          <h2>Booking Details</h2>
          {/* Modal content */}
        </ModalContent>
      </ModalBody>
    </Modal>
  );
}

9. カルーセルとスライダー（4コンポーネント）

画像スライダーとカルーセルコンポーネント。

主なコンポーネント:

• Images Slider - フルスクリーン画像スライダー
• Carousel - 標準的なカルーセルコンポーネント
• Apple Cards Carousel - Appleスタイルのカードカルーセル
• Animated Testimonials - 推薦文スライダー

10. レイアウトとグリッド（3コンポーネント）

グリッドレイアウトとコンテナコンポーネント。

主なコンポーネント:

• Layout Grid - アニメーション化されたグリッドレイアウト
• Bento Grid - 弁当ボックススタイルのグリッド
• Container Cover - フルスクリーンコンテナ

11. データと可視化（2コンポーネント）

データ表示と比較用のコンポーネント。

主なコンポーネント:

• Timeline - アニメーション化されたタイムラインコンポーネント
• Compare - ビフォーアフター比較スライダー

12. カーソルとポインタ（3コンポーネント）

カーソル追従エフェクトとインタラクション。

主なコンポーネント:

• Following Pointer - カーソルを追従する要素
• Pointer Highlight - カーソルのハイライトエフェクト
• Lens - 虫眼鏡エフェクト

13. 3Dコンポーネント（2コンポーネント）

CSS変形を使用した3Dビジュアルエフェクト。

主なコンポーネント:

• 3D Pin - Pinterestスタイルの3Dカード
• 3D Marquee - 3D回転マーキー

14. ローダー（2コンポーネント）

ローディングアニメーションと進捗インジケーター。

主なコンポーネント:

• Multi-step Loader - マルチステップローディングアニメーション
• Loader - 様々なローディングスピナー

15. セクションとブロック（3コンポーネント）

事前構築されたセクションテンプレート。

主なコンポーネント:

• Feature Sections - 機能ショーケーステンプレート
• Cards - あらかじめデザインされたカードレイアウト
• Hero Sections - ヒーローセクションテンプレート

一般的なパターン

ダークモード対応

すべてのAceternyコンポーネントは、Tailwindのダークモードクラスを通じてダークモードをサポートしています:

<div className="bg-white dark:bg-black text-black dark:text-white">
  {/* Content */}
</div>

レスポンシブデザイン

コンポーネントはデフォルトでレスポンシブです。Tailwindのレスポンシブプリフィックスを使用します:

<h1 className="text-2xl md:text-4xl lg:text-6xl">
  Responsive Heading
</h1>

コンポーネントの組み合わせ

複雑なレイアウトのためにコンポーネントを組み合わせることができます:

import { BackgroundBeams } from "@/components/ui/background-beams";
import { TypewriterEffect } from "@/components/ui/typewriter-effect";
import { MovingBorder } from "@/components/ui/moving-border";

export default function Hero() {
  return (
    <div className="h-screen relative">
      <div className="z-10 relative flex flex-col items-center justify-center h-full">
        <TypewriterEffect words={words} />
        <MovingBorder>
          <button>Get Started</button>
        </MovingBorder>
      </div>
      <BackgroundBeams />
    </div>
  );
}

ベストプラクティス

1. パフォーマンス最適化

"use client"ディレクティブを使用 - AceternyコンポーネントはFramer Motionを使用しており、クライアント側レンダリングが必要です:

"use client";
import { Component } from "@/components/ui/component";

重いコンポーネントを遅延ロード:

import dynamic from 'next/dynamic';

const HeavyBackground = dynamic(
  () => import('@/components/ui/background-beams'),
  { ssr: false }
);

2. アクセシビリティ

ARIAラベルを追加:

<button aria-label="Open menu">
  <MenuIcon />
</button>

キーボードナビゲーションを確保:

<div role="button" tabIndex={0} onKeyDown={handleKeyDown}>
  Interactive element
</div>

3. カスタマイズ

classNameを使用してスタイルをオーバーライド:

<BackgroundBeams className="opacity-50" />

コンポーネントソースを直接変更 - コンポーネントがプロジェクトにコピーされるため、編集できます:

// components/ui/background-beams.tsx
export function BackgroundBeams({ className, myCustomProp }: Props) {
  // カスタマイズしてください
}

4. 型安全性

TypeScriptを使用してプロップの型を定義:

interface CardProps {
  title: string;
  description: string;
  image?: string;
}

export function Card({ title, description, image }: CardProps) {
  // コンポーネント実装
}

トラブルシューティング

よくある問題

1. "Module not found: motion"

bun add motion
# または: npm install motion

2. "cn is not defined" lib/utils.tsが存在し、cnヘルパー関数を含むことを確認します。

3. コンポーネントがアニメーション化していない ファイルの先頭に"use client"ディレクティブがあることを確認します。

4. Tailwindクラスが機能しない Tailwindが設定されており、globals.cssがTailwindディレクティブをインポートしていることを確認します:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. ダークモードが機能しない tailwind.config.tsにdarkMode: "class"が設定されていることを確認します。

トークン効率

このスキルは以下の方法で大幅なトークン削減を実現します:

• 事前に検証されたコンポーネント選択 - コンポーネントオプションを探索する場合、約3kトークンを削減
• インストール指示 - セットアップの問題をデバッグする場合、約2kトークンを削減
• コンポーネントカテゴリ化 - 正しいコンポーネントを見つける場合、約2kトークンを削減
• 使用例 - ボイラープレートコードを書く場合、約2kトークンを削減
• トラブルシューティングガイド - よくある問題をデバッグする場合、約1kトークンを削減

推定削減量: 実装ごとに約10kトークン（65～70%削減）

防止される エラー:

1. motion依存関係の欠落
2. 不正なshadcn CLI初期化
3. cnユーティリティ関数の欠落
4. "use client"ディレクティブの欠落
5. 不正なレジストリ設定
6. 不正なNext.js設定（Pages RouterとApp Router）

リファレンスをロードする時期

タスクコンテキストに基づいてリファレンスファイルをロードします:

ユーザーが質問する内容...	このリファレンスをロード
新規プロジェクトセットアップ、インストール、入門	references/quick-start.md (465行)
特定のコンポーネント検索、コンポーネントカテゴリ、CLIコマンド	references/component-catalog.md (635行)
使用例、パターン、トラブルシューティング	メイン SKILL.md（このファイル）

リファレンス概要:

• quick-start.md - 5分間のセットアップガイド、最初のコンポーネント例、トラブルシューティング、プロジェクト構造
• component-catalog.md - 100以上のコンポーネントの完全なリストとインストールコマンドおよび使用例

追加リソース

• 公式ドキュメント: https://ui.aceternity.com/docs
• コンポーネントギャラリー: https://ui.aceternity.com/components
• Shadcn UI: https://ui.shadcn.com
• Framer Motion: https://www.framer.com/motion
• Tailwind CSS: https://tailwindcss.com

関連スキル

このスキルを使用する場合は、以下と組み合わせることを検討してください:

• nextjs - Next.jsフレームワークスキル
• tailwind-v4-shadcn - Tailwind CSS v4設定
• react-hook-form-zod - フォーム検証
• clerk-auth - 認証
• cloudflare-nextjs - Cloudflareデプロイメント

ライセンス

このスキルドキュメンテーションはMITライセンスの下で提供されています。Aceternity UIコンポーネントは独自のライセンシング方針があります - 詳細は https://ui.aceternity.com を確認してください。

---

最終更新: 2025-12-08 バージョン: 1.1.0 メンテナー: Claude Skills Maintainers