Content & Media Creation · iart-ai/text-message-video-skills
text-message-animation
This skill should be used when the user asks to "make a fake text message video", "animate an iMessage conversation", "create a text story video", "do a chat reply animation", "WhatsApp/SMS conversation video", "typing indicator animation", "render a chat thread to a video", or "batch text-message videos from a script/CSV". Covers sent/received bubble layout, staggered appear timing with typing indicators, read receipts/timestamps, per-message pop sound-sync, 9:16 safe-area, and data-driven render from a messages array.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Non-negotiable rule 1: Reveal only one message at a time with rhythm—type first, pop bubble second, leave reading pause third; never dump the entire conversation at frame 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).
What is being done here: Defining retention for this category as "drip-feeding" rather than raw plot, making rhythm parameters (typingMs/delayMs) first-class citizens rather than mere decoration.
Non-negotiable rule 2: Chrome must be recognizable as the specific app within half a second (colors, bubbles, tails, receipts, and headers all aligned); no mix-and-matching allowed.
skills/text-message-animation/SKILL.md
If a viewer can't tell which app it is in the first half-second, the illusion breaks.
What is being done here: Turning visual fidelity into an auditable checklist (iMessage blue / SMS green / WhatsApp dark green + double checkmarks) with a complete palette table; mixing styles (e.g., iMessage bubble + WhatsApp checkmark) is explicitly forbidden.
Data model first: The entire video is driven by a single Message[] array; plot is expressed as data, while the renderer only handles playback.
skills/text-message-animation/SKILL.md
Everything is one array of messages. Author the story as data; the renderer just plays it.
What is being done here: Establishing the root enabler for batch production—1 template × N scripts = N videos; CSV columns (from, text, typingMs, delayMs, status) are designed for direct mapping.
Derive timeline via array cursor: Traverse messages and accumulate cursor to produce typingStartMs / typingLenMs / enterMs, which all springs, sound effects, and scrolling read from.
skills/text-message-animation/SKILL.md
const durationMs = cursor + 1000; // tail pad so the last bubble is readable
What is being done here: Converting "when each message appears" into a single deterministic derivation to eliminate manual keyframing—also the prerequisite for automatic duration calculation.
Delegate duration calculation to calculateMetadata via cursor; hardcoded frame counts are forbidden.
skills/text-message-animation/SKILL.md
Compute `durationInFrames` from `durationMs` in `calculateMetadata` so a longer script makes a longer video automatically.
What is being done here: Resolving typical batch production accidents where scripts run long and videos cut off or leave blank space; each thread computes its own length independently.
Typing indicators only appear before received messages, using sine breathing and frame-driven timing (no CSS animation timers).
skills/text-message-animation/SKILL.md
Only received messages type; sent messages just pop (you don't watch yourself type).
What is being done here: Breaking realism into role rules (you don't watch yourself type) and ensuring indicators keep animating during headless rendering (frame-driven rather than timers).
Auto-scrolling uses springs to approach target offset, landing the latest bubble in the lower third of the viewport rather than snapping.
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.
What is being done here: Once the thread exceeds viewport height, visibility of the latest message dictates viewer retention; spring movement ensures visibility while preserving physical phone feel.
Schedule a sound effect per message (different for send/receive) directly onto the frame timeline rather than via event callbacks.
skills/text-message-animation/SKILL.md
Never trigger sound off a timer — schedule it on the frame timeline so it survives headless render.
What is being done here: Entrusting half of the realism to audio while explaining why event-driven hooks fail—the renderer lacks a real-time clock. Reference also provides sub-300ms tuning per message and keyboard background hum.
Vertical safe area defined across four margins (top status bar ~120px, header ~150px, bottom input + platform UI ~360px, side gutters).
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 |
What is being done here: Setting a bottom forbidden zone (360px) larger than standard short-video skills (320px) to clear both fake input bar and platform UI; bubbles never touching screen edges is key to the phone look.
Validation loop: Produce three still frames first (typing frame, midpoint frame, end frame); criteria include "typing frame shows only three dots on the left, no real bubble" and "latest bubble not covered by input bar".
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.
What is being done here: Turning abstract pacing requirements into deterministic, frame-level inspections; reference also offers a single-file HTML preview with `?t=N` seek harness matching the repo's seek-shot.sh.
2Core Capabilities
01Three app chromes and palettes (iMessage blue / SMS green / WhatsApp dark green + double checkmarks), including header bar and status bar
02Bubble and tail rules: max-width pill layout, tails applied only to the final message in consecutive same-sender runs
03Spring-animated bubble entrance + three-dot typing indicator (sine breathing, frame-driven)
04Read receipts / timestamp dividers / tapback reactions (anchored to each bubble's enterMs rather than global frames)
05Auto-scrolling (spring-approached target offset, latest bubble landing in the lower third)
06One sound effect per message (send/receive), scheduled into frame timeline by enterMs; optional keyboard typing ambient noise bed
07Data-driven batch production: JSON/CSV threads → Message[] → render N videos in a single bundle (@remotion/renderer)
08Lightweight preview path: identical-layout single-file HTML + `?t=N` seek harness (matching repository scripts/seek-shot.sh)
3External Dependencies
| 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 并行渲染上百条片 |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Local script or command execution: (Validation loop explicitly listed in SKILL.md) `npx remotion still TextThread out/f-{typing,mid,end}.png
- 网络端点: External network access declaration: `npx remotion …` and batch stage `@remotion/bundler`/`@remotion/renderer`: fetched via official npm registry on first run
- 本地工作目录: File I/O and artifact output: Remotion projects and out/thread.mp4 (or out/chat-001.mp4 … out during batch runs) generated by agent following this skill
Audit Notes: Three-part self-attestation: 1. Target evaluated = skills/text-message-animation/ (find confirms only SKILL.md, references/{bubble-recipes.md,data-driven.md}, README.md—three .md files plus one 0-byte README, zero scripts, zero assets); 2. Internal directory behavior = local writes (Remotion project, out/*.mp4, still frames, chat.html preview) + local CLI (`npx remotion`; ffmpeg/ffprobe and playwright screenshots routed via repository root scripts/), zero matches across entire skills/ directory for `process.env`, `api[_-]?key`, `token`, `cookie`, or `https?://`; 3. Only network surface is fetching packages via official npm channels (remotion, @remotion/*, and playwright for seek-shot), fully consistent with blue-tier precedents in the repo (hyperframes, general-video, motion-background); Remotion Lambda suggested in references is an optional user-provided cloud expansion path, not default skill behavior, and does not read credentials on the skill side. No escalation to Yellow/Orange: no fixed public endpoint queries, no scraping, zero credential/env var reads, zero media exfiltration (audio and avatars are local files, never sent to third-party services). Not Red tier: no TLS downgrades, no sandbox escapes, no anti-automation circumvention, no arbitrary code execution surface. Noteworthy context (retaining tier): external data (CSV/LLM output) feeds directly into on-screen copy; zod validates structure, not content; fake chat interfaces used for fake text themes carry platform policy and ethical considerations (this review conducts technical evaluation only, without judging use-case intent).
5Second-Pass Verification
- [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 加载所必需），但包间文档完整度不一致，属可核查的结构出入。
6Verdict & Scenarios
Best for: Best for: Creators and batch production teams producing chat-story / fake text message vertical videos (TikTok/Reels/Shorts); especially suited for assembly-line pipelines with "1 template × N scripts/CSVs" and projects needing individual timeline, sound effect, and auto-scroll alignment per thread. Also ideal for workflows that test layouts rapidly in single-file HTML before rendering in Remotion. Best for users who follow the discipline of "validating one representative thread before batching".
Not for: Not suitable for: (1) Long conversations or long-form reading content (this format relies on rhythm; sequential popping degrades for long texts); (2) Compliance scenarios requiring genuine app screenshots or live chat data integration—this is a purely simulated interface with no IM service connections; (3) Teams without audio assets and unwilling to prepare notification sounds (cannot fulfill output checklist audio criteria); (4) Pipelines demanding 100% automated quality control (core criteria still require human inspection of still frames); (5) Users who do not accept platform risks or ethical considerations surrounding fake text content.
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload text-message-animation.tar.gz
sha256:
Option B · Copy Guide for Agentfdd9560a3ce85697…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 3a800e1e9b.