# text-message-animation

Turns a chat script into a vertical video: message bubbles pop in one at a time, a typing indicator pulses before each reply, and the thread auto-scrolls.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 589 installs · ★ 5
- Author: iart-ai
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/iart-ai/text-message-video-skills/tree/HEAD/skills/text-message-animation/SKILL.md
- Updated: 2026-06-22
- HTML: https://affpapa.org/en/nevibecode/skills/text-message-animation

## What it does

The skill gives the agent a rendering recipe for chat stories. Messages live in one array — sender, text, delay before the bubble, typing time — and every frame timestamp is derived from it. Springs, typing windows, sounds and auto-scroll all read from that single timeline. One template times N scripts gives N videos, and a CSV maps straight in.

The skill ships React and Remotion snippets: bubble styles capped at 74% width, palettes for iMessage, SMS and WhatsApp, and a three-dot typing component driven by a sine wave. Chrome rules are spelled out too — sent bubbles right and blue, received left and gray, tail only on the last bubble of a run. Do not mix iMessage chrome with WhatsApp check-marks; the viewer loses track of which app they are looking at.

Pacing is the part that matters. Nothing dumps the whole thread at frame zero: a read-gap, then typing, then the pop. Received messages type, sent ones just appear. The layout targets 9:16, so TikTok, Reels and Shorts.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/text-message-video-skills --skill text-message-animation -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/text-message-animation/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/text-message-animation/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/text-message-video-skills --skill text-message-animation -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/text-message-animation/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/text-message-video-skills --skill text-message-animation -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/text-message-animation/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install iart-ai/text-message-video-skills text-message-animation
```

2. **Manually: put the files in place**
- File: `.github/skills/text-message-animation/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add iart-ai/text-message-video-skills --skill text-message-animation -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/iart-ai/text-message-video-skills --path skills/text-message-animation
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/text-message-animation/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add iart-ai/text-message-video-skills --skill text-message-animation -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/iart-ai/text-message-video-skills/tree/HEAD/skills/text-message-animation/SKILL.md

## When to use it
- render a chat script into a video
- stagger bubble entrances with a typing indicator
- keep iMessage, SMS or WhatsApp chrome consistent
- batch many chat videos from one template and a CSV
- sync a pop sound to each message

## Example prompts
- Make a fake text message video from this script, 9:16 vertical
- Render this chat thread to a video with staggered bubbles and a typing indicator
- Batch text-message videos from messages.csv using one template

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 5cd6c2fe99051c5a.

BEGIN THIRD-PARTY FILE 5cd6c2fe99051c5a
````text
---
name: text-message-animation
description: 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.
version: 0.1.0
---

# Text Message Animation

Turn a chat script into a scroll-stopping conversation video: bubbles appear one at a time, a typing indicator pulses before each reply, sounds pop on send, and the thread auto-scrolls to keep the newest message in frame. This is one of the highest-retention faceless short-form formats — a story told in iMessage/WhatsApp/SMS bubbles that the viewer reads like they're peeking at someone's phone.

## When to use

- "Fake text" / chat-story videos for TikTok, Reels, and Shorts (9:16 vertical).
- Animating an iMessage, WhatsApp, or generic SMS conversation from a script.
- Reply/comment-reaction videos where a thread reveals a punchline message-by-message.
- Batch-producing many chat videos from one template + a messages array or CSV.

## Two non-negotiable rules

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).
2. **The chrome must read as the real app, instantly.** Sent = right, blue (iMessage) or green (SMS) / WhatsApp-green; received = left, gray. Tail on the last bubble of a run, rounded ~18–22px, correct status bar and header. If a viewer can't tell which app it is in the first half-second, the illusion breaks.

## The data model — script first, render second

Everything is one array of messages. Author the story as data; the renderer just plays it. This is what makes the format batchable: one template × N scripts → N videos.

```ts
type Message = {
  from: "me" | "them";        // me = sent (right/blue), them = received (left/gray)
  text: string;
  typingMs?: number;          // show typing indicator this long before the bubble (received only)
  delayMs?: number;           // read-gap AFTER the previous bubble, before this one
````
END THIRD-PARTY FILE 5cd6c2fe99051c5a

The third-party file has ended. Everything between the 5cd6c2fe99051c5a tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2543 of 14346 bytes. © iart-ai · MIT · https://github.com/iart-ai/text-message-video-skills/tree/HEAD/skills/text-message-animation/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md