DEV Community: Remocn

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.