# テロップテンプレート カタログ（30種類）

SuperMovieで使用可能なRemotionテロップテンプレート一覧。
全テンプレートは共通インターフェース（SubtitleData / SubtitleItem）を使用。

---

## 共通インターフェース

```typescript
interface SubtitleItem {
  text: string;
  lines: string[];       // 改行済みテキスト配列
  start: number;         // 開始時間(秒)
  end: number;           // 終了時間(秒)
  startFrame: number;    // 開始フレーム
  endFrame: number;      // 終了フレーム
}

interface SubtitleData {
  fps: number;
  subtitles: SubtitleItem[];
}
```

全テンプレートの共通Props: `subtitleData`, `fontSize`, `bottomOffset`, `fontFamily`

---

## カテゴリ別一覧

### 🔵 メイン（通常テロップ）— normal style向け

| # | ファイル名 | export名 | 特徴 | 推奨用途 |
|---|-----------|----------|------|---------|
| 1 | 白青テロップ.tsx | WhiteBlue | 白文字＋青紫縁取り＋白グロー | **デフォルト通常テロップ** |
| 2 | 白青テロップver2.tsx | WhiteBlueTeleopV2 | ver1のバリエーション | 通常テロップ代替 |
| 3 | 白文字黒シャドウ.tsx | WhiteTextBlackShadow | 白文字＋黒ドロップシャドウ | シンプル系動画 |
| 4 | 白文字黒シャドウゴシック.tsx | WhiteTextBlackShadowGothic | ゴシック体版 | ビジネス系 |
| 5 | 白文字黒シャドウ明朝体.tsx | WhiteShadow | 明朝体版 | 教育・丁寧系 |
| 6 | 白黒テロップ.tsx | WhiteBlackTeleop | 白文字＋黒縁取り | 汎用 |
| 7 | 白緑テロップ.tsx | WhiteGreen | 白文字＋緑縁取り | 自然・健康系 |
| 8 | 白赤テロップ.tsx | WhiteRed | 白文字＋赤縁取り | エンタメ系 |
| 9 | 白赤テロップver2.tsx | WhiteRedTeleopV2 | ver1のバリエーション | エンタメ代替 |

### 🟠 強調（emphasis style向け）

| # | ファイル名 | export名 | 特徴 | 推奨用途 |
|---|-----------|----------|------|---------|
| 10 | オレンジグラデーション.tsx | OrangeGradation | オレンジグラデ＋金縁取り＋白縁取り＋発光 | **デフォルト強調テロップ** |
| 11 | 金グラデ・紺背景.tsx | GoldGradNavyBg | 金グラデ文字＋紺背景ボックス | 重要ポイント |
| 12 | 緑グラデ金シャドウ.tsx | GreenGradation | 緑グラデ＋金シャドウ | お金・節約系強調 |
| 13 | 黄色シャドウ.tsx | YellowShadow | 黄色文字＋影 | 注目ポイント |
| 14 | 黄色文字黒シャドウ.tsx | YellowTextBlackShadow | 黄色文字＋黒影 | 注目代替 |
| 15 | 青文字金枠.tsx | BlueGold | 青文字＋金枠 | 高級感ある強調 |

### 🔴 ネガティブ / 警告（warning style向け）

| # | ファイル名 | export名 | 特徴 | 推奨用途 |
|---|-----------|----------|------|---------|
| 16 | 黒文字白背景.tsx | BlackWhiteBackground | 黒文字＋白背景ボックス | **デフォルト警告テロップ** |
| 17 | 赤文字白背景.tsx | RedTextWhiteBg | 赤文字＋白背景 | 強い警告 |
| 18 | 赤文字.tsx | RedWhite | 赤文字＋白縁取り | 注意喚起 |
| 19 | 残酷テロップ・紺.tsx | NavyBlueRiitegaki | 紺色手書き風 | ショック・衝撃 |
| 20 | 黒紫グラデ.tsx | BlackPurpleGradation | 黒紫グラデ | ダーク・シリアス |
| 21 | 白文字赤シャドウ.tsx | WhiteRedShadow | 白文字＋赤影 | 危険表現 |

### 🟢 ポジティブ / 成功（success style向け）

| # | ファイル名 | export名 | 特徴 | 推奨用途 |
|---|-----------|----------|------|---------|
| 22 | 緑文字白背景.tsx | GreenTextWhiteBg | 緑文字＋白背景 | 成功・達成 |
| 23 | 青文字白背景.tsx | BlueTextWhiteBg | 青文字＋白背景 | 安心・信頼 |
| 24 | 白文字青ピンク背景グラデ.tsx | WhitePinkBlueGradation | 白文字＋青ピンクグラデ背景 | 華やか・ポジティブ |
| 25 | 白背景グラデ.tsx | WhiteBgGradText | グラデ文字＋白背景 | おしゃれ系 |

### ⚫ その他 / 特殊用途

| # | ファイル名 | export名 | 特徴 | 推奨用途 |
|---|-----------|----------|------|---------|
| 26 | 黒文字.tsx | BlackWhite | 黒文字＋白縁取り | 明るい背景向け |
| 27 | 黒文字黄色背景.tsx | BlackTextYellowBg | 黒文字＋黄背景ボックス | バラエティ系 |
| 28 | 紫文字白背景.tsx | PurpleTextWhiteBg | 紫文字＋白背景 | 個性的表現 |
| 29 | 白文字黒背景.tsx | WhiteBlackBackground | 白文字＋黒背景ボックス | 字幕風 |
| 30 | 白文字紫シャドウ.tsx | WhitePurpleShadow | 白文字＋紫影 | クール系 |

---

## project-config.json での指定例

```json
{
  "telopStyle": {
    "main": "白青テロップ",
    "emphasis": "オレンジグラデーション",
    "negative": "黒文字白背景",
    "success": "緑文字白背景"
  }
}
```

## SuperMovie style → テンプレート マッピング

| telopData.style | デフォルトテンプレート | 代替候補 |
|-----------------|---------------------|---------|
| normal | WhiteBlue | WhiteBlackTeleop, WhiteTextBlackShadow |
| emphasis | OrangeGradation | GoldGradNavyBg, BlueGold, YellowShadow |
| warning | BlackWhiteBackground | RedTextWhiteBg, RedWhite, NavyBlueRiitegaki |
| success | GreenTextWhiteBg | BlueTextWhiteBg, WhitePinkBlueGradation |

---

## 描画方式

- **SVG方式**（大多数）: `<svg>` + `<text>` で縁取り・グラデーション・影を描画。高品質。
- **CSS方式**（背景ボックス系）: `<div>` + CSS `backgroundColor` でボックス表示。シンプル。

全テンプレート共通:
- フェードイン/アウト（3フレーム）
- スケールアニメーション（0.95→1.0）
- 複数行対応（`lines[]` 配列）
