kinetic-typography

モーションタイポグラフィ

テキストを表情豊かにアニメーション化します。コピーを行・単語・文字に分割し、時間差で表示したり、マスク、ぼかし、ウェイトの変化、パスに沿ったテキストの移動を行います。ウェブ（CSS、GSAP、Framer Motion）や動画（Remotion）向けの実行可能なコードに加え、After Effects のエクスプレッションを使う方法も生成します。

使用する場面

• 見出しやタグラインの登場、アニメーション付きタイトルカード。
• リリックビデオ、キャプションや字幕の表示、キネティックタイポグラフィ作品。
• 可変フォントのアニメーション（ウェイト、幅、傾き、オプティカルサイズ）。
• パスに沿ったテキスト、テキストの輪郭線を描く演出、文字ごとのモーフィング効果。

基本的なワークフロー

1. まず静的なタイポグラフィを整える

モーションで悪いタイポグラフィを救うことはできません。アニメーションの前に、行の高さ（ディスプレイ見出しは 1.1〜1.2、本文は 1.4〜1.6）、字間（ディスプレイ用は -1%〜-3% 詰めます。例：letter-spacing: -0.02em）、配置、ウェイトを確定します。その後、分割してアニメーション化します。

2. 分割単位を選ぶ

• 行単位 — 最も落ち着きがあり、上質な印象です。複数行の段落や洗練された見出しに最適です。
• 単語単位 — 活気があり、タグラインや歌詞の強調に適しています。
• 文字単位 — 最も動きがあり、遊び心のある表現です。長いコピーでは忙しい印象になるおそれがあるため、短い文字列に限定します。

ツール：ウェブでは SplitType または GSAP の SplitText、Remotion では .split('') / .split(' ') と interpolate、Framer Motion では motion の子要素を時間差でアニメーション化します。

アクセシビリティに関する重要な注意：文字ごとの span に分割すると、スクリーンリーダーでテキストを読み取れなくなり、コピー＆ペーストもできなくなります。コンテナには必ず全文を含む aria-label を設定し、分割した要素には aria-hidden="true" を設定してください。

3. 表示方法を適用する

よく使われる 4 つの表示方法：

• マスク／クリップ表示（最も堅牢） — 各行を overflow: hidden で囲み、子要素を translateY(100%) から 0 へアニメーション化します。テキストが隠れたベースラインから上へ現れます。ぼかしによるアーティファクトがなく、GPU 負荷も低い、見出し表示の業界標準です。
• ぼかしからの表示 — filter: blur(12px) -> blur(0) と opacity 0 -> 1 をアニメーション化します。柔らかく上質な「フォーカスが合う」印象です。描画コストが高いため、ぼかしの半径は控えめにし、再生時間を短くしてください。
• クリップパスによるワイプ — clip-path: inset(0 100% 0 0) から inset(0 0 0 0) へアニメーション化します。グリフを動かさずに、方向性のある表示を実現します。
• 文字ごとの時間差表示 — 文字に分割し、それぞれを 20〜40ms の間隔でフェード／移動させます。

4. 原則に沿ったタイミングを適用する

このスキル単体で使えるよう、基本事項を記載します。

• 入場にはイーズアウトを使います。cubic-bezier(0.16, 1, 0.3, 1)（easeOutExpo）は上質な印象になります。
• 各要素の再生時間は 400〜600ms。
• 時間差：行は 60〜100ms、単語は 40〜70ms、文字は 20〜40ms 間隔。
• 表示全体は約 800ms 以内に収めます。長い文字列では、文字ごとの間隔を短くするか、単語／行単位に切り替えてください。

5. マスク表示、コピー＆ペースト可能な実装（バニラ CSS + JS による行分割）

<h1 class="reveal" aria-label="Designed for motion">Designed for motion</h1>

.reveal .line { overflow: hidden; }
.reveal .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.reveal .line:nth-child(2) > span { animation-delay: 0.08s; }
.reveal .line:nth-child(3) > span { animation-delay: 0.16s; }
@keyframes rise { to { transform: translateY(0); } }

6. 可変フォントのウェイトアニメーション

@keyframes thicken {
  from { font-variation-settings: "wght" 200; }
  to   { font-variation-settings: "wght" 800; }
}
.headline {
  font-family: "Inter var", sans-serif;
  animation: thicken 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

font-weight ではなく font-variation-settings（wght、wdth、slnt、opsz およびカスタム軸など、あらゆる軸に対応）をアニメーション化すると、標準外の値を指定でき、滑らかに補間できます。アニメーション化する前に、読み込んだフォントが実際に可変フォントであることと、軸の範囲（例：wght 100-900）を確認してください。そうしないと、値が警告なく上限または下限に制限されます。

配布と検証（単体の HTML）

パッケージ化されたヘルパー（scripts/）：scripts/seek-shot.sh anim.html 0 1.5 3 は ?t=N ハーネスを固定して各時点のスクリーンショットを撮影します。scripts/contact-sheet.sh sheet.png frame-*.png はそれらをタイル状に並べ、一目で確認できるようにします。scripts/README.md を参照してください。

ウェブ上のテキスト表示やキネティックタイトルを納品する場合は、ブラウザーで直接開ける .html ファイルを 1 つ用意してください。ビルド手順は不要です。見出し、タイトルカード、または単一の表示演出には、ファイル 1 つが適切な規模です。

出力要件：

• .html ファイルを 1 つ用意します。マークアップではコンテナーに aria-label を指定し、表示演出はインラインの <style>（または CDN から読み込む 1 つのインライン <script> による GSAP）に記述します。
• アニメーションの制御方法は 1 つにします。CSS の @keyframes による表示演出、または単一の GSAP タイムラインのどちらかを使い、両方は使いません。
• 任意の時点を再現可能な形でスクリーンショットに撮れるよう、以下の固定用ハーネスを含めます。
• 固定フレームで改行が正しくなるよう、document.fonts.ready の後に分割します。

固定用ハーネス — スクリーンショット用にフレームを固定します。

<script>
  const t = new URLSearchParams(location.search).get("t");
  if (t !== null) {
    // CSS @keyframes reveal:
    document.querySelectorAll(".reveal *").forEach(el => {
      el.style.animationDelay = (-parseFloat(t)) + "s";
      el.style.animationPlayState = "paused";
    });
    // GSAP timeline instead? → tl.pause(); tl.seek(parseFloat(t));
  }
  window.__ready = true;                                          // ready signal for headless wait
</script>

検証の流れ — レンダリング → 固定 → スクリーンショット → 確認：

1. ファイルを開始／中間／終了時点で固定して開きます：…/type.html?t=0、?t=<dur/2>、?t=<dur>。
2. 固定した各フレームのスクリーンショットを撮影します。
3. 忠実度（要件との一致）と表示上の問題（グリフやディセンダーの切れ、ベースラインを完全に隠せていないマスク、フォント読み込み前の FOUC や誤った改行、ぼかしのにじみ）を確認します。

npx playwright screenshot --wait-for-timeout=500 "file://$PWD/type.html?t=0.4" frame-mid.png

完了前に確認すること：

1. ブラウザーで単体で開けること。コンソールエラーや CDN／フォントの読み込み漏れがないこと。
2. 表示演出の制御方法が 1 つであり、?t=N で正確なフレームを固定できること。
3. 開始／中間／終了時点のスクリーンショットを撮影し、グリフの切れや FOUC がなく、改行が正しいこと。
4. prefers-reduced-motion に対応していること（テキストは最終状態で表示し、動きをなくす）。
5. コンテナーに aria-label を指定し、分割した断片に aria-hidden を指定していること。コピーとスクリーンリーダー向けのテキストが損なわれていないこと。

クイックリファレンス

効果	基本的な CSS／手法
マスクで上方向に表示	親要素に overflow:hidden を指定し、子要素を translateY(110%)->0 にする
ぼかしながら表示	filter: blur(12px)->0 ＋不透明度
方向性のあるワイプ	clip-path: inset(0 100% 0 0)->inset(0)
文字ごとの段階表示	文字ごとに分割し、20〜40ms のオフセットでフェード＋上昇
可変ウェイト	font-variation-settings:"wght" a->b をアニメーション化
パス上のテキスト	SVG <textPath href="#curve">
ストロークの描画	SVG テキストをパスにし、stroke-dashoffset をアニメーション化

パス上のテキスト（SVG）

<svg viewBox="0 0 600 200">
  <path id="curve" d="M20,150 Q300,20 580,150" fill="none" />
  <text font-size="42" fill="#fff">
    <textPath href="#curve" startOffset="0%">Follow the curve</textPath>
  </text>
</svg>

startOffset 属性（0% -> 100%）をアニメーション化すると、テキストをパスに沿ってスクロールできます。また、パスの d をアニメーション化すると、変形する曲線に沿ってテキストを流せます。

参考ファイル

• references/reveal-recipes.md — コピーして使える表示演出のレシピ集。CSS によるマスク／ぼかし／クリップ／文字ごとの段階表示、GSAP SplitText タイムライン、Framer Motion による段階表示バリアント、Remotion による文字単位の補間、可変フォントのキーフレーム、スクリーンリーダーに配慮した分割ヘルパーを収録しています。