Engaging explainer

A one-take visual story. A single hero element (in the reference style, a white ball that starts as a toggle's knob) travels through a chain of small interface "stations", and each station reacts to it: it rolls along a slider and pushes it to 100, falls off the end and bounces down a stack of notifications that pop up as it passes, lands on a keyboard and bounces key to key typing a word, hits return and is launched back into the air. The camera never cuts: it keeps the hero near the centre and zooms in for each interaction, and at the climax it pulls far out so the viewer sees the whole course laid out at once, before diving back in to where it all started.

For a product, the stations are the steps of its workflow, laid out spatially on one canvas, and the hero is the thing that moves through that workflow. The pull-out is the "now you get how it works" moment.

You write it as one HTML page that renders any frame from a time value, then render it to MP4 with motion blur and a soundtrack.

Step 1: Get the brief (one message, then go)

Ask everything in one message, then work on your own. Only the product is required; for anything left blank, decide yourself and say what you chose.

1. Product: name, and what it does in a few sentences. A website URL is even better.
2. The one thing the viewer must remember (e.g. "type an idea, get a live app").
3. Brand: colours, fonts, logo file, or "use the website". If none, use the default palette below.
4. Format: 16:9 (1920×1080) or 9:16 (1080×1920). Default 16:9.
5. Length: default is given below for this style.
6. Music: their own track (a file path), or let you synthesise one. Default: synthesise.
7. Direction (optional): scenes they want, a tagline, a call to action, anything to avoid.