Inspira UI - アニメーション Vue/Nuxt コンポーネントライブラリ

Inspira UI は、TailwindCSS v4、motion-v、GSAP、Three.js を用いた 120 以上の再利用可能なアニメーションコンポーネント集です。Vue と Nuxt アプリケーションの開発を迅速に進めるために設計されています。

目次

• 使用場面
• クイックスタート
• コンポーネント選択
• コア パターン
• 重要な落とし穴
• 詳細リファレンス

使用場面

以下を構築する際に Inspira UI を使用してください：

• アニメーション化されたランディングページ - ヒーローセクション、推薦文、エフェクト
• モダン web アプリケーション - 3D ビジュアライゼーションとインタラクティブ要素が必要な場合
• マーケティングサイト - 目を引く背景とテキストアニメーション
• ポートフォリオサイト - 画像ギャラリー、カルーセル、ショーケースエフェクト
• インタラクティブな体験 - カスタムカーソル、特殊効果、パーティクルシステム
• Vue 3 または Nuxt 4 プロジェクト - 本番環境対応のアニメーションコンポーネントが必要な場合

主な利点：

• 120+ のコピー＆ペースト可能なコンポーネント（従来の npm ライブラリではありません）
• Vue 3 Composition API による完全な TypeScript サポート
• OkLch カラースペース対応の TailwindCSS v4
• レスポンシブ かつ モバイル最適化
• 無料でオープンソース（MIT ライセンス）

クイックスタート

1. コア依存関係のインストール

# 全コンポーネント必須
bun add -d clsx tailwind-merge class-variance-authority tw-animate-css
bun add @vueuse/core motion-v

# オプション：3D コンポーネント用（Globe、Cosmic Portal など）
bun add three @types/three

# オプション：WebGL コンポーネント用（Fluid Cursor、Neural Background など）
bun add ogl

2. CN ユーティリティのセットアップ

lib/utils.ts を作成：

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

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

3. CSS 変数の設定

main.css に追加してください。完全な CSS 設定（OkLch カラー付き）は references/SETUP.md を参照してください。

4. セットアップの確認

./scripts/verify-setup.sh

5. コンポーネントのコピー

inspira-ui.com/components でコンポーネントを参照し、必要なものを components/ui/ にコピーしてください。

セキュアインストール

このインストールでは、大規模な依存関係ツリーを持つ 6+ のパッケージ（3D ライブラリ three、ogl など）がインストールされます。インストール前に、サプライチェーンセキュリティのベストプラクティスに従ってください：

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

dependency-upgrade skill を読み込むと、Socket CLI 統合、クールダウンセットアップ、lockfile 検証、CI 強制を含む完全なセキュリティ設定が得られます。

コンポーネント選択フロー

どのようなエフェクトが必要ですか？

1. 背景エフェクト → Aurora、Cosmic Portal、Particles、Neural Background

   • 参照：references/components-list.md#backgrounds

2. テキストアニメーション → Morphing Text、Glitch、Hyper Text、Sparkles Text

   • 参照：references/components-list.md#text-animations

3. 3D ビジュアライゼーション → Globe、3D Carousel、Icon Cloud、World Map

   • 依存関係：bun add three @types/three
   • 参照：references/components-list.md#visualization

4. インタラクティブカーソル → Fluid Cursor、Tailed Cursor、Smooth Cursor

   • 依存関係：bun add ogl（WebGL カーソル用）
   • 参照：references/components-list.md#cursors

5. アニメーションボタン → Shimmer、Ripple、Rainbow、Gradient

   • 追加の依存関係不要
   • 参照：references/components-list.md#buttons

6. 特殊エフェクト → Confetti、Meteors、Neon Border、Glow Border

   • 参照：references/components-list.md#special-effects

実装の詳細情報 （props、完全なコード、インストール）： https://inspira-ui.com/docs/llms-full.txt を取得 - LLM 向けの構造化された props テーブルと実装コード例を含みます。

コアパターン

パターン 1：アニメーション化されたランディングページ

<template>
  <AuroraBackground>
    <Motion
      :initial="{ opacity: 0, y: 40, filter: 'blur(10px)' }"
      :while-in-view="{ opacity: 1, y: 0, filter: 'blur(0px)' }"
      :transition="{ delay: 0.3, duration: 0.8, ease: 'easeInOut' }"
      class="relative flex flex-col items-center gap-4 px-4"
    >
      <div class="text-center text-3xl font-bold md:text-7xl">
        Your amazing headline
      </div>
      <ShimmerButton>Get Started</ShimmerButton>
    </Motion>
  </AuroraBackground>
</template>

<script setup lang="ts">
import { Motion } from "motion-v";
import AuroraBackground from "~/components/ui/AuroraBackground.vue";
import ShimmerButton from "~/components/ui/ShimmerButton.vue";
</script>

パターン 2：TypeScript インターフェースを使用した Props

<script setup lang="ts">
// 常にインターフェースベースの props を使用
interface Props {
  title: string;
  count?: number;
  variant?: "primary" | "secondary";
}

const props = withDefaults(defineProps<Props>(), {
  count: 0,
  variant: "primary",
});
</script>

パターン 3：明示的なインポート（Vue.js 互換性に重要）

<script setup lang="ts">
// Nuxt auto-imports があっても常に明示的なインポートを含める
import { ref, onMounted, computed } from "vue";
import { useWindowSize } from "@vueuse/core";

const { width } = useWindowSize();
</script>

パターン 4：WebGL コンポーネントのクリーンアップ

<script setup lang="ts">
import { onUnmounted } from "vue";

let animationFrame: number;
let renderer: any;

onUnmounted(() => {
  // 重要：メモリリークを防ぐため WebGL リソースをクリーンアップ
  if (animationFrame) cancelAnimationFrame(animationFrame);
  if (renderer) renderer.dispose();
});
</script>

パターン 5：Client-Only ラッパー（Nuxt）

<template>
  <ClientOnly>
    <FluidCursor />
  </ClientOnly>
</template>

回避すべき重要な落とし穴

1. アクセシビリティバグ（重大）

元の Inspira UI ドキュメントでは --destructive-foreground が --destructive と同じ色に設定されており、テキストが見えなくなります。修正された値を使用してください：

:root {
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0); /* 修正済み */
}

2. CSS インポート漏れ

/* main.css に必須 */
@import "tailwindcss";
@import "tw-animate-css";  /* よく忘れられます！ */

3. 間違った Props シンタックス

// 不可：オブジェクトシンタックス
const props = defineProps({ title: { type: String } });

// 推奨：インターフェースシンタックス
interface Props { title: string; }
const props = defineProps<Props>();

4. Nuxt で ClientOnly なしの Three.js

<!-- 不可：SSR で失敗します -->
<GithubGlobe :markers="markers" />

<!-- 推奨 -->
<ClientOnly>
  <GithubGlobe :markers="markers" />
</ClientOnly>

5. Enum の代わりに as const を使用

// 不可：TypeScript enum
enum ButtonVariant { Primary = "primary" }

// 推奨：as const オブジェクト
const ButtonVariants = { Primary: "primary" } as const;

トークン効率

平均トークン削減率：約 65%

• スキルなし：約 15,000 トークン（試行錯誤によるセットアップ）
• スキルあり：約 5,000 トークン（直接実装）

防止されるエラー：13+ 件の一般的な問題

1. 重大なアクセシビリティバグ（destructive-foreground）
2. TailwindCSS v4 CSS 変数の設定ミス
3. @import "tw-animate-css" の漏れ
4. Motion-V セットアップの問題
5. ClientOnly なしの Three.js/OGL
6. オブジェクトシンタックスでタイプされた Props（インターフェース推奨）
7. 明示的なインポート漏れ

詳細なドキュメント

全 CSS 変数を含むセットアップ：references/SETUP.md

120+ コンポーネント全部と依存関係：references/components-list.md

一般的な問題のトラブルシューティング：references/TROUBLESHOOTING.md

TypeScript パターンと慣例：references/CODE_PATTERNS.md

キーワード

フレームワーク：Vue、Vue 3、Nuxt、Nuxt 4、Composition API、script setup

スタイリング：TailwindCSS v4、OkLch、CSS 変数、ダークモード

アニメーション：motion-v、GSAP、Three.js、WebGL、OGL、canvas

コンポーネント：aurora background、shimmer button、morphing text、3D globe、fluid cursor、confetti、neon border、icon cloud、flip card、particles

ユースケース：ランディングページ、ヒーローセクション、アニメーション背景、インタラクティブ UI、マーケティングサイト、ポートフォリオ、3D web サイト

解決される問題：Vue アニメーション、Nuxt アニメーション、アニメーションコンポーネント、3D エフェクト、パーティクルエフェクト、モダン UI エフェクト

リソース

• 公式ドキュメント：https://inspira-ui.com/docs
• LLM 向けドキュメント：https://inspira-ui.com/docs/llms-full.txt（完全な props、コード例、インストール）
• コンポーネントギャラリー：https://inspira-ui.com/components
• GitHub リポジトリ：https://github.com/unovue/inspira-ui
• Discord コミュニティ：https://discord.gg/Xbh5DwJRc9

---

本番環境対応：✅ 本番環境対応 トークン効率：✅ 約 65% の削減 エラー防止：✅ 13+ の一般的な問題を防止 最終更新：2025-11-12