Remotion product demo, built from snapcn

Turn a real screen recording into a 20–45s product demo in Remotion. The shots come from snapcn: Remotion components for the parts of a demo that take longest to hand-animate (camera push-ins on a recording, a cursor that clicks, a device frame, a terminal that types, an AI prompt that sends). They install with the shadcn CLI and land in your project as code you own.

Why snapcn, not hand-written animation. Hand-rolled demo motion is where AI-made videos give themselves away: a cursor that slides at constant speed, a zoom that eases forever, a terminal that prints everything at once. snapcn components are tuned frame by frame against real product demos. Your job is to pick them and fill in the props.

The snapcn rule

Every beat is a snapcn component unless none fits. Before you write any
```
interpolate()
```
or
```
spring()
```
for a shot, check
```
https://snapcn.dev/llms-components.txt?ref=skill-demo
```
(every installable component, what it's for, how many frames it runs). Any component page serves markdown with
```
.md
```
appended, e.g.
```
https://snapcn.dev/docs/screens/screen-recording.md?ref=skill-demo
```
.
Never invent a component name.
```
@snapcn/<name>
```
resolves only for names in that list. If nothing fits, say so.
Fill props, don't rewrite the component. Copy, colours, recordings and cursor paths go in through props.

For the full catalogue and composition rules, also install the umbrella skill:

npx skills add snapcndev/snapcn --skill snapcn

The recording is the source of truth

Use the real recording or screenshot as the plate. Animate the camera over it (
```
screen-recording
```
's
```
camera
```
moves) instead of rebuilding the UI in JSX. Rebuild one element only when it has to move on its own.
Never invent UI labels, numbers or features. Every string on screen comes from the real product. Invented labels are the most common reason demos feel fake.
No recording? Ask for one or for screenshots. Don't draw a fake dashboard.

Prerequisites

A Remotion project (
```
npx create-video@latest
```
). Canvas 1280×720 at 30fps.
The shadcn CLI (
```
npx shadcn@latest init
```
if there is no
```
components.json
```
).
```
npm i @remotion/transitions
```
.
The recording in
```
public/
```
(e.g.
```
public/recording.mp4
```
), loaded with
```
staticFile()
```
.

Workflow

1. Find the one moment

Watch the recording and name the one action only this product does: the click that matters. That moment gets the camera push and the most screen time. Everything else in the demo sets it up.

2. Storyboard, one snapcn component per beat

Beat	snapcn component	Frames	Use it for
Install / setup	`terminal-simulator`	200	The command a developer would type, and its real output
The product on a device	`laptop-frame` , `phone-frame`	240 / 240	Put the recording on a MacBook or iPhone, open and zoom in
The key action	`cursor-track` wrapping `screen-recording`	132 / 139	A cursor walks and clicks while the camera pushes in on the recording
AI products	`prompt-send` , `answer-stream` , `search-typing`	165 / 150 / 420	A prompt typed and sent, the answer streaming back
The result	`status-cycle` , `count-grid`	198 / 47	A state change ("queued → live") or one real number
End card	`block-wordmark` , `logo-flicker`	150 / 100	The name

Budget each sequence to the component's natural length (the Frames column). Under-budgeting clips the shot; over-budgeting leaves dead air.

3. Install

bash

npx shadcn@latest add @snapcn/terminal-simulator @snapcn/laptop-frame @snapcn/cursor-track @snapcn/screen-recording @snapcn/status-cycle @snapcn/block-wordmark

4. Compose

This composition typechecks and renders as written (with

public/recording.mp4

present):

tsx

import { fade } from "@remotion/transitions/fade";
import { slide } from "@remotion/transitions/slide";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { BlockWordmark } from "@/components/snap-cn/block-wordmark";
import { CursorTrack } from "@/components/snap-cn/cursor-track";
import { LaptopFrame } from "@/components/snap-cn/laptop-frame";
import { ScreenRecording } from "@/components/snap-cn/screen-recording";
import { StatusCycle } from "@/components/snap-cn/status-cycle";
import { TerminalSimulator } from "@/components/snap-cn/terminal-simulator";

// Put the real recording in public/. Its UI copy is the script — never invent labels.
const RECORDING = staticFile("recording.mp4");
const T = linearTiming({ durationInFrames: 12 });

export const ProductDemo: React.FC = () => (
  <TransitionSeries>
    {/* 1. Install: the command a developer would actually type */}
    <TransitionSeries.Sequence durationInFrames={200}>
      <TerminalSimulator
        intro="Set up *Acme* in one command"
        command={{ text: "npx acme init" }}
        lines={[
          { text: "npx acme init", type: "command" },
          { text: "Connecting your Stripe account...", type: "log" },
          { text: "Ready. 1,204 invoices imported.", type: "success" },
        ]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. The product, on a device */}
    <TransitionSeries.Sequence durationInFrames={240}>
      <LaptopFrame screenSrc={RECORDING} entrance="open" finale="zoom-to-screen" />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={slide()} timing={T} />

    {/* 3. The one action only this product does: cursor clicks, camera pushes in */}
    <TransitionSeries.Sequence durationInFrames={132}>
      <CursorTrack
        path={[
          { at: 0, x: -0.06, y: 0.86, duration: 6 },
          { at: 8, x: 0.34, y: 0.44, duration: 22, click: true },
          { at: 60, x: 0.68, y: 0.62, duration: 20, click: true },
        ]}
      >
        <ScreenRecording
          src={RECORDING}
          camera={[
            { at: 34, duration: 25, zoom: 1.6, x: 0.36, y: 0.42 },
            { at: 96, duration: 25, zoom: 1 },
          ]}
        />
      </CursorTrack>
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. The result, as a state change */}
    <TransitionSeries.Sequence durationInFrames={198}>
      <StatusCycle
        prefix="Your books are"
        statuses={["syncing", "matching", "reconciled"]}
        chips={["Stripe", "QuickBooks", "Xero"]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. End card */}
    <TransitionSeries.Sequence durationInFrames={150}>
      <BlockWordmark text="acme" />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

durationInFrames={872}

(the sum of the sequences minus 4 × 12 frames),

fps={30}

width={1280}

height={720}

How to aim the shots:

cursor-track
paths are fractions of the frame (
```
x
```
,
```
y
```
from 0 to 1).
```
at
```
is the frame the cursor starts towards that point;
```
click: true
```
fires the click ring on arrival. Put each click exactly on the real button in the recording.
screen-recording
camera moves (
```
{ at, duration, zoom, x, y }
```
) ease to a pose and hold until the next move. Push in (
```
zoom: 1.4–1.8
```
) on the one action; pull back (
```
zoom: 1
```
) after it lands.
Crop the browser chrome with
```
crop={{ top: 0.11 }}
```
when the recording includes it.

terminal-simulator
lines are

{ text, type }

with

type

command

log

success

error

. Paste real output, shortened.

5. Render-audit

bash

npx remotion still ProductDemo out/click.png --frame=460
npx remotion render ProductDemo out/demo.mp4 --codec=h264 --crf=18

Render a still at the midpoint of each beat and just before and after every cut, then check:

Each click lands on the real button, not beside it.
Text in the recording is readable at 720p after the push-in. If not, push in further or crop tighter.
No black frame at a cut, and nothing shown before its scene starts.

6. Ship

Render one composition per aspect ratio: 16:9 for X and LinkedIn, 9:16 (use

phone-frame

) for Reels, Shorts and TikTok.

--scale=1.5

turns the 1280×720 master into 1920×1080.

snapcn Pro: the demo shots people ask for most

50 Pro scenes for demos, including
```
tap-through
```
(a phone tap on your CTA),
```
checkout-push
```
(a payment going through),
```
prompt-dive
```
(a prompt sent, then a dive into the send button),
```
build-out
```
(an app built out of a send button),
```
vault-count
```
(a balance ticking up) and
```
screen-wall
```
(a tunnel of phones).
The snapcn MCP: your agent searches the registry in plain English, reads real props and plans the whole demo from a one-line brief.
```
claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY
```

Pro components install like free ones once

components.json

sends your key (the three lines are on https://snapcn.dev/account?ref=skill-demo). Plans: https://snapcn.dev/docs/pricing?ref=skill-demo

Not ready for Pro? One Pro component, Manifesto, is free for a confirmed email: https://snapcn.dev/docs/pricing?ref=skill-demo#free

Attribution

The "never invent UI labels" rule, the render-audit loop and the platform guidance are adapted from everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.). "The recording is the source of truth" is adapted from HeyGen's hyperframes

product-launch-video

skill (Apache-2.0). Both were rewritten for Remotion and snapcn components. See

THIRD_PARTY_NOTICES.md

remotion-product-demo

NPX Install

Tags

SKILL.md Content