Ship the feature. Clipmunk cuts the clip.

Clipmunk is a drop-in SDK for React and Next.js apps, added with one command. Your coding agent directs cinematic shots of your real UI, or you record a take yourself. Out comes a polished MP4 with a smooth cursor, auto-zooms and music, made on your machine.

Get early access Watch a take ›

localhost:5173/billing

Overview
Billing
Usage
Team

Usage-based plans

Draft · edited just now

Publish

Starter$01k events

Team$2950k events

Scale$991M events

Events / day

Sniffing the UI…

acme.app/invoices

Overview
Invoices
Clients
Payouts

Invoices October

+ New invoice

Northwind Co$4,200Sent
Globex$1,850Paid
Initech$920Paid
Hooli$6,400Due
Umbrella$2,300Paid

New invoice

ClientNorthwind CoAmount$4,200Remind after 7 days Send invoice

Invoice sent to Northwind Co

send-invoice.mp4 · 1920 × 1080 · 0:12

A feature, in four panels.

The part where you would normally open a screen recorder, sigh, and do it four times. Which, from now on, is Clipmunk's job.

feat(billing): usage-based plans #312

⇄ Merged jay merged 9 commits into main

Merge pull request

click.

4:58 PMYou merge #312. It's good. Nobody has seen it move.

› make a clip of the new plans page

Reading CLIPMUNK.md

Found <PlanCards /> and <UsageChart />

Writing plans-reveal.scene.json

4:59 PMYou ask your agent for a clip. In one sentence. Lowercase.

$29Team

CLACK!

5:03 PMClipmunk picks a lens, pulls focus, and calls action on your real components.

jay commented just now

Here's how it moves 👇

▶0:18

🔥 7👀 4🚀 2

5:06 PMThe clip is in the PR before your coffee is cold.

SFX: a screen recorder, not openingTo be continued… (every release)

Six reasons to stop screen-recording by hand.

From the pull request you opened this morning to the launch video you have been putting off since spring.

jay commented on #312

Walkthrough of the new plans page:

▶

LGTM, and I did not even pull the branch.

PR walkthroughs

Show the change, not just the diff. Reviewers watch twenty seconds instead of pulling your branch.

▶v2.4 Usage-based planstoday
▶v2.3 Bulk invitesOct 2
▶v2.2 Keyboard shortcutsSep 18

Changelog clips

Every release note gets a moving picture. Your changelog stops reading like a tax form.

− <Button>Save</Button>

+ <Button>Publish</Button>

plans-reveal.mp4 re-exported

Docs that stay current

Scenes are files next to your code. When the UI changes, export again and the docs are right again.

#481 Invite does nothing on second click

Send invite

Bug reports

“It breaks when I click here” lands better when they can watch you click there.

▶ Create a workspace 0:14
▶ Invite your team 0:11
▶ Send a first invoice 0:19

Onboarding clips

Short clips of the real product, for the new hire or the new customer.

Usage-based plans

launch.mp4 · 4K · 0:42 · lofi

Launch videos

The cinematic one. Camera moves, depth of field and a soundtrack, shot on your actual components instead of a redrawn copy of them. The one you were going to hire someone for.

Directed in plain JSON.

A scene is two files in your project: a recipe and a component. Your agent writes them, you can read them, and git can diff them.

src/clipmunk/scenes/plans-reveal.scene.json

1{
2  "id": "plans-reveal",
3  "definition": {
4    "width": 1920, "height": 1080,
5    "scene": {
6      "camera": { "perspective": 1400, "rotateY": -26, "rotateX": 10 },
7      "focus": { "distance": 1150, "fStop": 1.6, "focalLength": 100 },
8      "nodes": [{ "id": "plans" }]
9    },
10    "motion": {
11      "durationMs": 7000,
12      "tracks": [{
13        "target": { "kind": "camera" }, "property": "x",
14        "keyframes": [
15          { "timeMs": 0, "value": -360 },
16          { "timeMs": 7000, "value": 300 }
17        ]
18      }]
19    }
20  },
21  "music": { "style": "lofi" }
22}

Surface: plans, which is your real <PlanCards />
Camera: 26° off to the left, tipped 10° down
Lens: 100mm at f/1.6, focused 1150px out
Motion: slides left to right across 7 seconds
Music: lofi, timed to the key moments
Output: 1920 × 1080 MP4

Don't fancy writing JSON? Nobody does. That's what the agent is for.

Cracks open in three steps.

About five minutes. Most of it spent deciding which feature to show off first.

Drop it in

One command connects Clipmunk to your app and leaves a guide your agent can read. Nothing reaches your production build.

$ npx clipmunk init

Vite
Next.js
React 18 and 19

Ask, or press record

Ask your agent for a scene in one sentence. Or press the shortcut and click through the feature yourself. Or both.

AltShiftR

Claude Code
Cursor
Codex
your own two hands

Export and post it

Clipmunk renders an MP4 on your machine. Paste it into the PR, the changelog or the docs, and go outside.

$ npx clipmunk export --scene plans-reveal

MP4
1080p
4K

A very local chipmunk.

Something that records your screen should behave itself. Clipmunk does, and everything it gathers stays in the burrow.

Read the FAQ ›

No account. No cloud.

There is nothing to sign in to and nowhere to upload to. Recordings and exports stay on your disk.

Your app's tab, and only that

Clipmunk records the tab your app runs in. Not your desktop, not your messages, not the other forty tabs.

Nothing ships to production

Clipmunk is a development tool. Your production build never hears about it.

Files, not a database

Scenes, edits and sequences are JSON in your project. Review a camera move the way you review any other change.

Honest about its limits

Recording and export run in Chromium. Depth of field is a careful approximation, not ray-traced bokeh. Better you hear it from us.

Questions, answered.

Still curious? Ask Clipmunk. Busy, but surprisingly patient.

Is this just another screen recorder?

No. A screen recorder captures pixels and leaves the editing to you. Clipmunk runs inside your app, so it knows what you clicked and where every element sits. That is how the cursor, the zooms and the 3D shots come out right without you touching a timeline.

How is it different from writing a video in React?

Tools for that have you build new components just for the video. Clipmunk films the components you already shipped, with their real providers, data and styles, so the clip cannot drift away from the product.

Do I need a coding agent?

No. Takes are recorded by hand, and scenes are plain files you can write yourself. An agent just writes them faster. Clipmunk has no AI inside it and never calls one.

What does it run on?

React 18.2 or 19 with Vite or Next.js, and Node 22 for the command line. Recording and export use Chromium.

Where do my recordings go?

Into a folder in your project, through a small server that only listens on your own machine. That is the whole journey.

Is the music really mine to use?

Yes. It is generated in code on your machine, not picked from a library, so there is no licence to check and nobody else with a claim on it.

Get early access.

Ship the feature. Close the screen recorder you never liked. Clipmunk cuts the clip, and it is in the pull request before anyone asks to see it.