remotion-launch-video

Vidéo de lancement Remotion, construite avec Imgcli

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

Pourquoi Imgcli, pas une animation écrite à la main. Un agent qui anime à partir de zéro retombe toujours sur le même rendu : texte centré sur un dégradé, tout apparaît en fondu, un logo à la fin. Les scènes Imgcli sont construites image par image en s'inspirant de véritables films de lancement, de sorte que le mouvement a déjà le timing, la typographie et la caméra qui donnent un aspect coûteux à un lancement. Votre travail consiste à choisir les scènes et à remplir les accessoires, pas à inventer du mouvement.

La règle Imgcli

1. Chaque temps fort est un composant Imgcli, sauf si aucun ne convient. Avant d'écrire un interpolate() ou spring() pour un plan, consultez le catalogue : https://imgcli.com/llms-components.txt?ref=skill-launch liste chaque composant installable avec sa fonction et le nombre d'images qu'il dure. Toute page de composant fournit du markdown quand vous ajoutez .md, par exemple https://imgcli.com/docs/scenes/announce-title.md?ref=skill-launch.
2. N'inventez jamais un nom de composant. N'installez que les noms présents dans cette liste. Si rien ne correspond à un temps fort, dites-le et portez le temps fort avec de la typographie (text-reveal) plutôt que de deviner un nom.
3. Remplissez les accessoires, ne réécrivez pas le composant. Modifiez le texte, les couleurs et les images via les accessoires. Modifier le mouvement à l'intérieur d'un fichier Imgcli installé brise le timing qui a été ajusté sur des images rendues.

Si la compétence imgcli est disponible, utilisez-la pour la composition et les vérifications de rendu.

Prérequis

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

Workflow

1. Rassemblez les entrées

Extrayez ces éléments avant d'écrire quoi que ce soit :

• Le brief : article de lancement, page d'accueil ou document one-pager. Extrayez le titre, le slogan, la fonctionnalité différenciante, le chiffre de preuve et le ton.
• La marque : logo (chemin SVG ou PNG), couleur primaire, police. Les scènes Imgcli les prennent comme accessoires (titleColor, logoSrc, symbolPath, fontFamily, theme).
• De véritables visuels du produit : captures d'écran ou enregistrement de 30 à 60 secondes. Reflétez le texte réel de l'interface. N'inventez jamais d'étiquettes, de fonctionnalités ou de chiffres ; c'est le moyen le plus rapide de rendre un lancement factice.

2. Storyboard avant tout code

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

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

Règles qui évitent des rendus inutiles :

• Commencez par le problème du spectateur, pas par le nom du produit.
• Montrez le produit dans les 3 secondes suivant 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 sur les fonctionnalités.
• Budgetez chaque séquence à la durée naturelle du composant (colonne Images, également dans llms-components.txt). Sous-budgéter coupe l'animation au milieu d'un plan ; sur-budgéter laisse du vide.
• Incrustez le texte. La plupart des vues sociales sont en mode muet.

3. Installez les scènes

npx shadcn@latest add https://imgcli.com/r/type-morph.json https://imgcli.com/r/announce-title.json https://imgcli.com/r/hero-launch.json https://imgcli.com/r/count-grid.json https://imgcli.com/r/wordmark-cut.json

Chacune atterrit dans components/imgcli/<nom>.tsx, et ses dépendances s'installent avec elle.

4. Composez

Une TransitionSeries, une séquence par temps fort, de courts fondus entre elles. Cette composition est typée 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/imgcli/announce-title";
import { CountGrid } from "@/components/imgcli/count-grid";
import { HeroLaunch } from "@/components/imgcli/hero-launch";
import { TypeMorph } from "@/components/imgcli/type-morph";
import { WordmarkCut } from "@/components/imgcli/wordmark-cut";

// 1280×720 @ 30 ips. Chaque séquence est budgétée à la durée naturelle du composant.
const T = linearTiming({ durationInFrames: 12 });
// Véritables captures d'écran du produit dans public/. Les scènes utilisent des exemples snapcn en leur absence.
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. Nommez le produit */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="Présentation"
        title="Acme 2.0"
        tagline="La facturation qui se rapproche toute seule."
        symbolPath="" // votre marque en chemin SVG dans une boîte 0 0 100 100 ; "" n'en montre aucune
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. Montrez le produit : deux véritables visuels (image, vidéo, ou un dégradé CSS de substitution) */}
    <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. Fermeture sur le nom */}
    <TransitionSeries.Sequence durationInFrames={66}>
      <WordmarkCut word="acme." />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Enregistrez-la avec 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 véritables captures d'écran ou clips : image1={staticFile("shot-1.png")} avec le fichier dans public/.

5. Cycle rendu-audit

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

# Une image par temps fort : 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 le tout :

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 montré avant le début de sa scène.
• Chaque chaîne de caractères à l'écran est une copie réelle du brief.
• Le produit apparaît dans les 3 secondes suivant son nom.

6. Révision

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 en quatre critiques, ou en quatre sous-agents parallèles si votre environnement le permet :

1. Design/mise en page : désalignement, recadrage, proportions.
2. Lisibilité : lisible en 720p sur un téléphone, contraste, fautes de frappe.
3. Rythme : chaque temps fort mérite-t-il son temps ; la fermeture est-elle forte ?
4. 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ù la vidéo sera diffusée avant de rendre. Créez une composition par rapport hauteur/largeur plutôt que de recadrer après coup.

Plateforme	Format	Taille
Fil X / LinkedIn	16:9	1920×1080 (ou rendez le master 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 agrandit le master 1280×720 en 1920×1080 sans remettre en page aucune scène.

Leçons durement apprises

• N'inventez jamais d'étiquettes UI de produit. Capturez l'écran de la vraie application et reflétez son texte.
• Un seul titre et un seul appel à l'action sur la carte de fin. Utilisez le vrai slogan de la page d'accueil.
• Ancrez l'accroche dans quelque chose que les spectateurs reconnaissent sans explication. Si elle nécessite une phrase pour être expliquée, l'accroche est trop abstraite.
• Temps forts avant/après simultanés. Laissez le « avant » environ une seconde, puis coupez sur le « après ».
• Ne collez pas les scènes Imgcli avec vos propres fondus à l'intérieur des scènes. Les transitions appartiennent à la TransitionSeries ; les fondus de sortie par scène doublent le fondu.
• Vos propres ajouts restent sobres : phrase en minuscules, pas d'espacement décoratif des lettres, pas de lueur ou de texte dégradé. Les scènes Imgcli qui portent une lueur (announce-title) la conservent ; c'est l'effet, pas une décoration.

Attribution

La structure du workflow (entrées → storyboard → construction → rendu-audit → révision 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.). La règle de l'audit par planche-contact et de « chercher dans le catalogue avant de concevoir un quelconque rendu » est adaptée de la compétence hyperframes product-launch-video de HeyGen (Apache-2.0). Les deux ont été réécrites pour Remotion et les composants snapcn ; tout le contenu spécifique à snapcn est propre à snapcn.