1仕組みと動作原理
妥協不可ルール1：メッセージは必ず1件ずつリズミカルに表示すること。タイピング表示 → バブルポップ → 読了の間を順に挟み、フレーム0で会話全体を一括表示することは絶対に禁止。
skills/text-message-animation/SKILL.md
1. **One message reveals at a time, on a rhythm.** The retention comes from the drip: a beat of typing, then a bubble pops in, then a pause to read. Never dump the whole thread at frame 0 — pace it like a real conversation (a typing indicator before received replies, a short read-gap after each bubble).
ここでの狙い：このジャンルにおける視聴維持率の源泉をストーリーそのものではなく「点滴配信」と捉え、テンポ制御パラメータ（typingMs/delayMs）を単なる飾りではなく最重要要素として扱っています。
妥協不可ルール2：0.5秒以内にどのアプリのUIか即座に識別できること（色・バブル・尾部・既読表示・ヘッダーを完全一致させ、混在は禁止）。
skills/text-message-animation/SKILL.md
If a viewer can't tell which app it is in the first half-second, the illusion breaks.
ここでの狙い：「本物らしさ」を検証可能なチェックリスト（iMessageの青 / SMSの緑 / WhatsAppの深緑＋ダブルチェックマーク）に落とし込み、完全なパレット表を提供。スタイル混在（iMessageバブル＋WhatsAppチェック等）は明示的に禁止しています。
データモデル優先：動画全体を1つのMessage[]配列で駆動。筋書きをデータとして記述し、レンダラーは再生処理のみを担当。
skills/text-message-animation/SKILL.md
Everything is one array of messages. Author the story as data; the renderer just plays it.
ここでの狙い：一括大量生成を可能にする根幹構造。テンプレート1種 × スクリプトN件＝動画N本を実現するため、CSV列（from, text, typingMs, delayMs, status）を直接マッピング可能に設計しています。
タイムラインは配列カーソルから自動導出：メッセージを走査してカーソルを加算し、typingStartMs / typingLenMs / enterMsを算出。スプリング、効果音、スクロールのすべてがこれを参照。
skills/text-message-animation/SKILL.md
const durationMs = cursor + 1000; // tail pad so the last bubble is readable
ここでの狙い：「各メッセージがいつ出現するか」を一意かつ決定論的に導出することで手動のキーフレーム配置を排除。動画尺の自動計算の前提にもなっています。
動画全体の尺はカーソル値からcalculateMetadataで算出し、フレーム数のハードコードを禁止。
skills/text-message-animation/SKILL.md
Compute `durationInFrames` from `durationMs` in `calculateMetadata` so a longer script makes a longer video automatically.
ここでの狙い：スクリプトが長くなると動画が途中で切れたり余白が生じたりする大量生産特有の事故を防止。各スレッドが自身の尺を個別に自動計算します。
タイピングインジケーターは受信メッセージの直前にのみ表示し、正弦波ブレス・フレーム駆動で制御（CSSアニメーションタイマーは使用禁止）。
skills/text-message-animation/SKILL.md
Only received messages type; sent messages just pop (you don't watch yourself type).
ここでの狙い：「リアルさ」を役割ルールに分解（自分自身のタイピングは相手画面に映らない）しつつ、ヘッドレスレンダリング環境でもインジケーターが確実にアニメーションするよう保証（タイマーではなくフレーム駆動）。
自動スクロールはスプリングで目標変位に収束させ、最新バブルを瞬間移動ではなく視野の下部1/3に自然に着地させる。
skills/text-message-animation/SKILL.md
Animate the scroll offset toward the target with a spring each time a message lands — it should glide, not jump.
ここでの狙い：スレッドが可視領域を超えた際、最新メッセージが視界に入るかどうかが視聴体験を左右します。スプリング変位により視認性を確保しつつスマートフォンの物理的な操作感を維持します。
メッセージごとに1つの効果音（送信／受信で別音）を割り当て、イベントコールバックではなくフレームタイムラインに直接配置。
skills/text-message-animation/SKILL.md
Never trigger sound off a timer — schedule it on the frame timeline so it survives headless render.
ここでの狙い：「実在感」の半分を音に委ねるとともに、イベント駆動型が機能しない理由（レンダラーにはリアルタイムクロックが存在しない）を明確化。リファレンスには各音300ms未満の調整法とキーボード環境音の扱いも記載。
縦型セーフエリアを4段階の余白で定義（上部ステータスバー約120px、ヘッダー約150px、下部入力部＋プラットフォームUI約360px、サイド余白）。
skills/text-message-animation/SKILL.md
| Bottom input + UI | ~360px | Fake compose bar AND the platform's caption/CTA/audio UI both crowd the bottom |
ここでの狙い：本スキルの下部禁止領域（360px）は同種短尺動画（320px）より大きく設定。「ダミー入力欄」とプラットフォームUIの両方を避けるためであり、バブルが画面端に密着しないことがスマホらしさの視覚的手がかりとなります。
検証ループ：最初にタイピング中・中間・末尾の3枚の静止フレームを出力。「タイピングフレーム左側には3点リーダーのみで実バブルがないこと」「最新バブルが入力欄に隠れていないこと」などを判定基準とする。
skills/text-message-animation/SKILL.md
At a typing frame the indicator (not the bubble) shows on the received side; the bubble pops only after.
ここでの狙い：「テンポの良さ」という抽象的な要求を客観検証可能なフレーム単位のチェックに変換。リファレンスには同一レイアウトの単一HTMLプレビューと`?t=N`シークハーネス（リポジトリのseek-shot.shに対応）も収録。
2コア機能
013種類のアプリChromeとカラーパレット（iMessage青 / SMS緑 / WhatsApp深緑＋ダブルチェックマーク）、ヘッダーバーおよびステータスバーを含む
02バブルおよび尾部のルール：max-width角丸ピル形状、連続する同一送信者の最後のメッセージにのみ尖角尾部を付与
03スプリング挙動のバブルポップイン ＋ 3点タイピングインジケーター（正弦波ブレス、フレーム駆動）
04既読レシート / タイムスタンプ区切り / Tapbackリアクション（グローバルフレームではなく各バブルのenterMsにアンカー）
05自動スクロール（スプリングによる目標変位追従、最新バブルが下部1/3に位置）
06メッセージごとの効果音（送信/受信）、enterMsに基づきフレームタイムラインへ配置。オプションのキーボードタイピング環境音
07データ駆動型の一括生成：JSON/CSVスレッド → Message[] → 1回のバンドルでN本まとめてレンダリング（@remotion/renderer）
08軽量プレビューパス：同一レイアウトの単一HTMLファイル ＋ `?t=N`シークハーネス（リポジトリ内scripts/seek-shot.shに対応）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx remotion still / render / compositions |
| package | @remotion/bundler + @remotion/renderer（批产路线：bundle 一次、renderMedia 多次） |
| cli | scripts/contact-sheet.sh + scripts/probe-mp4.sh（仓库根共享验证工具箱，SKILL.md 明列） |
| cli | scripts/seek-shot.sh（Light tier：驱动单文件 HTML 的 `?t=N` harness 截图） |
| network | （可选，reference 建议）Remotion Lambda 并行渲染上百条片 |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠（ファイルパスと抜粋）
- scripts/: ローカルスクリプトまたはコマンドの実行: （SKILL.mdに明記された検証ループ）`npx remotion still TextThread out/f-{typing,mid,end}.png
- 网络端点: 外部ネットワークアクセスの宣言: `npx remotion …` および量産フェーズの `@remotion/bundler`/`@remotion/renderer`：初回実行時にnpm公式レジストリ経由で取得
- 本地工作目录: ファイル読み書きと成果物出力: エージェントが本スキルに基づき構築するRemotionプロジェクトおよびout/thread.mp4（または一括生成時のout/chat-001.mp4 … out）
監査ノート： 3段落の自己証明：① 判定対象＝skills/text-message-animation/（find確認によりSKILL.md、references/{bubble-recipes.md,data-driven.md}、README.mdの3つの.mdファイルと0バイトのREADMEのみが存在、スクリプトおよび静的アセットは一切なし）；② ディレクトリ自体の挙動＝ローカル書き込み（Remotionプロジェクト、out/*.mp4、静止画、chat.htmlプレビュー）＋ローカルCLI（`npx remotion`；ffmpeg/ffprobeおよびplaywrightスクショはリポジトリ直下のscripts/を経由）、skills/全体で`process.env` / `api[_-]?key` / `token` / `cookie` / `https?://`の該当は0件；③ 唯一のネットワーク面はnpm公式チャンネルからのパッケージ取得（remotion / @remotion/*およびseek-shot用playwright）であり、リポジトリ内の既存ブルー判定事例（hyperframes, general-video, motion-background）と同一基準。リファレンス記載のRemotion Lambdaはユーザー自身のクラウド契約を利用した拡張パスであり、スキルのデフォルト挙動ではなくスキル側の認証情報読み取りもなし。イエロー/オレンジへの引き上げ理由なし：固定公開エンドポイントへのクエリなし、スクレイピングなし、認証情報/環境変数の読み取りなし、外部へのアセット送信なし（音声・アイコンはローカルファイルであり外部サービスへは未送信）。レッド判定外：TLSダウングレードなし、サンドボックス無効化なし、対自動化回避なし、任意コード実行面なし。留意点（判定変更なし）：外部データ（CSV/LLM出力）がそのまま画面テキストに反映される点（zodは構造のみ検証し内容は不問）、フェイクチャットUIを用いた動画制作に伴うプラットフォーム規約および倫理面のリスク（本レポートは技術的調査のみを対象とし、用途の是非は評価対象外）。
5二重目の独立検証
- [ok] 「一次一条 + 打字只出现在收到的消息」是否真在代码里成立（防第一遍只读散文） — reference §5/§9 的组件把每条消息包在 `<Sequence from={f(m.typingStartMs)}>` 内，仅当 `m.typingLenMs > 0`（由 `m.from === "them" ? (m.typingMs ?? 800) : 0` 决定）才渲染 `<Typing />`，随后 `<Sequence from={f(m.enterMs - m.typingStartMs)}>` 弹泡；SKILL.md 也明写 "Only received messages type; sent messages just pop"。声明与实现一致。
- [ok] 数据驱动时长（calculateMetadata）是否真能自动出正确长度 — SKILL.md 给 `durationMs = cursor + 1000` 并写 `Compute durationInFrames from durationMs in calculateMetadata`；reference §9 的 Composition 把 `durationInFrames={300}` 标为默认值并由 `calculateMetadata` 覆盖为 `Math.ceil((durationMs / 1000) * 30)`，§4 再次强调 "never hand-set the duration"。三处自洽。
- [discrepancy] reference 示例 import 的模块是否随包分发（第一遍未察觉） — data-driven.md §5 的批渲染脚本写着 `import { csvToThreads } from "./csvToThreads";`，但仓库内并不存在 csvToThreads 文件（全仓仅 .md 与 .sh/.git）。属示意代码：照抄会直接报模块不存在，读者需按 §3 的 CSV 列约定自写映射。同型问题在 CSV 示例里也可见（示例行 `2,Alex,me,no,,400,read` 省略了线程首行）。对 pin commit 有效的真实出入，非虚假能力声明。
- [discrepancy] 音效能力落地是否需要用户自备资产 — SKILL.md 与 reference §8 都用 `staticFile(m.from === "me" ? "send.mp3" : "receive.mp3")`，但仓库内不含任何 mp3；data-driven.md 只在 Tips 里提醒 "Keep `send.mp3` / `receive.mp3` / fonts in `public/`"。结论：音效同步是能力，但前置资产（发/收提示音、字体、头像）必须由用户提供——SKILL.md 的输出清单「One pop/ding per message」在缺资产时会静默退化。
- [ok] 「轻量预览（`?t=N`）」与仓库 Light tier 脚本的契约是否真的对齐 — bubble-recipes.md §10 的 HTML 里实现了 `const t = new URLSearchParams(location.search).get("t"); if (t !== null) { tl.pause(); tl.seek(parseFloat(t)); }`，与 scripts/README.md 描述的 seek-shot.sh 契约（页面 load 时 `tl.pause(); tl.seek(t)`）逐字对应。三包中只有本 skill 真能用上 seek-shot.sh。
- [unlocatable] 「one of the highest-retention faceless short-form formats」是否有据 — SKILL.md 开头断言本格式为最高留存的 faceless 形式之一，仓库内无数据、无引用、无来源标注；本次为只读侦查，不验证该断言，仅记为文档声明。
- [discrepancy] 包间一致性：同为 2026-06-22 发布的三个 iart 包，skill 目录结构是否统一 — tiktok 包四个 skill 各带人读 README（1377–1494 字节）；本仓库的 text-message-animation 与 youtube 包的两个 skill 的 README 均为 **0 字节**。功能不受影响（README 非 skill 加载所必需），但包间文档完整度不一致，属可核查的结构出入。
6結論
最適な用途： 最適：チャットストーリーやフェイクテキスト動画（TikTok/Reels/Shorts）を制作するクリエイターや量産チーム。「1テンプレート × 複数スクリプト/CSV」によるファクトリー型量産、および会話ごとに尺・効果音・自動スクロールを個別調整する必要があるプロジェクトに最適。Remotion出力前に単一HTMLでレイアウトを素早く試作したいワークフローや、「量産前にまず代表スレッドを1本検証する」という制作規律を守れるユーザーに適しています。
不向きな用途： 不適：① 長い会話や読み返しが必要な長尺コンテンツ（本形式はテンポを重視するため、長文の一撃表示には不向き）；② 本物のアプリのスクリーンショットや実稼働中のチャットデータ連携を必須とするコンプライアンス案件（完全レンダリングによるシミュレーションUIであり、IMサービスとは一切未接続）；③ オーディオ素材がなく、効果音を用意する予定もないチーム（出力要件の音響チェックを満たせません）；④ 100%完全自動の品質検査を求めるパイプライン（重要な判定基準には人間による静止画目視が必要）；⑤ 「フェイクチャット」題材に伴うプラットフォーム規約や倫理的リスクを受け入れられないユーザー。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload text-message-animation.tar.gz
sha256:
Option B · Copy Guide for Agentfdd9560a3ce85697…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3a800e1e9b.