1仕組みと動作原理
実装原理は「まず静的タイポグラフィを完全に固め、その後に動きを論じる」こと：アニメーションで粗悪なタイポグラフィを救うことはできないため、分割やアニメーションの前にまず行送り、文字間、配置、フォントウェイトを確定させます。
skills/kinetic-typography/SKILL.md
Motion cannot rescue bad type. Before animating, lock line-height (1.1-1.2 for display headlines, 1.4-1.6 for body), tracking (tighten display by -1% to -3%, e.g. `letter-spacing: -0.02em`), alignment, and weight. Then split and animate.
ここでの目的：タイポグラフィのパラメータを数値範囲付きの事前ゲート条件として定義し、モデルが即座に派手なアニメーションへ飛びつくのを防止すること。
分割の粒度は3段階（行／単語／文字）のみとし、各段階を感情や適用シーンに紐付けた上で、「長文の文字単位分割は騒がしく見える」という経験則を明示します。
skills/kinetic-typography/SKILL.md
- **By character** — most kinetic/playful; risk of feeling busy on long copy. Reserve for short strings.
ここでの目的：「何で分割するか」を美的嗜好から境界線のある決定マトリクス（行＝最も落ち着きがある、単語＝エネルギーがある、文字＝最も活発だが短い文字列にのみ適する）に変換すること。
テキストの分割はセマンティクスを損なうため、アクセシビリティは推奨ではなく厳格なルールとする：コンテナの aria-label に完全な文字列を設定し、すべての分割要素に aria-hidden を付与します。
skills/kinetic-typography/SKILL.md
Critical accessibility note: splitting into per-character spans destroys the text for screen readers and breaks copy-paste. Always set `aria-label` on the container with the full string and `aria-hidden="true"` on the split fragments.
ここでの目的：本スキルの最も重要なエンジニアリング制約——分割時は必ずペアで補償を行わなければ、スクリーンリーダーが細切れの文字を読み上げ、コピー＆ペーストが破綻するため、完了チェックリストの項目5で検収条件として規定。
4つの主要リビール手法にはそれぞれトレードオフが存在する：マスク／切り抜きによる上昇が最も安定的（ブラーのアーティファクトがなく、GPU負荷が低く、業界標準）、ブラーインは負荷が高いがソフト、clip-path による方向性ワイプ、文字スタッガー。
skills/kinetic-typography/SKILL.md
- **Mask / clip reveal (most robust)** — wrap each line in `overflow: hidden`; animate the child from `translateY(100%)` to `0`. The text wipes up from a hidden baseline. No blur artifacts, GPU-cheap, the industry-standard headline reveal.
ここでの目的：「どのリビール手法がどのような条件下で最適か」を明確化すること（ブラーは高負荷であることを明記し、短時間かつ小さい半径を要求）。
タイミングパラメータはインラインで具体的な値を指定（easeOutExpo、フラグメントあたり400〜600ms、行／単語／文字のスタッガーは60〜100／40〜70／20〜40ms、総再生時間は約800msの上限）し、外部知識に頼らずスキル単体で利用可能とします。
skills/kinetic-typography/SKILL.md
Enter with ease-out: `cubic-bezier(0.16, 1, 0.3, 1)` (easeOutExpo) feels premium.
ここでの目的：アニメーションのリズムをそのまま適用できる数値にし、長文時のフォールバック方針（文字単位オフセットの削減、または単語／行粒度への変更）を提供すること。
バリアブルフォントのアニメーションは font-weight ではなく font-variation-settings を操作することを要求し、値が暗黙的にクランプされるのを防ぐため、事前にバリアブルフォントであることと軸の範囲を必ず確認させます。
skills/kinetic-typography/SKILL.md
Animate `font-variation-settings` (covers any axis: `wght`, `wdth`, `slnt`, `opsz`, plus custom axes), not `font-weight`, to hit non-standard values and to interpolate smoothly.
ここでの目的：「アニメーションの効果が見えない」最も一般的な原因（バリアブルフォントがロードされていない／軸の範囲に対象値が含まれていない）を指摘し、検証可能なトラブルシューティングの手がかりとすること。
フォントの読み込みタイミングを検収の前提条件とする：document.fonts.ready の完了を待ってから分割を実行しなければ、フリーズフレームの改行が実機と一致しなくなる（単一ファイル HTML ＋ 1つのアニメーションドライバー ＋ ?t=N フリーズハーネスの納品規約と連動）。
skills/kinetic-typography/SKILL.md
Split AFTER `document.fonts.ready` so line breaks are correct in the frozen frame.
ここでの目的：フォント読み込みによる改行のズレや FOUC という2大検収不合格ポイントを、フリーズポイントと分割タイミングを fonts.ready の完了後に紐付けることで未然に防止すること。
2コア機能
014つのリビール手法（マスク上昇、ブラーイン、clip-path 方向ワイプ、文字スタッガー）とそのトレードオフおよび実装コード
023段階の分割粒度と対応するツールチェーン：Web は SplitType / GSAP SplitText、Remotion は .split('') + interpolate、Framer Motion は staggered children
03アクセシビリティ補償（コンテナの aria-label 完全文字列 ＋ フラグメントの aria-hidden）および完了前の検収項目としての義務付け
04タイミングとリズムのベースライン（easeOutExpo、フラグメント 400〜600ms、行／単語／文字スタッガー 60〜100／40〜70／20〜40ms、総再生時間 約800ms の上限）
05バリアブルフォントの軸アニメーション（wght/wdth/slnt/opsz およびカスタム軸）と、「バリアブルフォントおよび軸範囲の事前確認」チェック
06パスに沿ったテキスト（SVG textPath ＋ startOffset のアニメーションまたはパス d のモーフィング）とストローク描画（stroke-dashoffset）
07フリーズハーネス（?t=N：CSS アニメーションは負の遅延 ＋ paused、GSAP は tl.pause() + tl.seek、および window.__ready のセット）
08完了前チェックリスト：単一ドライバー、正確なフリーズ、グリフ欠け／FOUC／改行崩れのない3時点スクリーンショット、reduced-motion による最終状態への直行、aria およびコピペの整合性
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx playwright screenshot（验证回路：截 file:// 页面冻结帧） |
| cli | 仓库根共享脚本 scripts/seek-shot.sh、scripts/contact-sheet.sh（截图与接触表拼图；不在 skill 目录内） |
| package | 前端动画生态（按技法选用）：SplitType / GSAP SplitText、Framer Motion、Remotion |
| network | 产物期引用：输出契约允许用一条 CDN 的 GSAP <script>；仓库根演示页 showcase.html 另引 Google Fonts 与 cdnjs 的 gsap |
| package | 字体：变量字体（如 Inter var）与示例字体家族——产物期由浏览器加载，且 SKILL.md 要求先确认是变量字体与轴范围 |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: （SKILL.md の指示）npx playwright screenshot --wait-for-timeout=500 "file://$PWD/
- 网络端点: 外部ネットワークアクセスの宣言: スキルディレクトリ内にネットワーク呼び出しコードは存在せず、実行時のネットワーク面は `npx playwright` のツール取得（npm registry + Chromium バイナリ）のみ
- 本地工作目录: ファイルの読み書きと成果物出力: 納品物本体：単一の type.html（エージェントが出力規約に従って生成）
監査ノート： 判定対象＝スキル自身のディレクトリ。SKILL.md と references/reveal-recipes.md（および0バイトの README.md）のみで構成：自前スクリプトなし、クレデンシャルの読み取りなし、エンドポイント呼び出しなし、ユーザー素材の外部送信なし。実行時はローカルツール（file:// のローカルページを撮影する `npx playwright screenshot`、画像結合の ffmpeg）のみに関与し、生成物である HTML が CDN 経由で GSAP や Web フォントを参照する場合はブラウザ側の取得に該当（「生成物側の参照は判定対象外」とするパラダイムに従い、reason にのみ記載）。リポジトリルートの showcase.html における Google Fonts/cdnjs の参照も同様に判定対象外です。留意事項：① `npx playwright` は初回実行時にリモートパッケージを取得し Chromium をダウンロードする（バージョン未固定のサプライチェーン接触面）；② scripts/seek-shot.sh、scripts/contact-sheet.sh はリポジトリルートに存在するため、本スキルディレクトリのみをインストールした場合は参照が孤立する；③ ヘッドレススクリーンショットはフォントの読み込み完了後に実行しなければ、フォント未ロードによりフリーズフレームが実機と乖離する；④ バリアブルフォントおよび「バージョン未固定の CDN/Web フォント」は成果物品質とサプライチェーン双方の留意点。いずれも黄色（定常的な外部ネットワーク送信なし）および橙色の特徴には該当せず、リポジトリ全域のスキャンにより、サンドボックス無効化、TLS 無効化、自動検知の回避といった赤色判定の挙動がないことを確認済みです。
5二重目の独立検証
- [ok] 「skill 目录内无脚本」是否成立（蓝档的关键前提） — 文件清单实证：目录内只有 SKILL.md、README.md(0 B)、references/reveal-recipes.md。SKILL.md 引用的 scripts/seek-shot.sh 与 scripts/contact-sheet.sh 属仓库根资产，已在 reason/risks 记录为「单装 skill 目录会悬空」。
- [ok] 凭证/环境变量读取是否存在 — 本仓全仓 `process.env|API_KEY|TOKEN|SECRET|Authorization` 零命中；credential_reads 为空成立。
- [ok] 是否有更高的触发条件被漏掉（红档特征） — `sandbox|automationcontrolled|no-verify|stealth|bypass|ignoreHTTPSErrors|dangerously` 全仓零命中；产物是浏览器沙箱内的 CSS/SVG 动画，无任意代码执行面。
- [unlocatable] 任务提示的「安全区（title safe）规则」是否能定位 — 对 skill 目录与全仓检索 `safe[- ]area|title safe|overscan|margin` 均未发现「安全区/标题安全」类版式规则；文档里的版式规则只有：静态排版前置（行高/字距/对齐/字重）、切分后的 aria 补偿，以及「文字不压脸与关键物体」这类通用要求与「裁切字形/descender」验收项。故不把它写成 capability，仅记录为「任务提示与源码不符：本 skill 无安全区规则」；竖屏或平台裁切场景需使用者自行加边距。
- [ok] 无障碍声明是否有可执行形态（非口号） — SKILL.md 要求容器 aria-label + 碎片 aria-hidden，完成清单第 5 条写成验收项；reveal-recipes.md 第 1 节的 HTML 已按此写（<span class="line"><span aria-hidden="true">Built for</span></span>），并在开头声明 'Accessibility rule for every per-fragment split'。属可照抄实现。
- [ok] 时间参数与「单一动画驱动」是否自洽 — SKILL.md 内联给出 easeOutExpo、400–600ms、行/词/字错位区间与约 800ms 上限；输出契约要求「CSS @keyframes 或单条 GSAP timeline，不能两者并存」，harness 也对两种驱动给分支写法（负延迟暂停 / tl.pause()+seek），无相互矛盾。
- [ok] 「字体就绪后再切分」是否真能解决冻结帧换行问题 — SKILL.md 写 'Split AFTER `document.fonts.ready` so line breaks are correct in the frozen frame.'；冻结 harness 在 ?t=N 时把动画钉到负延迟 + paused 并置 window.__ready 供无头等待。先等字体、再切分、再冻结，三段配合成立。
6結論
最適な用途： 見出し／スローガンの登場演出、キネティックタイトルカード、歌詞や字幕のリビール、バリアブルフォントのウェイト／幅の遷移、パス沿いテキストやストローク描画に最適。「分割 ＋ リビール ＋ タイミングパラメータ ＋ アクセシビリティ補償」を再利用可能な規約として Web および動画の2つのパイプライン（Web 向けは CSS/GSAP、映像書き出しは Remotion）に組み込むのにも適しています。直接開くことができる単一ファイル HTML として納品されます。
不向きな用途： 以下には不適：① プラットフォームのセーフゾーン／マルチアスペクト比対応が必要な成果物（ドキュメントにセーフゾーンの規約が含まれないため、余白の個別追加が必要。second_pass の unlocatable 項目を参照）；② 3D/WebGL テキストまたはグラフ・データアニメーションが必要な場合（それぞれ webgl-animation-skills や chart-animation を使用すべき）；③ 全体のストーリー構成やBGMを伴う完全な短編動画（javascript-animation + soundtrack を使用すべき）；④ 静的／不変フォントでウェイトアニメーションを行おうとするケース（事前にバリアブルフォントと軸範囲を確認しないと値が暗黙的にクランプされる）；⑤ 本スキルディレクトリのみを導入し、リポジトリルートの scripts/ が利用可能であることを前提とする環境。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload kinetic-typography.tar.gz
sha256:
Option B · Copy Guide for Agent7defb6b40cabee55…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit fccc94bd32.