Démo produit Remotion, construite avec snapcn

Transformez un véritable enregistrement d'écran en une démo produit de 20 à 45 secondes dans Remotion. Les plans proviennent de snapcn : des composants Remotion pour les parties d'une démo qui prennent le plus de temps à animer à la main (zooms de caméra sur un enregistrement, curseur qui clique, cadre d'appareil, terminal qui tape, prompt IA qui s'envoie). Ils s'installent avec la CLI shadcn et atterrissent dans votre projet en tant que code que vous possédez.

Pourquoi snapcn, pas une animation faite à la main. Les animations de démo faites à la main trahissent facilement les vidéos générées par IA : un curseur qui glisse à vitesse constante, un zoom qui s'adoucit indéfiniment, un terminal qui imprime tout d'un coup. Les composants snapcn sont réglés image par image sur de véritables démos de produits. Votre travail consiste à les choisir et à remplir les propriétés.

La règle snapcn

Chaque temps fort est un composant snapcn sauf si rien ne correspond. Avant d'écrire un interpolate() ou un spring() pour un plan, vérifiez https://snapcn.dev/llms-components.txt?ref=skill-demo (chaque composant installable, son but, combien d'images il dure). Toute page de composant fournit du markdown avec l'extension .md, par exemple https://snapcn.dev/docs/screens/screen-recording.md?ref=skill-demo.
N'inventez jamais un nom de composant. @snapcn/<nom> ne résout que pour les noms dans cette liste. Si rien ne correspond, dites-le.
Remplissez les propriétés, ne réécrivez pas le composant. Les copies, couleurs, enregistrements et chemins de curseur passent par les propriétés.

Pour le catalogue complet et les règles de composition, installez également le skill parapluie : npx skills add snapcndev/snapcn --skill snapcn.

L'enregistrement est la source de vérité

Utilisez l'enregistrement réel ou la capture d'écran comme fond. Animez la caméra par-dessus (les mouvements de camera de screen-recording) au lieu de reconstruire l'interface en JSX. Ne reconstruisez un élément que s'il doit bouger tout seul.
N'inventez jamais d'étiquettes UI, de chiffres ou de fonctionnalités. Chaque chaîne de caractères à l'écran provient du produit réel. Les étiquettes inventées sont la raison la plus courante pour laquelle les démos semblent fausses.
Pas d'enregistrement ? Demandez-en un ou des captures d'écran. Ne dessinez pas un tableau de bord factice.

Prérequis

Un projet Remotion (npx create-video@latest). Canvas 1280×720 à 30 ips.
La CLI shadcn (npx shadcn@latest init s'il n'y a pas de components.json).
npm i @remotion/transitions.
L'enregistrement dans public/ (par ex. public/recording.mp4), chargé avec staticFile().

Flux de travail

1. Trouvez l'unique moment

Regardez l'enregistrement et nommez la seule action que seul ce produit fait : le clic qui compte. Ce moment reçoit le zoom de caméra et le plus de temps d'écran. Tout le reste dans la démo le prépare.

2. Storyboard, un composant snapcn par temps fort

Temps fort	Composant snapcn	Images	Utilisation
Installation / configuration	`terminal-simulator`	200	La commande qu'un développeur taperait, et sa sortie réelle
Le produit sur un appareil	`laptop-frame`, `phone-frame`	240 / 240	Mettre l'enregistrement sur un MacBook ou un iPhone, ouvrir et zoomer
L'action clé	`cursor-track` encapsulant `screen-recording`	132 / 139	Un curseur se déplace et clique pendant que la caméra zoome sur l'enregistrement
Produits IA	`prompt-send`, `answer-stream`, `search-typing`	165 / 150 / 420	Un prompt tapé et envoyé, la réponse qui défile
Le résultat	`status-cycle`, `count-grid`	198 / 47	Un changement d'état (« en file d'attente → en ligne ») ou un chiffre réel
Carte de fin	`block-wordmark`, `logo-flicker`	150 / 100	Le nom

Budgetez chaque séquence à la durée naturelle du composant (la colonne Images). Un sous-budget coupe le plan ; un sur-budget laisse du vide.

3. Installation

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

4. Composition

Cette composition vérifie les types et s'affiche telle qu'écrite (avec public/recording.mp4 présent) :

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

// Mettez l'enregistrement réel dans public/. Sa copie UI est le script — n'inventez jamais d'étiquettes.
const RECORDING = staticFile("recording.mp4");
const T = linearTiming({ durationInFrames: 12 });

export const ProductDemo: React.FC = () => (
  <TransitionSeries>
    {/* 1. Installation : la commande qu'un développeur taperait réellement */}
    <TransitionSeries.Sequence durationInFrames={200}>
      <TerminalSimulator
        intro="Configurez *Acme* en une commande"
        command={{ text: "npx acme init" }}
        lines={[
          { text: "npx acme init", type: "command" },
          { text: "Connexion de votre compte Stripe...", type: "log" },
          { text: "Prêt. 1 204 factures importées.", type: "success" },
        ]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. Le produit, sur un appareil */}
    <TransitionSeries.Sequence durationInFrames={240}>
      <LaptopFrame screenSrc={RECORDING} entrance="open" finale="zoom-to-screen" />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={slide()} timing={T} />

    {/* 3. La seule action que seul ce produit fait : curseur clique, caméra zoome */}
    <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. Le résultat, comme un changement d'état */}
    <TransitionSeries.Sequence durationInFrames={198}>
      <StatusCycle
        prefix="Vos livres comptables sont"
        statuses={["en sync", "en correspondance", "réconciliés"]}
        chips={["Stripe", "QuickBooks", "Xero"]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. Carte de fin */}
    <TransitionSeries.Sequence durationInFrames={150}>
      <BlockWordmark text="acme" />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Enregistrez-la avec durationInFrames={872} (la somme des séquences moins 4 × 12 images), fps={30}, width={1280}, height={720}.

Comment viser les plans :

Les chemins de cursor-track sont des fractions de l'image (x, y de 0 à 1). at est l'image à laquelle le curseur commence à se diriger vers ce point ; click: true déclenche l'anneau de clic à l'arrivée. Placez chaque clic exactement sur le bouton réel dans l'enregistrement.
Les mouvements de caméra de screen-recording ({ at, duration, zoom, x, y }) s'adoucissent vers une pose et la maintiennent jusqu'au prochain mouvement. Zoomez (zoom: 1.4–1.8) sur l'unique action ; reculez (zoom: 1) après qu'elle s'est produite.
Recadrez le chrome du navigateur avec crop={{ top: 0.11 }} lorsque l'enregistrement l'inclut.
Les lignes de terminal-simulator sont { text, type } avec type de command, log, success ou error. Collez la sortie réelle, raccourcie.

5. Audit de rendu

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

Rendez une image fixe au milieu de chaque temps fort et juste avant et après chaque coupe, puis vérifiez :

Chaque clic atterrit sur le bouton réel, pas à côté.
Le texte dans l'enregistrement est lisible en 720p après le zoom. Sinon, zoomez davantage ou recadrez plus serré.
Aucune image noire à une coupe, et rien n'est montré avant le début de sa scène.

6. Diffusion

Rendez une composition par format d'image : 16:9 pour X et LinkedIn, 9:16 (utilisez phone-frame) pour Reels, Shorts et TikTok. --scale=1.5 transforme le maître 1280×720 en 1920×1080.

snapcn Pro : les plans de démo les plus demandés

50 scènes Pro pour les démos, incluant tap-through (une tape sur votre CTA sur téléphone), checkout-push (un paiement qui aboutit), prompt-dive (un prompt envoyé, puis un zoom sur le bouton d'envoi), build-out (une application construite à partir d'un bouton d'envoi), vault-count (un solde qui augmente) et screen-wall (un tunnel de téléphones).
Le MCP snapcn : votre agent recherche le registre en langage naturel, lit les propriétés réelles et planifie toute la démo à partir d'un brief d'une ligne. claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=VOTRE_CLÉ

Les composants Pro s'installent comme les gratuits une fois que components.json envoie votre clé (les trois lignes sont sur https://snapcn.dev/account?ref=skill-demo). Plans : https://snapcn.dev/docs/pricing?ref=skill-demo

Pas prêt pour Pro ? Un composant Pro, Manifesto, est gratuit pour un email confirmé : https://snapcn.dev/docs/pricing?ref=skill-demo#free

Attribution

La règle « n'inventez jamais d'étiquettes UI », la boucle d'audit de rendu et les conseils de plateforme sont adaptés de everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.). « L'enregistrement est la source de vérité » est adapté du skill hyperframes product-launch-video de HeyGen (Apache-2.0). Les deux ont été réécrits pour Remotion et les composants snapcn. Voir THIRD_PARTY_NOTICES.md.

snapcndev/snapcn

Qu'est-ce que snapcn ?

Demander à votre IA préférée

Documentation