compreel
EN中文

Motion vocabulary · Device frames

Browser window

A clean browser window with the product's address, scroll-through, a click ripple and a toast in the corner.

Live loop · 7 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
scrollin-out-sinethe screen scrolling to each scroll key over its dur

This demo

variant"browser"
url"launchreel.ai"
scroll[{"at":1300,"y":300,"dur":1000}]
taps[{"at":3000,"x":720,"y":420}]
notifications[{"at":3600,"app":"LaunchReel","title":"Film rendered","body":"Six shots are ready to watch."}]
brand#6B5BFF
stagedark
<script src="/vendor/motion-vocab.js"></script>
MV.bind("s3", MV.device(el, {"variant":"browser","url":"launchreel.ai","scroll":[{"at":1300,"y":300,"dur":1000}],"taps":[{"at":3000,"x":720,"y":420}],"notifications":[{"at":3600,"app":"LaunchReel","title":"Film rendered","body":"Six shots are ready to watch."}],"brand":"#6B5BFF","stage":"dark","display":"Inter-Bold","body":"Inter-Regular"}));

When to use it in a launch film

A web app where the address itself matters (the product is the site).

Why it works

Without hardware the UI is larger, and the address bar names the product for free.

Do not combine with

  • an address the brief does not give

Job in the film

  • Feature
  • Proof

Natural length

3.0–9.0 s

Make a film with these moves in LaunchReel

More device frames

All motion components →