07 · HTML video and motion shorts

At a glance

Output	A motion short, exportable to MP4
Time	1 to 3 hours
Type	Video
The hard part	The shot list, not the rendering

When this is the right tool

HTML video is driven by code, so its range is well defined:

Right for	Wrong for
Product feature demos	Anything with filmed material
Data-visualisation animation	Anything needing a person on camera
Launch shorts	Complex editorial rhythm
Changelog videos	Pieces built around sound design
Interface walkthroughs

Its core advantage is that it stays editable. Data changed? Change an array. Copy wrong? Change a string. Then re-render. Conventional editing means rebuilding that section.

Before you start: write the shots

Generate without a shot list and you get beautiful shots that don't connect.

Each shot needs three things:

Shot 1 (0:00 – 0:03)
Visual: the product logo resolving from blur
Text: none
Purpose: establish the brand, let the viewer settle

Shot 2 (0:03 – 0:08)
Visual: a chaotic folder, filenames a mess
Text: "Three minutes to find one file"
Purpose: name the problem so the viewer recognises themselves

Shot 3 (0:08 – 0:15)
Visual: one cursor click, files sort themselves
Text: "Now it's three seconds"
Purpose: the contrast — the core moment of the piece

The purpose line is what matters. A shot without a purpose is a shot you can cut.

The prompt

Make a [N]-second product short.

Shot list:
[paste the format above]

Spec:
- Aspect [16:9 / 9:16 / 1:1]
- 30fps
- Silent (or: leave room for music, which I'll add)

Visuals:
- Palette and type from the current design system
- One motion rhythm throughout: ease-out entrances, around 400ms
- Not everything moves. At most two focal movements per shot.

Constraints:
- Text must hold long enough to read (at least 60ms per character)
- Keep key information away from the frame edges (it may get cropped)
- Label any sample data on screen
- One transition type throughout. Don't change it per shot.

Build the first two shots. I'll check the rhythm before you finish.

Why it's written this way

"Build the first two shots" contains the rework. Two shots tell you whether the pacing is right. Discovering it's too fast after six means redoing all of them.

"At most two focal movements per shot" maps to attention. Three things moving at once means nothing gets seen.

"At least 60ms per character" is a readability rule of thumb. A fifteen-character line needs 0.9 seconds minimum; give it 1.5 to 2 in practice.

"One transition type" is the same principle as step 10 of the deck workshop: consistency beats variety.

Acceptance

• [ ] Every shot has a stateable purpose
• [ ] All the text is readable (read it aloud at normal speed — do you finish?)
• [ ] No shot has more than two focal movements
• [ ] One transition throughout
• [ ] Key information away from the edges
• [ ] Sample data labelled
• [ ] The exported MP4 is legible on a phone (if vertical)
• [ ] Length fits the destination platform

Variants

Data-driven animation

Animate this data:

[paste CSV]

Requirements:
- Bars grow from zero to target on a spring curve
- Figures roll 0 → target in sync
- Stagger the bars 80ms apart rather than starting together
- Hold for two seconds at the end

Data-driven work is where HTML video is strongest — update the numbers and the animation follows.

Vertical, for social

Rebuild this as 9:16 for social.

Requirements:
- Recompose. Don't just crop.
- Larger type (it's being watched on a phone)
- The first three seconds must land — put the core contrast at the top
- It has to work silent (most people scroll muted)
- Under 15 seconds

Captions

Add captions.

Requirements:
- Inside the safe area, not against the edge
- A stroke or a translucent plate so they read over any frame
- Break lines on meaning, not character count
- No more than [N] characters per line

Questions that come up

Rendering is slow.

Expected — video rendering is the heaviest thing in this workflow. Preview at low resolution to settle the pacing, and render high quality once at the end.

The pacing is off.

Pacing is a shot-list problem. Write the timeline out and read the lines aloud against the seconds. If you can't finish, it's too fast.

It looks like a template.

Template feel usually comes from transitions — the stock ones. Specify the behaviour instead ("as the shot changes, the previous subject shrinks back into the background and the new shot opens from its position") and it stops looking generic.

I need music.

Handle audio separately. Build it silent, export, and add the track elsewhere. Or mark beat points in the shot list so the visuals land on the accents.

Related

• Go deeper / Media — choosing between the three media routes
• Deck workshop / Step 8 — the restraint principle