DEV Community: Remocn

How to create videos using Claude Code

Remocn — Sat, 01 Aug 2026 10:57:15 +0000

Remocn gives you 234 copy-paste Remotion components. That solves the parts of a video — the text entrance, the whip pan, the shader background. It does not solve the assembly: what plays when, how long the beat holds, which transition hides which cut. That work is still yours, and it happens in a loop that looks like this: edit TSX, alt-tab to remotion studio, scrub, notice the subtitle lands a beat late, alt-tab back, guess a frame number, repeat.

Claude Code already shortens that loop — point it at a Remotion project, install the remocn skill, and it writes scenes for you. But the agent is in a terminal and the video is in a browser tab, and neither knows about the other. When something looks wrong, you describe it in words: "the logo in the second scene, the one that fades in around frame 90, it's too big." You are being a translation layer between two windows.

Remocn studio removes the translation layer. It is a local macOS desktop app that runs the Claude Agent SDK against a folder on your disk, compiles that folder with its own Remotion bundler, and puts the chat and the player side by side in one window. When the logo is too big, you click it.

┌──────────┬─────────────────────┬──────────────┐
│ projects │ chat                │ preview      │
│          │                     │              │
│ sessions │ streamed answer     │ <Player>     │
│ (SQLite) │ + activity lines    │ + export     │
└──────────┴─────────────────────┴──────────────┘
        Tauri v2 (Rust core)  ⇄  bun sidecar
                                 ├─ Claude Agent SDK
                                 ├─ preview host (the project's webpack)
                                 └─ export (the project's renderer)

It is closer to a purpose-built Claude Code GUI than to a video editor. That distinction drives everything else, so it is worth being explicit about the three decisions underneath it.

Claude produces code, not a spec. The agent writes real Remotion TSX into your folder — the same files you would have written. There is no project JSON, no timeline document, no proprietary format to export from. Close the app and you still have a normal Remotion project that opens in any editor. The accepted cost is that the preview cannot cheaply re-render props; it has to compile source the app has never seen.

Open any folder. The app owns neither your entry point, nor your Remotion version, nor your build config. It adapts to the project instead of the project adapting to it.

It uses your Claude subscription. Auth is picked up from the Claude Code CLI you are already logged into. No API key, no separate OAuth, no per-token billing surprise. The cost of that is honest: the app is inert without Claude Code installed and logged in.

The loop, end to end

Opening a folder

Point it at an existing Remotion project, or use New project… — a vendored template expands offline (a package.json, a tsconfig.json, and a src/Root.tsx with exactly one <Composition id="Main">), then bun install streams its output into the pane while the chat is already usable. Both steps are idempotent, so a failed install offers a Retry that is safe to press after Claude has already edited the scene.

Then the app checks the things it depends on but does not own: whether Claude Code is logged in, which bun is running the sidecar, whether the folder is a Remotion project, whether its dependencies are installed and agree with the lockfile, whether an entry point is registered, and — once the preview compiles — whether any composition exists and whether one of them is called Main.

Everything that passes is silent. The checklist renders nothing at all when there is nothing to act on. Missing dependencies can be installed from the card. Only being logged out locks the composer, because that is the one failure that would otherwise happen on send — a folder that is not yet a Remotion project does not lock anything, since asking Claude to set one up is a perfectly reasonable next move.

Talking to it

The composer picks a mode, spelled the way the Agent SDK spells it: Auto hands routine calls to Claude Code's own classifier, Accept edits lets writes inside the project through and still stops at every command, and Plan makes the turn read-only. Plan mode ends in a card holding the plan itself: approve it and the same turn carries on building, or send it back to be revised without losing the turn. The mode belongs to the session and survives a restart.

Underneath the mode sits a permission gate that decides every call reaching it. Read, Glob, Grep, Write and Edit run silently as long as every path resolves inside the opened folder. Bash always asks. Anything resolving outside the folder always asks — and "resolves" means symlinks and .. are expanded first, so ../../.ssh/config is outside the folder whatever the literal argument said.

Four choices on the card: approve once, always allow this session, decline (the agent gets a message it can carry on from, not an error that ends the turn), or cancel the turn. The card sits above the composer rather than in the transcript, because an approval is a thing to answer, not a thing that happened.

The composer also carries a model picker, a reasoning-effort setting from low to max, a context-window ring that fills as the session grows, and image attachments — Cmd+V pastes a screenshot straight in.

Reading what it did

Assistant answers render as markdown — headings, lists, syntax-highlighted code — streamed with a per-word reveal, so an 85-character delta arriving every 470 ms reads as typing rather than stepping.

Every tool call collapses to one compact activity line: Edit src/Scene.tsx, Bash bun run build, with an icon for the kind of work and its state in the icon's colour. Click it and it expands into a real line diff computed from the tool's own old_string/new_string — not parsed out of result text — or the command next to its output. A run of consecutive calls folds into one row showing the newest of them and a +N, which makes that row a live ticker of what the agent is doing right now. Only a failure breaks a run and keeps its own row, so an error is never hidden behind a chevron.

Turns keep running when you look away. Each session has its own status — running, waiting on a permission, failed — and a turn that finishes while you are elsewhere leaves an unread dot. The projects pane orders itself around that: sessions needing you float to the top of their group, a collapsed project carries a rollup for the worst state inside it, and the "Show N more" cap counts only quiet rows, so it can never hide the one thing that was asking.

Watching it play

The preview pane runs the project's own Remotion bundler, with our entry mounted instead of the Studio UI.

That turned out to be a much smaller trick than it sounds. Remotion's webpack entry is an array whose last element is a parameter, and @remotion/studio/previewEntry is only Internals.waitForRoot((Root) => render(<Studio …/>)). Studio is a UI on top of the bundler, not part of it. Taking that slot and mounting <Player> gives you a pane that is ours and pixels that are Remotion's — staticFile(), Tailwind, path aliases, webpackOverride and every remotion.config.ts setting behave exactly as they do under remotion studio, because they are the same webpack.

A Vite host was tried first and quietly produced 3 CSS class selectors where Remotion's bundler produced 742: enableTailwind is a splice of webpack loaders, and Vite falls through to the project's own PostCSS config instead.

Which composition plays is folder → Main → first, and the folder wins because it is the only thing you actually pointed at — opening src/demos/launch-film in a project with forty compositions should not play transition-lab. The pane always says which of the three rules fired.

Pointing at what's wrong

Two gestures, deliberately separate because they answer different questions.

Inspect answers change this. Turn it on, hover the frame, click the element you mean, and it lands in the composer as an [Element #N] token you can point at from your sentence. What Claude receives with that token is the absolute path, line and column of the JSX that rendered the node, the component that owns it, a project-only component stack, the composition, the frame you were looking at, the frame within the enclosing scene with its timing, and the node's own markup. "Make this bigger" becomes an instruction, not a riddle.

Source resolution is React Grab driven headlessly — telemetry off, its overlay taken down entirely, the one web-font @import in its stylesheet stripped when the file is served, and a test that fails if a version bump reintroduces one. The hit-testing is ours, because a picker for video needs rules a general one does not: it takes the first element that actually paints at the point rather than the topmost transparent wrapper, and it climbs out of inline wrappers to the first block-level element — so clicking a word in a line animated word-by-word selects the line, not the word. An SVG is always a drawing: clicking one path selects the whole icon. Holding Alt turns every rule off and takes the literal node.

Snapshot answers look at this. Turn it on and the player pauses; click the frame to attach the whole thing, or drag a rectangle to attach just the part that is wrong. It arrives in the composer as an ordinary [Image #N] attachment.

The pixels come from renderStill in the project's own @remotion/renderer — the path an export will take — so what Claude sees is what will be in the file, not what a webview happened to paint. Measured against a real project, the still is byte-identical to what npx remotion still produces for the same frame in the same session.

A capture takes 83–122 ms, because the render page stays open across captures. It started at 8.4 s. The navigation was the whole cost: that page pulled 19.9 MB over 71 requests, 64 of them fonts, and selectComposition and renderStill each did their own. Caching the composition measurement, warming the page while you are still aiming, and holding it open past the four slow steps of renderStill is what turned it into a gesture that answers at the speed of a click.

Getting the file out

Export renders the playing composition to out/<Composition>.mp4 through the project's own @remotion/renderer, with progress that reads Rendering — 64/300 frames, then Encoding, then Combining the audio and the video, and a reveal in Finder at the end.

There is no second bundle, and that is the feature: the preview host has already compiled this project and is already serving the render page it compiled, so the export renders from the same URL a snapshot does. A second bundle() would cost another ~7 s and 1.67 GB of peak memory for a byte-identical result — and it could differ from what is on screen, which is the one thing an export must never do.

Before rendering, the app reads remotion, @remotion/renderer and @remotion/bundler out of your node_modules and refuses when they disagree, naming every package that drifted. The render writes a dotfile and renames it on success, so a cancel or a failure cannot leave a half-written Main.mp4 that looks finished, and cannot destroy the export you made ten minutes ago. Cancelling waits for Remotion to actually stop before deleting the partial.

Remembering all of it

Every conversation lives in the app's own SQLite, written by the sidecar as the events arrive. Closing the window does not throw the transcript away; reopening a session reloads its blocks, rebinds the folder and resumes the same SDK session. Only Claude Code's session_id is borrowed — its transcript files are not a public contract and would break the pane on any CLI update.

A folder is a first-class row, so the same project opened twice (through a symlink, say) is one history rather than two. A project whose folder has moved keeps its transcripts and collects under a Moved or deleted heading, with a Locate… that reconnects it instead of forking a second project. Deleting a session is undoable for a few seconds, and quitting inside that window drops the delete rather than rushing it.

What the agent already knows

What makes this remocn studio and not a generic Claude Code GUI: the app bundle carries a Claude Code plugin with four skills — the vendored remocn, remotion-best-practices and remotion-interactivity, plus one of our own, video-lessons.

video-lessons is 44 KB of production rules where every entry exists because the opposite was tried and had to be re-rendered: why text entrances travel on X and never on Y (browsers snap glyph baselines to whole device pixels, so the identical curve that ticks vertically is smooth horizontally), why a transform on a span silently forces inline-block and breaks two-tone paragraphs, which TransitionSeries shapes render an empty frame at a boundary. The turn's system prompt tells the agent to work from it before writing any video code, so those corrections no longer have to be pasted into a prompt by hand.

Nothing is installed into your machine or your project for this. A project that ships its own copy of a bundled skill gets the plugin dropped wholesale rather than shadowed.

What it costs to run

macOS. Nothing in the code is macOS-specific, but that is all that is tested.
Claude Code, installed and logged in, on a Pro or Max subscription.
bun, resolved from your machine — the app does not bundle a runtime.
A Remotion project with its dependencies installed.

The current release is v0.0.1 and the app updates itself from GitHub releases: it checks once per launch, offers what it finds in the sidebar footer, and installs and restarts on request. The bundle is not Apple code-signed, so first launch needs the usual Gatekeeper override. Updates are signed with the updater's own minisign key, which is a different thing entirely.

What's next

The prototype's definition of done is met — open a real project, ask for a scene, watch the edits land, approve the one Bash call it needs, see it in the player, export an mp4, no terminal. What is honestly still missing:

Two open bugs, both in the preview. The pane sizes its stage from a hardcoded 16:9, so a 9:16 composition plays as a narrow strip with black on both sides — the pixels are right, the frame around them is not. And a compile that fails while the agent is mid-write can leave the pane stuck at Compiling — 100%: the fix is a Reload button that is always present, plus announcing ready again after a clean compile that follows a failed one, so the pane heals itself.

Export is deliberately narrow. It renders h264 and every other knob comes from your remotion.config.ts. Format and quality settings, a render queue and Lambda are all out of scope for now.

Some UI is present but inert. ⌘K search, the project sort control and a Settings row are laid out and disabled rather than silently doing nothing — the shape is finished, the behaviour is not.

Element references do not go stale. A rebuild clears the markers and disarms Inspect, but marking individual references stale per changed file is deferred.

Windows and Linux are untested, not excluded. The port should be cheap: there are no macOS-specific paths or process spawning, only macOS-specific testing.

And the wider direction: this is the local half of the idea, where the agent writes real code you own. The hosted half — studio.remocn.dev, a spec-driven browser editor over one generic composition — is a separate product with a separate trade-off, and neither is trying to become the other.

If you want the components without the app, remocn.dev is a plain shadcn registry — npx shadcn@latest add @remocn/soft-blur-in and it is your file.

Making a launch video for Claude Opus 5

Remocn — Fri, 24 Jul 2026 20:15:50 +0000

Anthropic shipped Claude Opus 5 today. Nobody asked us for a video, so we made one anyway — fifty-five seconds, twelve beats, every claim on screen lifted from the launch post itself. This is the hardest kind of unofficial spot to get away with: the brand is one most people look at daily, so a color that's a shade off or a serif that isn't quite the right serif reads instantly. Nothing here is eyeballed.

The storyboard

The tradeoff — "Frontier intelligence" lands alone on warm paper, "Or a price you can run every day" swaps in beneath it, then both dim and lift to make room for the line that names the choice: "Until today, you picked one."
The name — black stage, the real Claude spark scaling in off a rotation settle, "Claude Opus 5" landing under it with "Opus 5" one beat behind "Claude". Then the card holds dead still for a second and a half.
The promise — the thesis in a single sentence, with "half the price" arriving in clay on its spoken cue, and the availability line ruled off beneath it.
Frontier-Bench — two bars grow on an asymmetric plot: Opus 4.8 in muted grey, then Opus 5 in clay past double its height, a count-up landing on the spoken "double" while the cost line falls beside it.
The board — four benchmark rows arrive from the right, one per cue, each a name → ratio pair with the ratio following through behind its label. One benchmark becomes a sweep.
The mechanism — a dark stage and an agent transcript writing itself: the FreeCAD ask types in, three steps check off in olive, and the receipt lands in serif — "No competing model solved it in five attempts."
The outside voice — Framer's line set as a hanging quote under a short clay rule, held near-still.
The bill — three efficiency counters on oat, the biggest number last and in clay, attribution ruled off underneath.
Alignment — one claim, one number, and a held frame. The breather before the close.
The price — $5 and $25 land as a pair, the pair anticipates downward and lifts to make room for "The same price as Opus 4.8", then claude-opus-5 arrives in clay.
The end card that eats itself — the real Claude lockup holds, the spark winds up with a counter-move, then launches right and swallows the wordmark letter by letter on its way off-screen, blurring out into its own speed.
The sting — black. Nothing, for a full second past where the film should have ended. Then "Available today." fades up dead-center and never moves.

Director's notes

The brand is Claude's own, down to the woff2. The palette is read off claude.com's live stylesheet — the gray ramp for the stages, --color-oat, --color-olive for anything verified, and --color-clay #d97757 as the one accent, spent only on the payoff word, the winning bar and the spark. The type is the three faces the site actually serves, vendored and gated behind delayRender so a frame never catches the fallback mid-swap, set at the site's own scale. The spark, the wordmark and the "By Anthropic" mark are the shipped SVG paths — and for the outro the wordmark is split at its subpath boundaries into six glyphs that each keep their counter, so C-l-a-u-d-e animate independently while staying Anthropic's own letterforms. Taken apart, never redrawn.

Transitions are chosen by tone, not by variety. Three grammars carry the whole film: a lateral slide (the outgoing scene shoved left, the incoming springing in from the right), a vertical rise, and a settle (the outgoing scene shrinking away as one group, one empty gap frame, the incoming items landing from above-1 scale). A slide hands the stage over while the content is still travelling, so the stage color has to crossfade across the slide window — gorgeous between two scenes in the same tonal world, and six frames of flat mid-grey when paper dissolves into near-black. So every big tonal jump takes the settle, whose color change happens inside the empty gap frame and lands instantly; the lateral moves ride the pairs that already share a tone. Twelve scenes, one continuous canvas, no slideshow.

No scene is allowed to arrive blank. The flip side of a clean hand-off: a slide gives the incoming scene a bare stage, so a scene whose first reveal starts at local frame 0 rides in as an empty card — the exact slideshow feel the cut exists to avoid. Every sliding scene pre-rolls its own clock by twelve to twenty frames, so its opening element is already on screen and moving as it arrives, while the rest of its reveals still land on their spoken cues.

Two properties of one element never share a curve. Opacity rides a short quad ramp; transform rides a long exponential or a damped spring roughly three times its length. Stagger compresses rather than marching — pow(i, 0.8) × base with a deterministic one-to-two-frame jitter — and children follow through, a check landing a few frames after its row on a looser damping. It is the difference between a slide that faded in and something that arrived.

The outro is driven by position, not by frames. The spark's travel is one unbroken curve: a short counter-move to wind up, an accelerating sweep that eats the line, and a hand-off — with the slope still high — into a continuing acceleration straight off-scene. Each glyph's fate is a function of where the mark is, not of what frame it is, so the bite always lands exactly as the spark passes over, whatever the curve does. The spin is one constant rate, held from launch to the last blurred frame; it survives that speed because the mark has no rotational symmetry to alias against.

The prompt

The brief, as a prompt (validated against a clean project + the remocn skill before publishing):

I'm making an unofficial launch video for Claude Opus 5
(anthropic.com/news/claude-opus-5) with remocn (remocn.dev) in a Remotion
project — install anything you need with `npx shadcn add @remocn/<name>`.
Every claim on screen must come from that page, verbatim or cut.

Build a ~55-second, 1280×720, 30fps introducing spot in twelve beats:

1.  Tradeoff — "Frontier intelligence" lands alone on warm paper, "Or a price you can run every day" swaps in beneath it, then both dim and lift as "Until today, you picked one" lands below.
2.  Name — black stage; the real Claude spark scales in on a rotation settle, "Claude Opus 5" lands beneath with "Opus 5" one beat behind "Claude". Then hold — camera only.
3.  Promise — "It comes close to the frontier intelligence of Claude Fable 5 at half the price", with "half the price" in clay on its cue; the Max/Pro availability line ruled off beneath.
4.  Frontier-Bench — two bars on an asymmetric plot: Opus 4.8 in muted grey, then Opus 5 in clay past double its height, a count-up landing on "double" and the cost line falling beside it.
5.  Board — four benchmark rows arriving from the right, one per cue — CursorBench 3.2, ARC-AGI 3, Zapier AutomationBench, OSWorld 2.0 — each a name → ratio pair, the ratio following through behind its label.
6.  Mechanism — dark stage, an agent transcript writing itself: the FreeCAD ask types in, three steps check off in olive, and the receipt lands in serif: "No competing model solved it in five attempts."
7.  Outside voice — Framer's quote under a short clay rule, held still, attribution muted beneath.
8.  The bill — three efficiency counters on oat, the biggest number last and in clay, the Citadel and LexisNexis attributions ruled off under.
9.  Alignment — one claim, one number, then a held frame.
10. Price — "$5" and "$25" land as a pair; the pair anticipates downward and lifts to make room for "The same price as Opus 4.8"; then `claude-opus-5` in clay with "on the Claude API" beside it.
11. End card — the real Claude lockup holds, then the spark winds up with a counter-move, launches right and eats the wordmark letter by letter, flying off-screen and blurring out into its own speed.
12. Sting — black, empty for a full second past where the film should have ended, then "Available today" fades up dead-center and never moves.

Style: tokens read off claude.com's live stylesheet — #f0eee6 paper,
#faf9f5 ivory, #e3dacc oat, #141413 / #1f1e1d dark stages, #73726c muted
ink, with #d97757 clay as the ONE accent (the spark, the payoff word, the
winning bar) and #788c5d olive reserved for anything verified. Claude's
own three faces: serif for every spoken headline, sans for body and data
labels, mono for numbers, model ids and the transcript — at the site's own
type scale, sentence case, default tracking. Use the real spark and
wordmark SVG paths; split the wordmark into glyphs for the outro rather
than redrawing it.

Sequence all twelve scenes on ONE stage so the stage color is continuous
and scenes never overlap. Three transition grammars, chosen by TONE not
variety: a lateral slide (A shoved left, B springs in from the right) and
a vertical rise only between scenes that already share a tone; a settle
(A shrinks and fades as one group, one empty gap frame, B's items land
from above-1 scale) for every big tonal jump, so the color change happens
inside the gap. Pre-roll each sliding scene's internal clock by 12–20
frames so it never arrives as a blank card. A slow camera scale runs under
every scene, split across three depths. Two properties of one element
never share a curve: opacity on a short quad ramp, transform on a long
exponential or a damped spring ~3× as long; compressing stagger with a
deterministic jitter; children follow through a few frames behind their
parent. A vignette and one small clay spark hold above everything from
beat 3 to beat 10 so the cuts read as camera moves inside one film.

No letter-spacing, no uppercase, no badges, no eyebrows, no pulsing, no
install pills, no bounce as a default.

Make one for your product

The generic recipe is Launch video; the part that makes a spot feel like it came from inside the company — pointing your agent at the site's own tokens — is Your brand.

How to start with Remocn

Remocn — Wed, 22 Jul 2026 16:04:59 +0000

You need two things: an AI coding agent and an empty folder.

Get an agent. We recommend Claude Code — also works with ChatGPT, opencode and others.
Open the agent in an empty folder and paste:

Set up a new Remotion video project in this folder, then install the remocn agent skill: npx skills add Remocn/remocn --yes. When you're done, start the preview studio so I can watch the video while we work.

When a browser tab opens with an empty video player, you're ready. Pick a guide and make it yours.

This is the video we launched Remocn with. Eight beats, thirty-five seconds, built entirely from Remocn components. Below is everything you need to make the same video for your product.

The storyboard

The pain — two short lines land one after the other, naming the problem you solve.
The reveal — "Meet <Product>", uncovered by a swirl of color.
The tagline — your one-liner slides in.
The positioning — "Like X, for Y" assembles itself word by word.
The montage — six fast cuts: a feature name over a different animated background each time.
The value — three claims stack up, line by line.
The install — a terminal types out your install command or call to action.
The outro — your logo draws itself on, with one quiet closing line.

Your words

This is the whole creative work — nine blanks:

Product name
Two pain lines — six words or fewer each; they're on screen for about two seconds
Tagline — one line
Positioning — the "Like X, for Y" sentence
Six feature labels — one or two words each
Three value claims — short, concrete, no adjectives you can't prove
Install command or CTA — whatever you want typed on screen
Closing line — e.g. "Open source, all the way down"
Accent color — one hex value; optional, the default lime looks good

Have a logo? Drop the SVG into the project folder and mention the file name in the prompt. No logo — your agent will use the product name as a wordmark.

Struggling with the lines? Words on screen is the cheat sheet.

The prompt

I'm making a product launch video with remocn (remocn.dev).

Build a ~35-second, 1920×1080, 30fps launch video for <PRODUCT NAME> in this
Remotion project, using remocn components — install anything you need with
`npx shadcn add @remocn/<name>`:

1. Pain — two short lines, one after the other (scale-down-fade):
   "<PAIN LINE 1>" then "<PAIN LINE 2>".
2. Reveal — "Meet <PRODUCT NAME>", uncovered by a swirling shader transition
   (shader-swirl as a transition cover).
3. Tagline — "<TAGLINE>" (short-slide-right).
4. Positioning — "<LIKE X, FOR Y>", assembling word by word (kinetic-center-build).
5. Montage — six hard cuts, one per feature: a fullscreen shader background
   (color-panels, warp, mesh-gradient, voronoi, metaballs, god-rays), a dark
   scrim, and one label each: <SIX FEATURE LABELS>.
6. Value — three claims stacking line by line (line-by-line-slide):
   <THREE CLAIMS>.
7. Install — a short title beat, then a terminal line that types itself:
   `<INSTALL COMMAND OR CTA>`.
8. Outro — my logo (<LOGO FILE, or: use the product name as a wordmark>) over
   a blooming shader-smoke-ring, with a quiet closing line: "<CLOSING LINE>".

Style: warm dark background (#141318), off-white text, one accent color
<ACCENT COLOR>, Manrope. One quiet shader-simplex-noise field runs behind the
entire video with a radial scrim for readability. Transitions are shader
covers (swirl, dithering), not plain crossfades. Use my copy exactly as
written.

Directing the result

The first cut won't be the final one — that's normal. Direct with plain sentences:

"The pain lines go by too fast — hold each one longer."
"Cut the montage to four beats."
"Use my brand background #0B0B0F instead."
"The tagline should come in from the left."
"Make the outro two seconds shorter."

More directing vocabulary: Directing your agent

Get the file

Ask your agent: "Render the video." You'll get an .mp4 in the project folder, ready to post.

How to Make a Product Demo Video in React

Remocn — Mon, 20 Jul 2026 19:39:25 +0000

This is a build log for a 30-second product demo video, written entirely in React and rendered to an .mp4 you can drop on a landing page, post to X, or attach to a Product Hunt launch. No After Effects, no screen recorder, no dragging clips around a GUI timeline. The stack is Remotion — the React framework that renders real video from components — and remocn, a shadcn-style registry of copy-paste animation and UI components built for it. We'll assemble three scenes: a hook line over an animated background, a simulated product walkthrough (the app UI rebuilt on a timeline instead of screen-recorded), and a closing scene with a live star counter and a call to action. Every scene is a React component, and the whole thing is one file tree you can re-render whenever your UI changes.

Why build a demo video in code

A GUI editor is faster for a one-off. A demo video is rarely a one-off: the product UI changes, the pricing changes, the headline changes, and every change means re-recording and re-cutting. When the video is React, a change is a prop edit and a re-render, and the diff lives in git next to the feature that caused it. You also skip the screen recorder entirely — instead of capturing your running app, you rebuild the parts you want to show as components, which stay crisp at any resolution and never leak a stray notification or the wrong cursor. The tradeoff is real: you write code instead of dragging clips, so this pays off when the video has a life beyond its first export. (There's a longer editor-versus-code comparison elsewhere; this article is the build.)

Install Remotion and the components

remocn assumes a Remotion project already exists. If you don't have one, create-video scaffolds it; if you've never run the shadcn CLI here, init writes a components.json. Then a single add pulls every component this article uses.

# 1. A Remotion project (skip if you already have one)
npx create-video@latest

# 2. shadcn config (skip if you already have components.json)
npx shadcn@latest init

# 3. Every component this article uses, in one run
npx shadcn@latest add \
  @remocn/shader-mesh-gradient @remocn/staggered-fade-up \
  @remocn/signup-flow @remocn/backdrop \
  @remocn/whip-pan @remocn/zoom-blur \
  @remocn/github-stars @remocn/soft-blur-in @remocn/confetti \
  @remocn/terminal-simulator

remocn follows shadcn's "own your code" model: add copies each component's TypeScript source into your project under components/remocn/, so you import them by path (@/components/remocn/signup-flow) and edit them like your own files — there's no runtime dependency to track. The registry also resolves dependency chains for you. signup-flow alone pulls in the remocn-ui core plus cursor, input, button, toast, field, and blur-in, and whip-pan installs @remotion/transitions, so the single command above leaves you with a working set.

One licensing note, accurate at the time of writing: Remotion is source-available and free for individuals and companies of up to three people; larger companies need a paid company license. remocn itself is MIT.

Set up the composition

A Remotion video is a <Composition>: an id, the root component to render, a frame count, a frame rate, and a resolution. We're rendering 1920×1080 at 30 fps. Thirty seconds is 900 frames, and after accounting for the two transitions the exact number lands at 906 — here's the budget the rest of the article fills in.

Scene	What's on screen	Frames	Seconds
1 — Hook	shader background + `StaggeredFadeUp` headline	150	5.0
↳ whip-pan	overlaps scenes 1 and 2	−26	−0.9
2 — Product	`signup-flow` simulated on a timeline	500	16.7
↳ zoom-blur	overlaps scenes 2 and 3	−18	−0.6
3 — Closing	`github-stars` + CTA + `confetti`	300	10.0
Total		906	30.2

The scene sequences sum to 950 frames; the two transitions overlap their neighbors by 26 and 18 frames, so the finished video is 950 − 44 = 906 frames. create-video already wired registerRoot for you — you only edit the root:

// src/Root.tsx
import { Composition } from "remotion";
import { ProductDemo } from "./ProductDemo";

export const RemotionRoot = () => (
  <Composition
    id="ProductDemo"
    component={ProductDemo}
    durationInFrames={906}
    fps={30}
    width={1920}
    height={1080}
  />
);

ProductDemo is the component we build up over the next sections. Preview it live at any time with npx remotion studio, where you can scrub the timeline frame by frame.

Scene 1 — the hook line

The opening has one job: state the value in a few words before anyone scrolls past. We put an animated shader behind a headline that assembles word by word. Both are remocn components, and both are deterministic — the shader freezes its own internal clock and instead reads the current frame, so the motion is a pure function of the timeline rather than wall-clock time. That's what makes a Remotion render reproducible across machines and safe to render in parallel chunks.

// src/scenes/HookScene.tsx
import { AbsoluteFill } from "remotion";
import { ShaderMeshGradient } from "@/components/remocn/shader-mesh-gradient";
import { StaggeredFadeUp } from "@/components/remocn/staggered-fade-up";

export const HookScene = () => (
  <AbsoluteFill>
    <ShaderMeshGradient speed={1} />
    <AbsoluteFill
      style={{ alignItems: "center", justifyContent: "center", padding: 160 }}
    >
      <StaggeredFadeUp
        text="Deploy in one command"
        staggerDelay={4}
        distance={20}
        fontSize={96}
        fontWeight={600}
        color="#0b0b0f"
      />
    </AbsoluteFill>
  </AbsoluteFill>
);

ShaderMeshGradient fills the frame; the second AbsoluteFill layers the headline on top. StaggeredFadeUp lifts each word up by distance pixels and fades it in, offsetting each next word by staggerDelay frames — at 4 frames a word, a four-word line finishes assembling in well under a second. Mesh gradients render bright, so the headline uses a near-black color; if you swap in a darker shader (there are 18 in the registry), flip the text to white. The typography components size themselves from fontSize, so they're resolution-independent — no wrapper needed here.

Scene 2 — simulate the product on a timeline

This is the scene most people reach for a screen recorder to make. Don't. Recording your running app captures whatever resolution your display happens to be, drags in real network lag, and risks a notification popping in mid-take. The alternative — the "fake app" technique — is to rebuild the slice of UI you want to show as a component and script it on the timeline. It renders retina-sharp at any output resolution, it re-renders when your real UI changes, and every take is identical.

remocn ships these as scripted flows. signup-flow drives a complete account-creation sequence: a cursor moves field to field, each input fills in, the submit button steps through hover → press → loading → success, and a success toast slides in — all keyed to frame numbers, not timers. You feed it your copy through props.

These scene sims are authored against a 1280×720 reference so their internal pixel math stays predictable. To drop one into a 1080p composition, scale that reference up once with a small wrapper you'll reuse for the closing scene too:

// src/components/Stage.tsx
import type { ReactNode } from "react";
import { AbsoluteFill } from "remotion";

export const Stage = ({ children }: { children: ReactNode }) => (
  <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
    <div style={{ width: 1280, height: 720, transform: "scale(1.5)" }}>
      {children}
    </div>
  </AbsoluteFill>
);

A 1280×720 box scaled by 1.5 is exactly 1920×1080, centered. Now the scene: a soft gradient behind the scaled signup card.

// src/scenes/ProductScene.tsx
import { AbsoluteFill } from "remotion";
import { SignupFlow } from "@/components/remocn/signup-flow";
import { Stage } from "../components/Stage";

export const ProductScene = () => (
  <AbsoluteFill style={{ background: "linear-gradient(160deg, #eef2ff, #faf5ff)" }}>
    <Stage>
      <SignupFlow
        title="Create your Rocket account"
        description="Start your 14-day trial — no card required"
        fullName="Ada Lovelace"
        email="ada@rocket.dev"
        password="••••••••"
        createLabel="Create account"
        toastTitle="Welcome aboard"
      />
    </Stage>
  </AbsoluteFill>
);

Every string is a prop, so this becomes your product by editing the copy — no re-recording. signup-flow's scripted timeline runs about 360 frames (roughly 12 seconds), which is why Scene 2 gets 500 frames in the budget: enough to play the whole flow and hold on the completed form for a beat before the transition out. If your product is a CLI rather than a web app, swap signup-flow for terminal-simulator, which types commands into a console window and rolls older lines off the top — same idea, different surface.

Stitch the scenes with TransitionSeries

Individual scenes are just components. To cut between them with motion, wrap them in TransitionSeries from @remotion/transitions and drop a TransitionSeries.Transition between each pair. remocn's transitions are presentation functions you hand to that element: whipPan flings both scenes through the frame in a single camera whip, and zoomBlur punches forward into the next scene with a blur. A transition doesn't add time — it overlaps the last frames of the outgoing scene with the first frames of the incoming one, so the finished duration is the sum of the sequences minus the sum of the transitions.

// src/ProductDemo.tsx
import {
  TransitionSeries,
  linearTiming,
  springTiming,
} from "@remotion/transitions";
import { whipPan } from "@/components/remocn/whip-pan";
import { zoomBlur } from "@/components/remocn/zoom-blur";
import { HookScene } from "./scenes/HookScene";
import { ProductScene } from "./scenes/ProductScene";
import { ClosingScene } from "./scenes/ClosingScene";

export const ProductDemo = () => (
  <TransitionSeries>
    <TransitionSeries.Sequence durationInFrames={150}>
      <HookScene />
    </TransitionSeries.Sequence>

    <TransitionSeries.Transition
      timing={linearTiming({ durationInFrames: 26 })}
      presentation={whipPan({ direction: "left", blur: 24 })}
    />

    <TransitionSeries.Sequence durationInFrames={500}>
      <ProductScene />
    </TransitionSeries.Sequence>

    <TransitionSeries.Transition
      timing={springTiming({ durationInFrames: 18, config: { damping: 200 } })}
      presentation={zoomBlur({ blur: 16 })}
    />

    <TransitionSeries.Sequence durationInFrames={300}>
      <ClosingScene />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

The timing and presentation props are separate on purpose: presentation is the look of the move, timing is its curve and length. whipPan reads well on a linear ramp. zoomBlur applies no internal easing of its own, so its character comes entirely from the timing function — springTiming gives the punch-in a springy settle. Sequences sum to 950 frames, the two transitions overlap 44, and the result matches the 906 we set on the <Composition>. ClosingScene is the one piece still missing; it's next.

Scene 3 — social proof and the call to action

The close does two things back to back: show that other people already use the product, then tell the viewer what to do. github-stars handles the first half — a fly-through of stargazers with an odometer that counts up to the total. It renders standalone from built-in sample data, or you pass real stargazers you fetched. Like the signup sim, it targets a 1280×720 reference, so it goes through the same Stage wrapper. Then a Backdrop fills the frame for the CTA: SoftBlurIn resolves the final line out of a blur, and Confetti fires on top.

// src/scenes/ClosingScene.tsx
import { AbsoluteFill, Sequence } from "remotion";
import { Backdrop } from "@/components/remocn/backdrop";
import { Confetti } from "@/components/remocn/confetti";
import { GitHubStars } from "@/components/remocn/github-stars";
import { SoftBlurIn } from "@/components/remocn/soft-blur-in";
import { Stage } from "../components/Stage";

const STARS_LEN = 150;

export const ClosingScene = () => (
  <AbsoluteFill>
    <Sequence durationInFrames={STARS_LEN}>
      <Stage>
        <GitHubStars
          repo="rocket-dev/rocket"
          totalStars={4218}
          accentColor="#f5a623"
          orientation="horizontal"
          speed={1}
          theme="dark"
        />
      </Stage>
    </Sequence>

    <Sequence from={STARS_LEN}>
      <Backdrop
        fill={{ type: "color", value: "#0b0b0f" }}
        padding={0}
        radius={0}
        shadow=""
      >
        <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
          <SoftBlurIn
            text="Start building with Rocket"
            fontSize={84}
            fontWeight={600}
            color="#fafafa"
          />
        </AbsoluteFill>
        <Confetti startFrame={10} particleCount={160} seed={7} originY={0.4} />
      </Backdrop>
    </Sequence>
  </AbsoluteFill>
);

The two halves are ordinary <Sequence> elements inside the scene: the star fly-through owns the first 150 frames, and the CTA owns the rest, starting at from={STARS_LEN}. Backdrop is remocn's background component — with padding, radius, and shadow zeroed out it's a full-bleed fill, and if you leave those defaults on instead it wraps the content in a rounded, shadowed floating-window frame. Confetti's startFrame is counted from the start of its Sequence, so 10 means ten frames after the CTA appears. It's worth calling out why the confetti looks the same on every render: each piece comes from a seeded pseudo-random generator, never Math.random(), so a given seed produces an identical burst every time — which is exactly what a deterministic, parallelized render needs.

Render to mp4

With the root registered, one command turns the composition into a file:

npx remotion render ProductDemo out/demo.mp4

That renders ProductDemo at the resolution and frame count from the <Composition> and writes out/demo.mp4. While you're iterating on a single scene, render just its frames instead of all 906 — npx remotion render ProductDemo out/scene2.mp4 --frames=124-624 gives you the product scene in a fraction of the time (it starts at frame 124, since the 26-frame whip-pan overlap pulls it back from 150). When you want the full render to run somewhere other than your laptop — a CI job, or a render button inside your own app — @remotion/renderer drives the identical render headlessly with selectComposition then renderMedia, and Remotion Lambda splits the frames into parallel chunks in the cloud for speed. Because every component here is a pure function of the frame, all of those paths produce the same pixels.

Where to go next

The full catalog — 18 shaders, the rest of the camera and dissolve transitions, chart and chat sims, and the video-ready UI primitives that power the fake-app flows — lives at remocn.dev/docs. The two most useful next stops for a demo are the transitions you cut with and the UI primitives you compose your own product scenes from. Everything is MIT and on GitHub at github.com/Remocn/remocn — a star helps if this saved you an afternoon. Swap the signup sim for your product's real flow, change the copy, and the same three-scene skeleton becomes your next launch video.

Introducing Remocn Components for videos in React

Remocn — Mon, 20 Jul 2026 19:24:17 +0000

You shipped a product. Now you need a demo video — for the landing page, the launch post, the Product Hunt gallery. The usual options are all bad if you're a React developer: learn After Effects (a profession, not a weekend), hire an editor (a slow feedback loop that restarts every time your UI changes), or screen-record and accept whatever comes out.

There's a fourth option that fits how you already work: write the video in React. Remotion has made that possible for years — a real .mp4 rendered from React components, where motion is a pure function of the current frame. What's been missing is the layer above it. Nobody wants to hand-build a typewriter effect again, tune a whip-pan's motion blur from scratch, or figure out why their WebGL background flickers in headless renders. Every Remotion project starts from zero.

Remocn is that layer: 234 production-ready components for Remotion, delivered the shadcn way — copied into your project as TypeScript source you own.

The shadcn workflow, for video

If you've used shadcn/ui, you already know the model. Components aren't an npm dependency you configure through props and fight through overrides. The CLI copies the source file into your project, and from that moment it's your code:

npx shadcn@latest add @remocn/soft-blur-in

That drops soft-blur-in.tsx into components/remocn/. Want the blur to start softer, the spring to settle faster, the easing to feel different? Open the file and change it. There's no library API standing between you and the animation.

The registry also carries dependency metadata: installing whip-pan brings in @remotion/transitions automatically, installing a scripted UI flow pulls the primitives it's built from. One command, working code.

Sixty seconds to a rendered video

remocn assumes an existing Remotion project (npx create-video@latest if you need one) and a components.json (npx shadcn@latest init, defaults are fine). After that:

// src/Root.tsx
import { Composition } from "remotion";
import { SoftBlurIn } from "@/components/remocn/soft-blur-in";

export const RemotionRoot = () => (
  <Composition
    id="HelloWorld"
    component={SoftBlurIn}
    durationInFrames={60}
    fps={30}
    width={1280}
    height={720}
    defaultProps={{ text: "Hello, world" }}
  />
);

npx remotion render HelloWorld out.mp4

Two seconds of video, text resolving out of a soft blur, rendered to a file. Every component page on remocn.dev mounts a real @remotion/player, so you can scrub any animation frame by frame before installing it.

What's in the registry

34 text animations. Product videos are mostly words on screen, so this is the deepest section: staggered-fade-up, per-character-rise, typewriter (with a deterministic blinking cursor), kinetic-center-build (words push the line sideways while the phrase stays centered — it measures real word widths), slot-machine-roll, matrix-decode, number-wheel and rolling-number for metrics, value-swap and rolodex-flip for word substitutions.

12 transitions. Four camera moves — whip-pan, push-through, focus-pull, zoom-blur — modeled on how editors actually hide cuts, plus eight GPU dissolves (grain-dissolve, smoke-dissolve, ripple-zoom, and friends) for texture. They're presentation functions for @remotion/transitions, so they slot into a TransitionSeries you may already have:

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { whipPan } from "@/components/remocn/whip-pan";

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={70}>
    <SceneA />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    timing={linearTiming({ durationInFrames: 26 })}
    presentation={whipPan()}
  />
  <TransitionSeries.Sequence durationInFrames={70}>
    <SceneB />
  </TransitionSeries.Sequence>
</TransitionSeries>

18 WebGL shader backgrounds. Mesh gradients, god rays, metaballs, liquid metal — each wraps a shader from paper-design/shaders and adapts it for video rendering (more on why that's necessary below).

44 video-ready UI primitives. Buttons, dialogs, command menus, toasts, tabs — the shadcn vocabulary, rebuilt for a timeline instead of user input. On top of them: scripted flows like signup-flow, checkout-flow, and imessage-chat-flow that play out a complete interaction.

100 animated icons. Lucide-derived geometry, re-authored for video: each icon draws its stroke in, then performs one action — the check pops, the bell rings. Browse them in the gallery.

The rest. Terminal simulators with typed commands, glassy code blocks, animated line and bar charts, GitHub-stars and X-follower cards for social proof, AI-chat mockups (Claude, ChatGPT, v0), confetti, and a backdrop primitive that gives any scene a filled frame.

The boring hard parts are handled

Video rendering is stricter than the browser you're used to. Remotion renders frame 47 in isolation — possibly on a different worker than frame 46, possibly out of order — and expects identical pixels every time it asks for that frame. A cursor blinking off setInterval, a Math.random() in a particle field, a CSS animation: all of them produce renders that flicker or desync.

Every remocn component derives its motion from useCurrentFrame() and nothing else. The shader backgrounds go further: a shader normally animates against a wall clock, so the wrappers freeze it and drive its frame uniform from the timeline, gating the first paint with delayRender() so headless capture never grabs an uninitialized canvas. Scrubbing, looping, and multi-pass renders stay deterministic — which is exactly the class of bug you don't want to discover at render time, on a deadline.

The other handled part is taste. Springs come pre-tuned, transition durations ship with sane defaults (a whip-pan lives on speed at ~26 frames; a focus-pull needs ~46 to breathe), and components render transparent so your background — a backdrop fill or a shader — is one wrapper away.

Stop screen-recording your product

The technique I'd point any founder to first: don't record your app, simulate it. The scripted UI flows replay a signup, a checkout, a chat conversation, a command-menu search — at retina sharpness, with a cursor that never fumbles, on a timeline you control frame by frame. When your product ships a redesign, you update props and re-render instead of re-recording every asset. That's the difference between a demo video that rots and one that lives in your repo next to the code it demos.

Free, MIT, yours

Everything above is MIT-licensed and free. There's no version to upgrade and no breaking API changes to absorb, because there's no dependency — the code lands in components/remocn/ and belongs to you. Remotion itself is the only prerequisite (free for individuals and companies of up to 3 people; larger companies need their company license).

Start here

Docs and live previews — every component with a scrubbable player
Installation guide — two commands and you're rendering
GitHub — a star helps more people find it

If you build something with it, I'd genuinely like to see the result.