Motion, made from components
Reusable browser frames, device mockups, dashboard UI, typography, and transitions — all animated from exact frame values.
Product videos, written in code.
Turn a product brief and a few screenshots into a launch video. Edit every scene, then export MP4 or GIF.
A DIFFERENT KIND OF VIDEO TOOL
A little creative code goes a long way.
CodeMotion turns a structured project brief into a real React composition. Every scene stays inspectable, repeatable, and easy to change.
Predictable by design
Render the same project twice and get the same video. No black-box prompt loop, mystery credits, or cloud AI dependency.
Your screenshots, in motion
Bring a screenshot into a browser or device frame, then scale, pan, and highlight it inside an editable scene.
FROM BRIEF TO MP4
The creative loop stays yours.
Start with a structured brief. Pick a story shape. Fine-tune scenes in a lightweight workspace. Export when it feels right.
01
Give the story a starting point
Product name, tagline, features, colors, and optional screenshots. No keys or account needed.
02
Shape scenes, not a timeline maze
Adjust the words, durations, transitions, aspect ratio, and animation settings in a focused editor.
03
Render locally. Keep the source.
Remotion renders actual frames; FFmpeg encodes MP4, WebM, or an optimized small GIF.
relayline.codemotion.json
{ "formatVersion": 1, "product": { "name": "Relayline", … }, "video": { "aspectRatio": "16:9", "fps": 30, … }, "scenes": [ { "type": "dashboard", "durationSeconds": 3, … }, { "type": "feature", "durationSeconds": 2.8, … }, { "type": "cards", "durationSeconds": 2.4, … }, … ]}
Plain data, checked before use. CodeMotion never runs code from a project file, so the same file always renders the same video.
START WITH A STORY SHAPE
Nine useful ways to begin.
Each template has its own scenes and pacing. Hover a card to watch it, then make it yours.
SaaS Launch
~13 secA cinematic product reveal, animated dashboard, and a confident closing CTA.
Feature Announcement
~11 secA focused story that moves from the new capability to a live interface highlight.
Startup Promo
~13 secA people-first brand intro, crisp benefits, and a memorable closing message.
App Showcase
~12 secAn animated device presentation with a mobile screen, focused UI moments, and a final CTA.
Developer Tool Launch
~12 secTerminal moments, clean code, and product UI for a technical audience.
Minimal Product GIF
~3 sec loopA compact, looping product moment designed for docs, README files, and release pages.
Release Notes
~13 secA monthly “what’s new” video: the release, the headline updates, and the improvements behind them.
Pricing Promo
~10 secA launch offer or plan announcement with an animated price card and a clear call to claim it.
Customer Story
~12 secSocial proof in motion: a customer quote, the results in numbers, and a second voice to close.
ONE PROJECT, EVERY FORMAT
Landscape, square, and vertical.
Switch the aspect ratio and every scene re-lays itself out. Nothing gets stretched or cropped.
QUESTIONS
Good to know.
Do I need to know how to code?
No. Pick a template, fill in your product details, and edit scenes in a visual editor. The code is there if you want it: every project is a plain JSON file, and you can download the generated React source.
Is CodeMotion free?
CodeMotion itself is open source under the MIT license. Videos are rendered with Remotion, which has its own license: it is free for individuals and companies of up to 3 people, and larger companies need a Remotion company license. Read the Remotion license
Why do I export videos on my own computer?
Rendering a video runs a real browser and video encoder, frame by frame. Doing that on your machine keeps your screenshots private and needs no account or upload. You can try the editor online, then run CodeMotion locally to export.
Can I use my own screenshots?
Yes. Import PNG, JPEG, or WebP images up to 8 MB and show them inside browser or phone frames. They are stored in your browser, not on a server.
Which formats can I export?
MP4, GIF, and WebM, in landscape (16:9), square (1:1), or vertical (9:16), at 720p or 1080p. MP4 and WebM can include your own background music.
Does it use AI?
No. Videos are built from templates and your inputs, so the same project always renders the same video. No API keys or paid AI services are involved.
A GOOD FIRST FRAME IS WAITING
Make a product video that feels like your product.
Start with a template, bring your screenshots, and leave with a real file plus the editable project behind it.
Start a project BUILT FOR PRODUCT STORIES
One studio, a lot of launch moments.
Use the same scene engine for product marketing videos, SaaS launches, feature announcements, developer tool promos, and animated product GIFs.