# テロップモーションパック 10種（縦動画 1080×1920）

SNS縦動画（リール / TikTok / ショート）用の、日本語テロップモーション10種セットです。
文言を差し替えて何度でも使えます。完成見本は同梱の `sample.mp4`（35秒）をご覧ください。

- 形式: HyperFrames（HTMLで動画を作るオープンソースの仕組み・Apache-2.0）
- 検証環境: macOS。Node.js 18以上が必要です（初回実行時にツールを自動取得するため、ネット接続が要ります）

## クイックスタート（3ステップ）

```bash
cd telop-motion-pack
npm run check    # 構成チェック（初回はツール取得で数分かかります）
npm run render   # renders/ に完成MP4が書き出されます
```

プレビューして確かめたい時は `npm run dev`（ブラウザでStudioが開きます。
開かない・404になる時は、クラウド同期フォルダの外へ移動してから再実行してください）。

## 文言を差し替える

`index.html` を開くと、スタイルごとに1行ずつ `data-variable-values='{...}'` が
最初から書いてあります（今の見本の文言が入っています）。**その中身を書き換えて
`npm run render` するだけ**です。行を見れば、そのスタイルで使える変数名がわかります。

```html
<div id="s-t02" ...
     data-variable-values='{"text":"今だけ、|送料|*無料。"}'
     ... ></div>
```

書式のルール:

- `|` の意味はスタイルで少し違います:
  **01・06 = 改行**／**02・04・07 = 語の区切り**（04は語=1行、02は同じ行に並び長ければ自動折り返し）
- `*` … 強調。02・04では大きく＋アクセント色、06ではその行にマーカーが走ります
- 文字数に応じて自動でサイズ調整されます（はみ出しません）。目安は1行2〜13文字
- 03（タイプライター）は**全角文字のみ**（カーソル位置を全角幅で計算しているため）。
  文字数が多い時は `index.html` 側の `data-duration` も伸ばしてください（1字≒0.07秒＋余韻）
- 09（スロットカウンター）だけ変数が3つ: `label` / `digits`（**半角数字1〜4桁**）/ `suffix`
- 色も変えられます: 各ファイル冒頭の変数宣言にあるcolor変数
  （多くは `accent`、05は `warm`/`cool`、06は `marker`/`ink`。既定 #FFC94A）を
  同じ `data-variable-values` に足すだけ（例 `{"text":"…","accent":"#FF6B6B"}`）

## 10スタイル一覧

| # | スタイル | 見本での出現秒 | ファイル | 向く用途 |
|---|---------|------|---------|---------|
| 01 | マスクリビール | 2.2 | `compositions/t01-mask-reveal.html` | 定番・上品。迷ったらこれ |
| 02 | ポップイン | 5.4 | `compositions/t02-spring-pop.html` | バラエティ・お得系 |
| 03 | タイプライター | 8.4 | `compositions/t03-typewriter.html` | 解説・打ち明け話 |
| 04 | ビートスラム | 11.6 | `compositions/t04-beat-slam.html` | 煽り・3連呼 |
| 05 | グリッチ | 15.6 | `compositions/t05-glitch.html` | テック・ゲーム・刷新訴求 |
| 06 | マーカーハイライト | 18.6 | `compositions/t06-marker.html` | 要点強調・注意喚起 |
| 07 | ウォーターフォール | 21.8 | `compositions/t07-waterfall.html` | リズム・畳みかけ |
| 08 | フォーカスブラー | 24.8 | `compositions/t08-blur-focus.html` | シネマ・高級 |
| 09 | スロットカウンター | 28.0 | `compositions/t09-slot-counter.html` | 数字（％・価格・件数） |
| 10 | グラデーションスイープ | 31.6 | `compositions/t10-gradient-sweep.html` | 高級・締め・公開告知 |

## 自分の動画プロジェクトに1スタイルだけ載せる

各 `tNN-*.html` はカタログ表示（番号・ドット）を含まない素のテロップ部品です。
自分のHyperFramesプロジェクトへ `compositions/` ごとコピーし、index.htmlに1行足します:

```html
<div id="my-telop" data-composition-id="t04" data-composition-src="compositions/t04-beat-slam.html"
     data-variable-values='{"text":"うまい|はやい|*やすい"}'
     data-start="3.0" data-duration="4.0" data-track-index="5"
     data-width="1080" data-height="1920"></div>
```

注意: 同じスタイルを1本の動画で2回使う時は、ファイルを複製して中の
`data-composition-id`（3箇所: ホスト行・ファイル内root・`window.__timelines`のキー）を
別名に変えてください（同じidは2回使えない仕様です）。

## 構成

- `index.html` — ショーケース本体（背景 / スタイル / カタログ表示の3トラック）
- `compositions/` — 表紙・10スタイル・カタログ表示（chrome-01〜10）
- `compositions/chrome-*.html` は `scripts/gen_chrome.py` が生成します（直接編集せずスクリプトを直して再生成）
- `STORYBOARD.md` — 設計メモ（各スタイルの由来モーションルール付き）

## 利用条件

- ご自身・お客様の動画制作に**自由に利用OK（商用可・改変可・クレジット不要）**
- このパック自体（ファイル一式）をそのまま、または軽微な改変で**再配布・販売することはご遠慮ください**
- 本パックが利用している外部ツールは各ライセンスに従います:
  HyperFrames（Apache-2.0 / 実行時にnpxで取得）・GSAP（CDN参照）・
  フォントは Noto Sans JP / IBM Plex Mono（SIL Open Font License / ビルド時に自動取得）
- 生成された動画の利用に制限はありません
