From rough drafts to a finished ad.

nullmotion.com  ·  Edit with Claude, Codex, or Cursor  ·  YouTube  ·  Twitch  ·  Kick

_{A finished motion-graphics ad plays on top. Underneath: the simple black-and-white HyperFrames drafts it grew from, one per section, in sync with the film.
Null Studio cuts pauses, captions the words, and turns long videos into vertical clips. You review the edit on a timeline.}

Why · What it does · Showcase · Quick start · How it works · Bring your own references · Project layout · Notes · 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, frame-synced, so you can study how a great ad is built, pitch a concept, or export the whole breakdown as one video.

Every great ad starts as a rough draft. Null shows both at once:

• 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 renders the film and its drafts frame by frame into a smooth, high-bitrate MP4 with the film's audio.

The repo ships three references with their drafts, ready to play:

	Reference	Length	Drafts
	Infinite · Global payments	0:30	7
	SaaS · Launch sequence	1:02	8
	Motion study 08	0:03	3

These clips come from other creators and are used as examples. They are not claims of commissioned work.

git clone https://github.com/blixvip/NullMotion.git
cd NullMotion
npm start

Open http://127.0.0.1:4343. You need only Node.js 22 or newer: there's nothing to install and no keys to configure. Export needs Chrome or Edge (WebCodecs).

Set PORT or HOST to change the bind address (default 127.0.0.1:4343).

1. Sections. scripts/plan-sections.mjs splits each reference into 3–8 sections at real scene changes (FFmpeg scene detection) and keeps every cut. Two-beat drafts switch at the exact moment the film cuts.
2. Drafts. public/drafts.mjs is a small HyperFrames engine: each draft is a 640×360 HTML scene on a paused GSAP timeline. A section is described by one or two beats (text, logo, phone, window, input, chat, cards, list, chart, cloud…), written to match the real frame's layout, text and timing.
3. Playback. The page drives every draft's timeline from the film's clock. The active section follows the film, and the others loop.
4. Export. A hidden copy of the film plays at half speed. requestVideoFrameCallback captures every decoded frame, the drafts are drawn at that frame's exact time, and WebCodecs encodes it at 24 Mbps with the frame's own timestamp. The audio is copied from the reference, and mp4-muxer writes the MP4. Nothing is recorded in real time, so no frames are dropped.

With Python, FFmpeg and ffprobe installed:

python scripts/import-motionclone.py --source /path/to/MotionClone
node scripts/plan-sections.mjs      # sections + scene cuts + contact sheets

Imported media stays local in .local-media/ and public/references/ (both ignored by Git) and takes precedence over the showcase. Videos are hard-linked, so the MotionClone folder must be on the same drive as this repo. Describe each section's beats in public/references/drafts.json. Undescribed sections get placeholder drafts. npm run showcase rebuilds showcase/ from the local library.

The importer creates non-destructive segments, extracts thumbnails, and links the source videos. Original files are read only. The server streams byte ranges, so seeking never reads a whole video into memory.

public/demo.html · demo.mjs · demo.css   the preview page and exporter
public/drafts.mjs                        HyperFrames draft engine (beat kinds)
public/scraps.mjs                        hand-built drafts for the Interface reference
public/editor.*                          the earlier launch editor, at /editor
showcase/                                the three published references
scripts/                                 import, sections, showcase, waveforms, checks
server.js · media.js                     static server, media streaming, audio extraction
test/                                    server, media and editor tests

npm run dev     # restart on change
npm run check   # UI file checks
npm test        # node --test

• The browser only calls this project's own origin. Generation, rendering services and Premiere are not connected. The drafts are authored, not AI-generated.
• The earlier launch editor (reference timeline, trimming, brand overlay) is at /editor, and the original Null Motion template gallery is at /index.html.
• Bundled GSAP and mp4-muxer keep their licenses; see THIRD_PARTY_NOTICES.md. Brand artwork and reference footage belong to their respective owners. No project-wide open-source license has been selected.

💬 Join the Discord for questions, help, feedback, and updates.