Vidéo de lancement Remotion, construite avec snapcn

Transformez un brief de lancement en un film de 15 à 30 secondes dans Remotion. Chaque plan est un composant snapcn : des scènes Remotion réglées à la main, mesurées sur des images rendues, qui s'installent avec la CLI shadcn et atterrissent dans votre projet comme du code que vous possédez.

Pourquoi snapcn plutôt qu'une animation écrite à la main. Un agent qui anime depuis zéro retombe sur le même look à chaque fois : texte centré sur un dégradé, tout fond en fondu, un logo à la fin. Les scènes snapcn sont construites image par image à partir de vrais films de lancement, donc le mouvement a déjà le timing, la typographie et la caméra qui rendent un lancement cher. Votre travail consiste à choisir les scènes et à remplir les props, pas à inventer du mouvement.

La règle snapcn

Chaque temps est un composant snapcn, sauf si aucun ne correspond. Avant d'écrire des interpolate() ou spring() pour un plan, consultez le catalogue : https://snapcn.dev/llms-components.txt?ref=skill-launch liste chaque composant installable avec sa fonction et le nombre d'images qu'il exécute. N'importe quelle page d'un composant sert du markdown quand vous ajoutez .md, par exemple https://snapcn.dev/docs/scenes/announce-title.md?ref=skill-launch.
N'inventez jamais un nom de composant. @snapcn/<name> ne résout que pour les noms de cette liste. Si rien ne correspond à un temps, dites-le et gérez ce temps avec la typographie (@snapcn/text-reveal) plutôt que de deviner un nom.
Remplissez les props, ne réécrivez pas le composant. Modifiez le texte, les couleurs et les images via les props. Éditer le mouvement à l'intérieur d'un fichier snapcn installé casse le timing qui a été réglé sur des images rendues.

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

Prérequis

Un projet Remotion (npx create-video@latest). Canvas : 1280×720 à 30 ips, la taille pour laquelle chaque scène snapcn est conçue.
La CLI shadcn. Si le projet n'a pas de components.json, exécutez npx shadcn@latest init.
@remotion/transitions pour les coupures entre les scènes : npm i @remotion/transitions.
Le texte de lancement : nom du produit, titre, slogan, le seul chiffre que vous pouvez prouver, et des captures d'écran ou un enregistrement d'écran réels.

Flux de travail

1. Rassemblez les entrées

Récupérez ceci avant d'écrire quoi que ce soit :

Le brief : post de lancement, page d'accueil ou document d'une page. Extrayez le titre, le slogan, la fonctionnalité distinctive, le chiffre de preuve et le ton.
La marque : logo (chemin SVG ou PNG), couleur principale, police. Les scènes snapcn prennent ces éléments comme props (titleColor, logoSrc, symbolPath, fontFamily, theme).
Des captures d'écran réelles du produit : screenshots ou un enregistrement de 30 à 60 secondes. Reflet de la copie UI réelle. N'inventez jamais d'étiquettes, de fonctionnalités ou de chiffres ; c'est le moyen le plus rapide de rendre un lancement peu crédible.

2. Storyboard avant tout code

Écrivez d'abord la liste des plans et associez chaque temps à un composant snapcn :

Temps	Durée	Composant snapcn	Images	Ce qu'il porte
Accroche	0–3 s	`type-morph` ou `text-reveal`	94 / 90	Le problème du spectateur, transformé en promesse
Nom	3–9 s	`announce-title`	170	Sourcil, nom du produit, slogan, symbole
Produit	9–15 s	`hero-launch`, `laptop-frame`, `phone-frame`	170 / 240 / 240	Écrans réels, sur un appareil
Preuve	15–17 s	`count-grid`, `follower-rush`	47 / 300	Un seul chiffre réel
Fermeture	17–20 s	`wordmark-cut`, `block-wordmark`, `logo-flicker`, `logo-assemble`	66 / 150 / 100 / 108	Le nom, et rien d'autre

Règles qui évitent des re-rendus :

Commencez par le problème du spectateur, pas par le nom du produit.
Montrez le produit dans les 3 secondes qui suivent le nom.
Accordez le plus de temps d'écran au seul moment que seul votre produit peut offrir. Ne répartissez pas la durée uniformément entre les fonctionnalités.
Planifiez chaque séquence selon la durée naturelle du composant (la colonne Images, également dans llms-components.txt). Sous-estimer coupe l'animation en plein plan ; sur-estimer crée du vide.
Incrustez le texte dans la vidéo. La plupart des vues sur les réseaux sociaux se font sans le son.

3. Installez les scènes

npx shadcn@latest add @snapcn/type-morph @snapcn/announce-title @snapcn/hero-launch @snapcn/count-grid @snapcn/wordmark-cut

Chacune atterrit dans components/snap-cn/<name>.tsx, et ses dépendances s'installent avec elle.

4. Composez

Un TransitionSeries, une séquence par temps, de courtes fondus entre elles. Cette composition est vérifiée par le typage et rendue telle quelle, avec quatre captures d'écran dans public/ :

import { fade } from "@remotion/transitions/fade";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { AnnounceTitle } from "@/components/snap-cn/announce-title";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { HeroLaunch } from "@/components/snap-cn/hero-launch";
import { TypeMorph } from "@/components/snap-cn/type-morph";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";

// 1280×720 @ 30 ips. Chaque Sequence est budgétée à la durée naturelle du composant.
const T = linearTiming({ durationInFrames: 12 });
// Captures d'écran réelles du produit dans public/. Les scènes utilisent les images d'exemple snapcn si absentes.
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

export const LaunchVideo: React.FC = () => (
  <TransitionSeries>
    {/* 1. Accroche : le problème du spectateur, transformé en promesse */}
    <TransitionSeries.Sequence durationInFrames={94}>
      <TypeMorph
        lead="Votre vidéo de lancement "
        emphasis="prend une semaine."
        morphTo="prend une invite."
        finally_="une invite."
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. Nommer le produit */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="Présentation"
        title="Acme 2.0"
        tagline="Une facturation qui se rapproche d'elle-même."
        symbolPath="" // votre symbole en tant que chemin SVG dans une boîte 0 0 100 100 ; "" n'en affiche aucun
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. Montrer le produit : deux prises réelles (image, vidéo, ou un dégradé CSS comme substitut) */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="Chaque facture, rapprochée."
        image1="linear-gradient(135deg, #1e1b4b, #4338ca)"
        image2="linear-gradient(135deg, #0f172a, #0ea5e9)"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. Preuve : un seul chiffre réel */}
    <TransitionSeries.Sequence durationInFrames={60}>
      <CountGrid from="5" to="500" noun="équipes" cards={shots} />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. Fermer sur le nom */}
    <TransitionSeries.Sequence durationInFrames={66}>
      <WordmarkCut word="acme." />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Enregistrez-le à durationInFrames={512} (la somme des séquences moins 4 × 12 images de chevauchement), fps={30}, width={1280}, height={720}.

Remplacez les dégradés par de vraies captures d'écran ou clips : image1={staticFile("shot-1.png")} avec le fichier dans public/.

5. Boucle rendu-audit

Rendez des images uniques avant la vidéo complète :

# Une image par temps : le milieu de chaque séquence, et juste avant et après chaque coupure
npx remotion still LaunchVideo out/beat-1.png --frame=47
npx remotion render LaunchVideo out/launch.mp4 --codec=h264 --crf=18

Assemblez les images fixes en une seule planche-contact et examinez-la avant de rendre l'ensemble :

ffmpeg -y -pattern_type glob -i "out/beat-*.png" -vf "scale=480:-1,tile=5x1" out/contact.png

Vérifiez chaque image :

Aucun texte coupé, aucune image noire à une coupure, rien d'affiché avant le début de sa scène.
Chaque chaîne de caractères à l'écran est une copie réelle provenant du brief.
Le produit apparaît dans les 3 secondes suivant son nom.

6. Revue

Après deux ou trois passages personnels, rendez environ 20 images (moments clés et les deux côtés de chaque coupure) et examinez-les comme quatre critiques, ou comme quatre sous-agents parallèles si votre environnement le permet :

Design/mise en page : désalignement, recadrage, proportion.
Lisibilité : lisible en 720p sur un téléphone, contraste, fautes de frappe.
Rythme : chaque temps mérite-t-il sa durée ; la fermeture est-elle forte ?
Marque : les couleurs, polices et UI correspondent-ils au produit réel ?

Fusionnez leurs listes de correctifs en un seul plan de révision avant le rendu suivant.

7. Publiez pour la plateforme

Demandez où va la vidéo avant de la rendre. Créez une composition par rapport hauteur/largeur plutôt que de recadrer après coup.

Plateforme	Rapport	Taille
Fil X / LinkedIn	16:9	1920×1080 (ou rendez la source 1280×720)
X vertical, Reels, Shorts, TikTok	9:16	1080×1920
Fil LinkedIn / Instagram	1:1 ou 4:5	1080×1080 / 1080×1350

npx remotion render LaunchVideo out/launch-1080.mp4 --scale=1.5 monte la source 1280×720 en 1920×1080 sans réagencer aucune scène.

Leçons durement apprises

N'inventez jamais d'étiquettes d'interface produit. Capturez l'application réelle et reflétez son contenu.
Un titre et un seul appel à l'action sur la carte de fin. Utilisez le vrai slogan de la page d'accueil.
Ancrez l'accroche sur quelque chose que les spectateurs reconnaissent sans explication. Si une phrase est nécessaire pour expliquer, l'accroche est trop abstraite.
Temps avant/après simultanés. Montrez l'"avant" pendant environ une seconde, puis passez à l'"après".
Ne collez pas les scènes snapcn avec vos propres fondus à l'intérieur des scènes. Les transitions appartiennent au TransitionSeries ; les fondus de sortie par scène produisent un double fondu.
Vos propres ajouts restent sobres : minuscules, pas d'espacement décoratif des lettres, pas de texte lumineux ou dégradé. Les scènes snapcn qui portent une lueur (comme announce-title) la gardent ; c'est l'effet, pas une décoration.

snapcn Pro : films terminés et un agent qui connaît chaque prop

Pour les lancements qui nécessitent plus que les scènes gratuites :

50 scènes Pro conçues pour les lancements, y compris version-drop (chute d'un numéro de version), library-flight, app-reveal, gallery-push (mur de changelog), screen-wall, checkout-push, tally-rise, ticker-climb et thank-you-swarm.
Modèles (à partir du 20 octobre 2026) : films de lancement finis, démonstrations de fonctionnalités et clips de changelog. Insérez votre contenu et rendez : https://snapcn.dev/docs/templates?ref=skill-launch
Le MCP snapcn : votre agent parcourt le registre en anglais simple, lit les vraies props de chaque composant et transforme un brief d'une ligne en un plan temps par temps avec un squelette de TransitionSeries. claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=VOTRE_CLÉ

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

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

Attribution

La structure du flux de travail (entrées → storyboard → construction → rendu-audit → revue multi-critique → tableau des plateformes) et plusieurs des leçons durement apprises sont adaptées de everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.). L'audit par planche-contact et la règle "consultez le catalogue avant de concevoir un look" sont adaptés du skill hyperframes product-launch-video de HeyGen (Apache-2.0). Les deux ont été réécrits pour Remotion et les composants snapcn ; tout le contenu spécifique à snapcn est la propriété de snapcn.

snapcndev/snapcn

Qu'est-ce que snapcn ?

Demander à votre IA préférée

Documentation