Chat Message Stack
Let the thread build itself, one bubble at a time.
A chat thread animated as it happened: messages slide in one by one, each pushing the older bubbles up with a spring, typing dots bridging the pauses. The gap between messages carries the meaning.
Install it in 3 steps
No sign-up. No CLI tools. Pick your AI, copy one line, paste it over.
Prefer doing it yourself? Buy the skill ($4.99), download the ZIP from your checkout confirmation, unzip it into the directory shown above, restart your AI session — same result. Already bought it? Your AI assistant can download it for you.
What’s inside
One SKILL.md (the playbook) + one starter template. A preview:
Chat Message Stack
When to use
- You want to show a real or reconstructed text conversation on screen instead of just reading it aloud
- A support chat, DM exchange, or group thread is the evidence for a claim ("here's what they actually said")
- A tutorial needs to show a multi-step exchange (user asks, bot answers, user follows up) as a sequence, not a single screenshot
- A story beat lands through messages arriving — the timing of each arrival is part of the drama
- A static screenshot of a long thread would be unreadably small, but the exchange matters line by line
Workflow
- Script the thread (input: conversation → output: ordered message list)
Write out the thread as an ordered list: sender, text, and the beat it plays (setup, twist, punchline, evidence). Keep each bubble ≤25 words; longer messages get split across two bubbles from the same sender, sent 0.4 s apart. Cut any message that does not move the exchange forward — a 12-bubble thread with 5 real beats reads as padding. Decide the sender colors now: two senders max per thread (left/right), a third sender means a group-chat layout instead. - Set the stack layout (input: message list → output: stack geometry)
Bubbles stack from the bottom of the message area upward: the newest bubble lands at the bottom, older ones sit above it. The message area shows the last 3–5 bubbles at readable size; older bubbles slide up and fade to 40% opacity as they leave the focus zone, never fully vanishing mid-thread unless the thread is long (then they scroll off the top). Left/right alignment marks the sender; never rely on color alone — alignment + name label both carry the sender. - Animate each arrival (input: one message → output: arrival keyframes)
Each message enters in three beats: typing indicator (three dots pulsing, 0.5–0.9 s, only for the replying side or for dramatic pauses), then the bubble slides up from below the stack by ~20 px and fades in over 0.25–0.35 s (ease-out), then the whole existing stack shifts up by exactly the new bubble's height over 0.3 s with a spring settle (slight overshoot, ~6 px). The push-up is the signature move: the stack visibly makes room. Never let a new bubble pop in without pushing the stack — that is a slideshow, not a chat.
Template preview
Chat Message Stack — Production Template
One thread, one stack. Script the beats before animating any bubble.
Thread: {thread title / context} — Reconstruction? [ ] Yes — tag on screen [ ] No
Senders (max 2 per thread): Left = {name} | Right = {name} Context line (optional, shown before first bubble): "{e.g. Tuesday, 9:41 PM}"
Message list (each bubble ≤25 words; split long messages into two bubbles)
Typing dots before: {message #s that get a 0.5–0.9 s typing indicator} — replying side only
Stack geometry
- Visible bubbles at full readability: {3–5} | Older bubbles fade to: {40%}
- New bubble enters: slide up {~20 px} + fade in {0.25–0.35 s}, ease-out
