Vidéo de Lancement
Créez un film de lancement premium, à haute énergie, de 15 à 60 secondes, qui arrête le défilement et convertit. Construisez l'arc classique — accroche → tease → révélation → montage des fonctionnalités → carte de fin avec CTA — coupé au rythme de la musique, et exportez pour chaque format de plateforme.
Quand l'utiliser
- Lancements de produits, annonces de fonctionnalités, bandes-annonces, vidéos de battage (15–60 s).
- Vidéos héro "sizzle" pour une page d'accueil.
- Révélations synchronisées sur le tempo où le moment de la marque tombe sur le drop.
L'arc
| Beat | Rôle | Part typique (sur 30 s) |
|---|---|---|
| Accroche (0–3 s) | Une image/un mouvement frappant qui arrête le défilement | 0–3 s |
| Tease | Suggérer le produit ; susciter la curiosité, synchronisé sur le beat | 3–9 s |
| Révélation | Le produit/logo tombe sur le drop musical | 9–13 s |
| Montage des fonctionnalités | Rapide, cinétique, un avantage par plan | 13–25 s |
| Carte de fin | Logo + slogan + CTA, maintien propre | 25–30 s |
Adaptez les mêmes proportions pour 15 s (plus serré) ou 60 s (montage plus long, jamais une accroche plus longue).
Deux règles non-négociables
- Le design sonore guide le montage. Verrouillez la piste d'abord, marquez les beats et le drop, puis coupez les visuels sur ces marques. Ne mettez jamais de la musique sur un montage fini — la révélation tombe sur le drop, pas à côté.
- La qualité plutôt que la quantité. Quelques plans impeccables valent mieux que beaucoup de plans médiocres. Supprimez tout plan qui n'est pas premium.
Révélation synchronisée sur le beat au drop
Trouvez le timecode exact du drop dans l'audio, puis chronométrez la révélation pour que le logo de la marque apparaisse complètement à cette image, avec un micro-dépassement pour l'impact.
import gsap from "gsap";
const DROP = 9.0; // secondes, mesurées à partir de la piste
const tl = gsap.timeline({ paused: true });
// le tease construit la tension jusqu'au drop
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
// la révélation APPEARÎT sur l'image du drop
.set(".logo", { opacity: 1 }, DROP)
.fromTo(".logo", { scale: 1.18 }, { scale: 1.0, duration: .18, ease: "power3.out" }, DROP)
.fromTo(".flash", { opacity: .9 }, { opacity: 0, duration: .25 }, DROP); // flash blanc
audio.addEventListener("play", () => tl.play());
Coupez sur les transitoires, pas sur une grille fixe : les coupes les plus dures tombent sur les coups de kick/snare ; accélérez le temps (time-remap) jusqu'au drop, puis coupez en dur à la sortie.
Montage cinétique des fonctionnalités
Un avantage par plan, ~0.6–1.0 s chacun, coupes dures sur le beat. Chaque plan = un mot-clé en gras + un seul visuel de soutien.
.feature { opacity:0; }
.feature.in .kw { animation: pop .35s cubic-bezier(.22,1,.36,1) forwards; }
.feature.in .word { display:inline-block; }
@keyframes pop { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
// pilotez les plans à partir des marques de beat mesurées sur la piste
const beats = [13.0, 13.8, 14.6, 15.4, 16.2]; // secondes
beats.forEach((t, i) => scheduleAt(t, () => showFeature(i)));
Gardez un seul langage de mouvement dans tout le montage (même courbe d'entrée, même sortie) pour que la vitesse soit perçue comme de la confiance, pas du chaos.
Carte de fin
Maintenez le logo + le slogan + le CTA immobiles et propres pendant ≥2 s. Pas de mouvement parasite en compétition avec le CTA ; laissez la marque s'installer. Faites atterrir le moment de la marque sur le beat le plus fort restant, puis un bouton/URL net.
Export multi-format
Composez avec une zone de sécurité centrale pour qu'un master puisse être recadré proprement pour tous les formats.
| Format | Utilisation | Résolution | Zone de sécurité |
|---|---|---|---|
| 16:9 | YouTube, héro de page d'accueil, X | 1920×1080 | contenu clé dans les 90 % centraux |
| 9:16 | Reels, TikTok, Shorts, Stories | 1080×1920 | texte dans les 80 % centraux en hauteur ; éviter les 12 % supérieurs / 18 % inférieurs (UI) |
| 1:1 | Posts de fil d'actualité | 1080×1080 | carré central de l'image 16:9 |
Concevez le héros/logo/CTA à l'intérieur du carré central 1:1 pour qu'il survive à tous les recadrages. Rendez le master 16:9, puis recadrez (ne vous contentez pas de letterboxer) les formats 9:16 et 1:1 à partir du même projet.
Liste de vérification de la sortie
- Piste verrouillée en premier ; révélation tombe exactement sur le drop.
- L'accroche mérite les 3 premières secondes.
- Montage : un avantage par plan, coupes dures sur les beats, langage de mouvement cohérent.
- La carte de fin tient ≥2 s avec un seul CTA clair.
- Exports 16:9 + 9:16 + 1:1, contenu clé dans la zone de sécurité centrale.
- Plans premium uniquement — rien de médiocre ne survit à la coupe.
Livrer et vérifier (images rendues → MP4)
Aide empaqueté (
scripts/) : mettez en mosaïque vos images avecscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, puis vérifiez l'encodage avecscripts/probe-mp4.sh out.mp4 [LxH] [fps]. Voirscripts/README.md.
Si le film de lancement est construit/rendu dans Remotion, traitez-le comme le niveau lourd : enregistrez un <Composition> (+ schema zod + defaultProps), pilotez chaque valeur via useCurrentFrame() — pas de timelines GSAP / callbacks d'événements audio / Date.now() / Math.random() au moment du rendu (intégrez les timecodes des beats et du drop dans les props). Livrable = le out/*.mp4 rendu par format (plus le projet).
Boucle de vérification — rendre les images → inspecter → encoder. Échantillonnez l'arc, avec les props livrées (headline/tagline/CTA réels), pas seulement defaultProps.
# Images exactes par image à travers accroche → révélation → carte de fin
npx remotion still Launch out/f-hook.png --frame=24 --props=props/launch.json # l'accroche mérite les 3 premières s
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json # le logo APPARAÎT sur l'image du drop
npx remotion still Launch out/f-end.png --frame=899 --props=props/launch.json # carte de fin : logo+slogan+CTA, maintien propre
# inspectez chacune : fidélité (produit/logo, slogan, texte CTA exact, couleurs de la marque correctes, révélation à l'image du drop)
# ET artefacts (débordement de texte, hors cadre, CTA dans le tiers inférieur 9:16, police manquante, image de flash bloquée)
Multi-format — vérifiez le master dans CHAQUE format avant d'encoder tous les formats. Un bug de recadrage (héros poussé hors de la zone de sécurité) se répète dans tous les formats ; attrapez-le une fois.
for ar in 16x9 9x16 1x1; do # vérifiez révélation + carte de fin par format
npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
--props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# images propres dans tous les formats ? → puis encodez chacun :
for ar in 16x9 9x16 1x1; do
npx remotion render Launch "out/launch-${ar}.mp4" --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
npx remotion render Launch out/demo.gif --codec=gif --props=props/launch.json # démo README
Avant de terminer :
npx remotion stillrend proprement à l'accroche / révélation / carte de fin — pas d'erreurs, pas de polices/ressources manquantes.- Texte du logo/slogan/CTA exact, couleurs de la marque correctes ; la révélation tombe sur l'image du drop ; contenu clé dans la zone de sécurité centrale, dégagé du tiers inférieur 9:16.
- Uniquement piloté par les frames — pas de timing GSAP/callback audio,
Date.now(), ouMath.random()(beats/drop intégrés dans les props). - Les props livrées rendent correctement (pas seulement
defaultProps) ; la carte de fin tient ≥2 s avec un seul CTA. - Master vérifié en 16:9 + 9:16 + 1:1 avant encodage ; les MP4 se lisent ; (optionnel) GIF pour le README.
Fichiers de référence
references/launch-structure.md— un modèle complet plan par plan avec timecodes pour un film de 30 s (adaptable de 15 à 60 s), timing de révélation synchronisé sur le beat, recettes de plans de montage cinétique, le flux de travail "le design sonore guide le montage", et des cartes détaillées de zones de sécurité multi-format pour 16:9 / 9:16 / 1:1.