Arrange the scenes
Set the product, text and timing for each scene. The timeline controls when each scene changes.
All projects
Motion Studio
Make short films for products
A tool for making short product films by arranging timed visuals, motion, and audio.
Motion Studio uses code to build timed film scenes. Visuals and audio share a timeline, and the rendered frames can be reviewed before use.
Studio tool · WebSee the rendered films.
Product film studies. Use the video controls to play each film.
Review the rendered frames
Check the actual output at key moments before using the film. Product films keep the product as their subject.
How we built it.
Motion Studio renders product films from code. Every frame and sound cue is placed against the same timeline, making the output reproducible and inspectable.
The frame is a function of time
A composition is an HTML page whose render function sets the scene at a requested timestamp. Playwright captures frames in Chromium and FFmpeg assembles them into an MP4. Springs and transforms are computed from time rather than relying on a live browser animation that may behave differently when seeking.
Checks belong beside the renderer
The pipeline produces individual frames, a contact sheet and a QA report. It checks frozen frames, cuts that miss the beat, text layout, audio/video duration and loudness. A determinism check renders selected frames out of order and compares the result. Visual review of the contact sheet still matters because automated checks do not judge the creative direction.
Built with
- JavaScript
- HTML
- CSS
- Playwright
- Chromium
- FFmpeg