Film 01 · Story-first
Hire to retire
47.5 secondsVoice + musicInteractive HTML
One employee moves through onboarding, the app, rostering, clocking, timesheets, payroll and payslip delivery. Product truth is simplified into a cinematic story.
A practical AI motion playbook
Make the webmove.
Turn a prompt, a few brand files and a soundtrack into an interactive motion video—using the same tools that make a webpage.
One connected story
HIREROSTERTRACKPAY
HTML
CSS
JS
01
Describe the story
02
Build one timeline
03
Share the page
2finished films
1exact-time timeline
0motion frameworks
∞creative directions
Two different briefs
Same simple idea.
Very different films.
Both pieces are live webpages. Press play, scrub the timeline and inspect the source idea in its native form.
Film 01 · Story-first
Hire to retire
Film 02 · Technique-first
AI agents showcase
How to create one
What to do.
Use this sequence to go from an idea to a browser video that is ready to review or share.
01
Define what you want to communicate
Define what the viewer should understand or feel. The strongest film followed one employee from first day to payday; it did not try to explain every product screen.
Message + audience02
Provide useful documents
Supply the brand guide, real product references, a soundtrack if timing matters, and a technique library. These are guardrails and possibilities—not a rigid storyboard.
Brand + references + audio03
Build one timeline
The browser page is both the live prototype and the source of every frame. Playback, scrubbing and export all call the same exact-time renderer.
HTML + CSS + JavaScript04
Review key moments
Check a handful of key timestamps before spending time on a full render. Opening, transitions, dense scenes and the final frame reveal most issues quickly.
Check representative frames05
Share the HTML or render an MP4
For an internal audience, the interactive HTML is often the finished piece. Render an MP4 only when you need a portable upload, social cut or formal master.
Choose the required outputCopy and edit
Starting prompt.
Download the two files below, complete the brand template, attach both to your Codex task, then replace the remaining bracketed sections and add any product references.
Create a browser-made motion video for [your brand or product].
OUTCOME
[Describe the one thing the viewer should understand or feel.]
AUDIENCE
[Who is this for?]
DURATION + AUDIO
[Target duration and soundtrack path, if there is one.]
STORY
[List 5–8 moments. Keep it to one connected story, not a module slideshow.]
BRAND + VISUAL INPUTS
- Complete the attached brand-context-template.md and use it as the brand source of truth.
- Read the attached browser-motion-technique-prompt-library.md as a menu of what is technically possible with HTML, CSS and JavaScript. Select only the techniques that help this story.
- Inspect any supplied product screenshots or existing pages. Preserve real terminology and recognisable product structures, but simplify them for motion.
BUILD
- Build the video as HTML, CSS and JavaScript. Do not add an animation framework unless it is genuinely necessary.
- Make the page the prototype and the frame source.
- Put every visual state on one deterministic timeline exposed as window.render_at_time(seconds).
- Also expose window.motion_duration and window.motion_ready.
- Include play, pause, restart, scrubbing and audio synchronisation.
- Use one recurring object, person or visual motif to connect the scenes.
- Prefer transitions where an outgoing shape becomes part of the next scene.
- Use a seeded generator for any random-looking motion.
- Keep text readable and hold important states long enough to understand.
WORKFLOW
1. Inspect the supplied files.
2. Create a concise scene map and timing/cue plan.
3. Build the complete interactive HTML timeline.
4. Export representative frames from the opening, middle, climax and ending; fix visual or timing issues.
5. If the goal is team sharing, stop at the polished interactive HTML page.
6. Only if an MP4 is requested, capture exact frames in a headless browser and encode them with FFmpeg.
Start by summarising the creative direction and scene map, then implement through completion.A menu, not a checklist
Prompt-ready
visual techniques.
The original reference analysis was useful because it showed what the browser could do. These versions are written to be pasted directly into a creative brief.
01
Make words behave
Kinetic type
Keep one sentence stem stable while a key word changes. Use scale, blur, weight, cropping and temporal echoes instead of relying on fades.
Prompt language
Use a stable sentence stem with one changing word; animate weight, scale, blur and crop, with faint previous states as temporal echoes.
02
Connect the scenes
Geometry continuity
Let a card become a phone, a shift become a clock-in control, or a circle become a portal. Reusing shape makes separate scenes feel like one journey.
Prompt language
Design geometry-preserving transitions: the outgoing scene's main shape must transform into a meaningful object in the next scene.
03
Show cause and effect
Product UI theatre
Typing, cursor travel, hover, click, active tabs, changing statuses and progressive messages make an interface understandable without narration.
Prompt language
Treat the cursor as a character and use clear UI microstates—typing, hover, click, progress and status changes—to explain cause and effect.
04
Create complexity cheaply
Generative systems
Generate repeated cards, people, shifts or particles from arrays. Use seeded variation so the result feels organic while every timestamp stays repeatable.
Prompt language
Generate repeated DOM elements from data arrays with seeded variation in position, scale and delay so exact timestamps always reproduce the same frame.
05
Use the whole frame
Depth + composition
Combine a soft atmosphere layer, a clear hero object and occasional oversized foreground elements. Perspective and partial cropping can make flat DOM feel cinematic.
Prompt language
Compose three depth planes: soft atmosphere, primary content and an occasional oversized foreground object using perspective, blur and controlled cropping.
06
Give motion targets
Music-led timing
Place small events on beats and reserve palette changes, portals and giant type for phrase boundaries. Wave the intensity instead of moving everything constantly.
Prompt language
Place meaningful micro-events every 0.4–0.8 seconds in dense passages and reserve major transformations for clear four- or eight-bar phrase boundaries.
The Microkeeper case study
Brand settings.
Type
Ubuntu+ Open SansUbuntu for headings. Open Sans for supporting copy, captions and interface text.
Core palette
#da0813#2d314f#c1e5eb#5fe2f0#f4f4f8#ffffff
Digital assets
Pale-blue texture.Light product surfaces.Use the approved blue texture behind software mockups. Keep the interface and text clear.
Use red sparingly
- Good: one key word in a hero title
- Good: the logo or primary warning/action
- Avoid: full section backgrounds
- Avoid: repeated labels and routine decoration
Source files
Files to use.
Use the adapted files when writing a new brief. Keep the originals nearby when you need deeper brand or reference context.
Start here
Starter prompt
The full reusable prompt from this page, ready to adapt in Codex.
Fill this in
Brand context template
A neutral, original template for turning your own public brand choices into useful AI context.
Adapted
Technique prompt library
Visual techniques rewritten as practical language to add to a prompt.
External example
Atlassian DESIGN.md
A public example of detailed, machine-readable design context. Linked for reference—not copied or adapted here.
Original
Reference video analysis
The scene-by-scene visual extract that began the experiment.
Optional production
Edit plan + renderer
A real timing contract and the headless-browser/FFmpeg renderer behind the second film.
Download
Complete site source
A reusable ZIP containing the site app, both browser videos, prompts, the neutral brand template and technical examples. Add it to a repo so an LLM agent can inspect the full context.
Now make yours.