SpinningBox

# SpinningBox をこのプロジェクトに追加してください

このプロンプトは自己完結しています。コンポーネントのソースコード一式が下に含まれているので、外部サイトへのアクセスや shadcn CLI は不要です。手順どおりにファイルを作成し、依存パッケージを追加し、使用例を配置して、そのまま動作する状態にしてください。

## コンポーネントについて
- 名前: SpinningBox
- 説明: 最小構成の react-three-fiber シーン — standard マテリアルの回転する立方体。WebGL 描画経路の動作確認用。
- 実行時に必要な npm パッケージ: @react-three/fiber, three
- 型チェック・ビルドに必要な npm パッケージ（devDependencies）: @types/three
- 構成ファイル: `components/spinning-box/index.tsx`

## 前提と注意
- React 19 / TypeScript / Next.js（App Router）のプロジェクトを想定しています。Next.js 以外の React プロジェクト（Vite など）でもそのまま動きます。
- スタイルは同梱の CSS Modules（ある場合）で自己完結しており、Tailwind CSS の有無や設定には依存しません。Tailwind の設定変更やグローバル CSS の追加は、この依頼文に明記された分だけにしてください。
- ブラウザ API やインタラクションを使うクライアントコンポーネントです。ファイル先頭の "use client" を維持してください。
- コンポーネント自体の背景は透過です。配置先ページの背景がそのまま透けて見える前提で作られているので、白背景や単色の `div` などで囲わず、コンポーネントだけをそのまま配置してください。
- ソースコードの内容は変更しないでください。例外は、`@/` パスエイリアスが無いプロジェクトで import パスを相対パスに直す場合だけです。

## 手順
### 1. 依存パッケージを追加する
pnpm / yarn / bun を使っているプロジェクトでは、そのパッケージマネージャーのコマンドに置き換えてください。
```bash
npm install @react-three/fiber three
npm install -D @types/three
```

### 2. ファイルを作成する
`@/components` が指すディレクトリ（多くは `src/components/` か `components/`。shadcn の `components.json` があれば `aliases.components` の指す場所）に、以下の 1 ファイルを**一字一句そのまま**作成してください。

#### `components/spinning-box/index.tsx`
```tsx
"use client";

import { useRef } from "react";
import { useFrame } from "@react-three/fiber";
import type { Mesh } from "three";

export type SpinningBoxProps = {
  color?: string;
  /** Rotation speed multiplier. */
  speed?: number;
  wireframe?: boolean;
  scale?: number;
};

/**
 * Scene content only — render inside a react-three-fiber <Canvas>.
 */
export function SpinningBox({
  color = "#8b5cf6",
  speed = 1,
  wireframe = false,
  scale = 1,
}: SpinningBoxProps) {
  const mesh = useRef<Mesh>(null);

  useFrame((_, delta) => {
    if (!mesh.current) return;
    mesh.current.rotation.x += delta * speed * 0.6;
    mesh.current.rotation.y += delta * speed;
  });

  return (
    <mesh ref={mesh} scale={scale}>
      <boxGeometry args={[1.6, 1.6, 1.6]} />
      <meshStandardMaterial color={color} wireframe={wireframe} />
    </mesh>
  );
}

export default SpinningBox;
```

代替手段: `components.json` がありシェルを実行できる環境なら、shadcn CLI でも同じファイルと依存パッケージが入ります。
```bash
npx shadcn@latest add https://anima-js.vercel.app/r/spinning-box.json
```

### 3. 使用例を配置する
以下は配信元のプレイグラウンドで設定されていた値をそのまま反映した使用例です。これを基に、適切なページ・レイアウトへ配置してください。コード中の TODO コメントは、対応するか、何をすべきかを説明してください。
```tsx
import { SpinningBox } from "@/components/spinning-box";

// TODO: <Canvas> を用意してください — ライトを配置した react-three-fiber の <Canvas> の中に描画してください
<SpinningBox
  color="#8b5cf6"
  wireframe={false}
  speed={1}
  scale={1}
/>
```

### 4. 完了条件
- 型チェックとビルド（`npm run build` 相当）が通る
- 使用例を置いたページでコンポーネントが表示され、操作に反応する
- "use client" が維持され、不透明な背景のラッパーが追加されていない
- 使用例の TODO コメントが解消されている（または対応方法が説明されている）

npx shadcn@latest add https://anima-js.vercel.app/r/spinning-box.json