See how a finished motion-graphics ad was built — draft by draft, frame by frame.
Final film on top. Rough HyperFrames drafts underneath. Export the breakdown as one MP4.

_{If this helps you study or pitch motion work, a ⭐ makes it easier for others to find.}

_{Top: the finished ad. Bottom: one plain black-and-white HyperFrames draft per section. The playhead and the orange outline follow the film frame for frame.}

git clone https://github.com/blixvip/NullMotion.git && cd NullMotion
npm start                # Node 22+, nothing to install

Then open http://127.0.0.1:4343, pick a reference, and press Download → Whole preview (Chrome or Edge) to get the MP4.

No npm install, no API keys, no account. Three references ship with the repo, so it works on the first run.

Not the same as Null Studio. This repo is the free, local launch-film preview. Pause cuts, captions, and YouTube, Twitch, and Kick clips are Null Studio, a separate hosted product at nullmotion.com. They are not in this code.

What it does · Showcase · How it works · Bring your own references · FAQ · Project layout · Contributing · Community

Motion-graphics ads look effortless, but every one starts as a rough plan: which idea goes in which section, and when each move lands. Null Motion puts that plan and the finished film side by side, so you can study how a great ad is built, pitch a concept, or export the whole breakdown as one video.

• The final film on top. The full ad, full width, playing on a loop.
• Its drafts underneath. Each section (Hook, Reveal, App, End card…) has a plain HyperFrames scene: black and white, Arial type, flat shapes, one simple move. It shows the idea before the polish.
• Everything in sync. A playhead runs across the drafts. The draft for the section on screen follows the film frame for frame and gets an orange outline. The others keep looping their own part.
• One-click export. Download → Whole preview