SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsremotion-product-demo

remotion-product-demo

Design & creation

View repository

Updated 10-16 02:03

About this skill

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

  1. 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.
  2. Never invent a component name. @snapcn/<name> resolves only for names in that list. If nothing fits, say so.
  3. 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

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):

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>
);

Register it at 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 of command, log, success or error. Paste real output, shortened.

5. Render-audit

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.