inspira-ui

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

Inspira UI は、TailwindCSS v4、motion-v、GSAP、Three.js を活用した、再利用可能な 120 種類以上のアニメーション付きコンポーネント集です。美しい Vue および Nuxt アプリケーションをより速くリリースできるように作られています。

目次

• 使用する場面
• クイックスタート
• コンポーネントの選び方
• 基本的な使い方
• 注意すべき落とし穴
• 詳細リファレンス

このスキルを使用する場面

次のものを構築する場合は、Inspira UI をお使いください。

• ヒーローセクション、推薦文、エフェクトを含むアニメーション付きランディングページ
• 3D ビジュアライゼーションやインタラクティブな要素が必要な最新の Web アプリケーション
• 目を引く背景やテキストアニメーションを備えたマーケティングサイト
• 画像ギャラリー、カルーセル、ショーケース効果を備えたポートフォリオサイト
• カスタムカーソル、特殊効果、パーティクルシステムを使ったインタラクティブな体験
• 本番環境に対応したアニメーション付きコンポーネントが必要な Vue 3 または Nuxt 4 プロジェクト

主なメリット：

• コピーして使えるコンポーネントが 120 種類以上（従来の npm ライブラリではありません）
• Vue 3 Composition API に対応した TypeScript の完全サポート
• OkLch 色空間を採用した TailwindCSS v4
• レスポンシブ対応で、モバイル向けに最適化済み
• 無料のオープンソース（MIT ライセンス）

クイックスタート

1. コア依存関係をインストールする

# Required for all components
bun add -d clsx tailwind-merge class-variance-authority tw-animate-css
bun add @vueuse/core motion-v

# Optional: For 3D components (Globe, Cosmic Portal, etc.)
bun add three @types/three

# Optional: For WebGL components (Fluid Cursor, Neural Background, etc.)
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 に追加します。OkLch カラーを含む CSS 設定の全容については、references/SETUP.md をご覧ください。

4. 設定を確認する

./scripts/verify-setup.sh

5. コンポーネントをコピーする

inspira-ui.com/components を参照し、必要なものを components/ui/ にコピーします。

安全なインストール

3D ライブラリ（three、ogl）を含む、依存関係ツリーの大きなパッケージを 6 個以上インストールします。インストールする前に、ソフトウェアサプライチェーンセキュリティのベストプラクティスに従ってください。

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

Socket CLI の統合、クールダウンの設定、ロックファイルの検証、CI での適用を含むセキュリティ設定の全容については、dependency-upgrade スキルを読み込んでください。

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

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

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 を取得してください。構造化された props テーブルと動作するコード例を含む、LLM に最適化されたドキュメントです。

基本的な使い方

パターン 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">
// ALWAYS use interface-based 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">
// ALWAYS include explicit imports even with 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(() => {
  // CRITICAL: Clean up WebGL resources to prevent memory leaks
  if (animationFrame) cancelAnimationFrame(animationFrame);
  if (renderer) renderer.dispose();
});
</script>

パターン 5：クライアント専用ラッパー（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); /* CORRECTED */
}

2. CSS インポートの不足

/* REQUIRED in main.css */
@import "tailwindcss";
@import "tw-animate-css";  /* Often forgotten! */

3. Props の構文が誤っている

// DON'T: Object syntax
const props = defineProps({ title: { type: String } });

// DO: Interface syntax
interface Props { title: string; }
const props = defineProps<Props>();

4. Nuxt での ClientOnly を使わない Three.js

<GithubGlobe :markers="markers" />


<ClientOnly>
  <GithubGlobe :markers="markers" />
</ClientOnly>

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

// DON'T: TypeScript enums
enum ButtonVariant { Primary = "primary" }

// DO: as const objects
const ButtonVariants = { Primary: "primary" } as const;

トークン効率

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

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

防止できるエラー：次のようなよくある問題を 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

コンポーネント：オーロラ背景、シマーボタン、モーフィングテキスト、3D 地球儀、流体カーソル、紙吹雪、ネオンボーダー、アイコンクラウド、フリップカード、パーティクル

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

解決する問題：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