compreel
EN中文

Motion vocabulary · Device frames

Chat conversation

A WhatsApp-style chat in a phone: typing indicators, messages typed and sent, bubbles that pop, read ticks, auto-scroll.

Live loop · 10 s · 1920×1080 at 24 fps

Parameters

ParameterTypeWhat it does
src"/assets/<picture>.jpg"one of the site's own pictures (a photo, a poster), shown at the frame's width; never a page capture (owner 2026-10-19: rebuild it as `screen`)
screenhtml stringthe screen as the shot's own HTML: the page's elements rebuilt (the default)
scroll[{at, y, dur?}]sparse scroll moves (sine in-out, default 900 ms)
taps[{at, x, y}]taps in screen px
notifications[{at, app?, title, body?, hold_ms?}]banners that drop in
messages[{at, from: "me"|"them", text}]chat: the conversation
url / name / chatPalettestringbrowser address; chat contact name; "brand" or "whatsapp"
x / y / scale / tilt / enterpx / degplacement; tilt = rotateY; enter "rise" | "none"
lang"en" | "zh"the device chrome words ("online", "Message", "now"); default "zh" when the content is Chinese
ease{"<move>": ease}retune any named move (see the entry's moves): a preset name ("out-expo"), a cubic-bezier [x1, y1, x2, y2], {spring: [hz, damping]} or {trapezoid: [accel, decel]}. A wrong move name or curve throws, it never falls back. A move measured from a reference clip (the replica workbench's measure/*.json, frame-keyed) becomes a curve without conversion: MV.fitEase(doc, "x", {from: 133, to: 142}) or `motion-fit <file> --measure x --from 133 --to 142 --ease`
brandhex
Default: #6B5BFF		the site's brand colour; the component derives its accent (>= 3:1 on the stage), surfaces and ink from it
stage"dark" | "light"
Default: "dark"		the stage the component sits on
displayfont stem
Default: "Inter-Bold"		headline stem; name it in the call so the runtime loads it
bodyfont stem
Default: "Inter-Regular"		UI / body stem; name it in the call so the runtime loads it
start_msms
Default: 300		when the component starts, ms into the shot
backgroundboolean
Default: false		draw the stage background (off: transparent over the shot's own stage)
place{x, y, w, h, z?}the component's place in the shot's layout: it fits its 1920x1080 composition into this stage rect (centred, aspect kept); z orders components front to back. Default: the whole stage

Moves and their curves

Every move is eased on its own. Retune one with ease: { "<move>": <curve> }, a curve name or cubic-bezier handles.

MoveCurveWhat it does
device.inout-quartthe device rising 90 px and growing from 0.96x as it enters
tap.approachout-cubicthe finger dot shrinking onto the tap point
tap.ringout-cubicthe ring spreading from the tap
note.drop{"spring":[1.82,0.84]}a notification dropping in from the top with a small overshoot
note.upin-cubicthe notification sliding back up after its hold
chat.scrollout-quintthe thread scrolling up as each message or typing bubble arrives (360 ms)
bubble.pop{"spring":[2.22,0.82]}each message bubble popping in from 0.7x

This demo

variant"chat"
name"LaunchReel"
chatPalette"whatsapp"
messages[{"at":1300,"from":"them","text":"Hi! Send me your product link."},{"at":3000,"from":"me","text":"Here it is: launchreel.ai"},{"at":4800,"from":"them","text":"Got it. I planned six shots for your film."},{"at":6600,"from":"me","text":"Looks good. Make the film."},{"at":8200,"from":"them","text":"Rendering now."}]
brand#2F9E6E
stagelight
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.device(el, {"variant":"chat","name":"LaunchReel","chatPalette":"whatsapp","messages":[{"at":1300,"from":"them","text":"Hi! Send me your product link."},{"at":3000,"from":"me","text":"Here it is: launchreel.ai"},{"at":4800,"from":"them","text":"Got it. I planned six shots for your film."},{"at":6600,"from":"me","text":"Looks good. Make the film."},{"at":8200,"from":"them","text":"Rendering now."}],"brand":"#2F9E6E","stage":"light","display":"Inter-Bold","body":"Inter-Regular"}));

When to use it in a launch film

A product that works in a conversation (support, an assistant, a bot), or a customer's words as proof.

Why it works

Everyone knows how a chat moves, so the viewer reads the content, not the interface.

Do not combine with

  • invented customer quotes (only words from the brief or the site)
  • more than about six messages in one shot

Job in the film

  • Hook
  • Feature
  • Proof

Natural length

4.0–14.0 s

Make a film with these moves in LaunchReel

More device frames

All motion components →