dolly : film de lancement Remotion, tous formats

dolly : vidéos produits et motion graphics en code

La vidéo est un projet Remotion : des composants React rendus image par image. starter/, à côté de ce fichier, contient deux vidéos fonctionnelles : Video, un extrait de 41 secondes de la vidéo de lancement de Termary réalisée à partir d'enregistrements réels, et Promo, un extrait de 25 secondes en motion graphics réalisé uniquement à partir de modèles. Les deux sont rendues dans l'un des 8 styles et 4 formats. Vous les adaptez pour l'utilisateur, en conservant ce qui les rend efficaces.

plan → séquences (enregistrez-les, ou analysez celles de l'utilisateur) → construisez les scènes → révisez les images → effectuez le rendu

Vous ne pouvez pas regarder de vidéo, vous la révisez donc en générant des contact sheets et en lisant les PNG. Faites-le après chaque modification : la plupart des mauvais mouvements sont visibles dans une sheet.

Ne lisez que ce dont le travail a besoin. Les chemins sont relatifs au dossier de cette compétence :

Quand	Lire
Vous enregistrez le produit sur un Mac (l'observé le conduit) : une app, un site web, le simulateur iOS	references/record-mac.md
L'utilisateur doit enregistrer : Windows, un vrai téléphone, un appareil ou un compte que vous ne pouvez pas conduire	references/record-ailleurs.md
L'utilisateur vous donne des enregistrements qu'il a réalisés	references/votre-séquence.md
Une scène construite à partir d'un enregistrement : le kit 3D et les mouvements de caméra	references/camera.md
Une vidéo qui n'est pas un lancement de produit : un événement, une embauche, un journal des modifications, une histoire de données…	references/agendas.md
Choisir des composants : modèles, texte, graphiques, dessins, arrière-plans, transitions	starter/src/library/CATALOG.md
Quelque chose s'affiche mal, ou vous écrivez un nouveau composant	references/pièges.md

1. Commencer

<dossier de cette compétence>/new.sh ma-video     # vérifie Node, copie le starter, installe tout
cd ma-video && npx remotion studio                  # optionnel : l'utilisateur peut la parcourir sur localhost:3000

new.sh installe Node avec Homebrew s'il manque, exécute npm install (qui génère aussi les effets sonores), télécharge le Chrome headless avec lequel Remotion effectue le rendu, et indique si observee est installé. Sur Windows, exécutez-le dans Git Bash, après winget install OpenJS.NodeJS.LTS. Pour un projet Remotion 4.0.320+ existant, copiez src/kit.tsx, src/look.tsx, src/parts.tsx, src/sequence.tsx, src/backdrop.tsx et src/library/.

Fichier	Ce qu'il contient
src/brand.ts	Le produit : nom, URL, logo (dans public/), couleurs d'accentuation et d'alerte, son style, ses polices si elles lui sont propres
src/look.tsx	Les 8 styles et 4 formats, et useLook(), que chaque partie utilise pour les lire
src/Video.tsx, src/Promo.tsx	Une vidéo : ses scènes dans l'ordre avec leurs durées, et les indices sonores
src/scenes/	Les scènes basées sur les prises. takes.ts indique où se trouvent les choses dans les prises
src/library/	La bibliothèque de composants, un dossier par élément ; CATALOG.md les liste avec leurs props
src/sequence.tsx, src/backdrop.tsx	Scenes relie les scènes avec des transitions ; Backdrop dessine la page du style
src/parts.tsx	Ce qui se superpose à une image : Caption, Tap, Callout, Speed, Pop
src/kit.tsx	Le kit 3D et les mouvements de caméra (references/camera.md)
public/takes/	Les enregistrements. Remplacez-les par ceux de l'utilisateur
scripts/	take.sh enregistre une prise, scan.mjs (npm run scan) lit les enregistrements, sfx.mjs et music.mjs créent le son, voice.mjs une voix off, library.mjs reconstruit le catalogue, check.mjs (npm run check) mesure un rendu, web.mjs (npm run web) crée la copie de téléchargement

Remotion est gratuit pour les particuliers et les entreprises de jusqu'à 3 personnes ; les entreprises plus grandes ont besoin d'une licence d'entreprise (remotion.pro). Prévenez l'utilisateur une fois si cela s'applique.

2. Planifier

Lisez d'abord le site web du produit, puis réglez ces points avec l'utilisateur, en ne demandant que ce que vous ne pouvez pas déduire :

• Où elle sera diffusée, ce qui détermine les formats et la durée. Effectuez le rendu de tous les formats nécessaires ; concevez pour le format principal et vérifiez les autres.

  Format	Composition	Taille	Pour	Durée
  paysage	Video	1920×1080	YouTube, X, LinkedIn, un site web, une présentation	lancement 45–90 s
  vertical	Vertical	1080×1920	Reels, TikTok, YouTube Shorts, Stories	15–35 s
  carré	Square	1080×1080	fils d'actualité sur X, LinkedIn, Instagram	15–45 s
  portrait	Portrait	1080×1350	fils Instagram et LinkedIn (4:5)	15–45 s

  Les fils d'actualité sont lus en mode muet : les mots portent l'histoire, et les 2 premières secondes doivent accrocher par elles-mêmes.

• Le style. Effectuez le rendu d'une image dans chaque style (npm run styles, ajoutez --props='{"frame":420,"format":"vertical"}' pour une autre image ou un autre format), montrez à l'utilisateur, et définissez brand.style. Suggérez-en un à partir de la marque : un outil de développement sombre → midnight ou terminal, une app grand public → soft ou bold, un produit premium ou calme → editorial ou swiss, un teaser → cinema, un produit créatif ou artisanal → paper.

  Style	L'apparence
  editorial	Papier clair, un titre en serif avec une phrase d'accentuation en italique, cuts secs. Calme et cher : la vidéo Termary
  midnight	Presque noir avec l'accentuation qui brille, un sans-serif serré, des mots qui deviennent flous puis nets, transitions par zoom
  bold	L'accentuation comme page, une typo massive et lourde, la phrase d'accentuation découpée d'un bloc, pops rebondissants, diapositives
  swiss	Blanc cassé, typo noire sur une grille de colonnes, l'accentuation utilisée avec parcimonie, cartes carrées, wipes durs
  soft	Une teinte pastel de l'accentuation, typo arrondie, la phrase d'accentuation sur une pilule, pops rebondissants, révélations arrondies
  terminal	Tout en mono, titres tapés avec un curseur, lignes de balayage, cuts glitch
  cinema	Une bande-annonce : presque noir, un grand serif calme, grain de film, fondus lents en noir
  paper	Dessiner avec du code : cartes en papier sur une page lavande douce, un serif léger avec une accentuation en gras, retournements de cartes

• La phrase que le spectateur doit retenir, le moment réel dans le produit qui le prouve, et la demande pour le carton de fin (une URL, un téléchargement, une liste d'attente).

• D'où viennent les séquences. Un produit avec une UI obtient de vraies séquences, qui surpassent toute maquette : vous les enregistrez, l'utilisateur les enregistre, ou l'utilisateur les a déjà (le tableau ci-dessus indique quoi lire). Sans accès au produit, ou pour un teaser ou une explication, construisez à partir de la bibliothèque.

Écrivez ensuite les scènes dans l'ordre : la douleur (l'accroche, jamais le logo), le produit (le logo sur un temps fort), la preuve (le moment réel, ou les fonctionnalités, une métrique, un avant/après), la demande (le carton de fin). Les autres agendas conservent la structure avec leur propre milieu (references/agendas.md). Au maximum 7 mots à l'écran à la fois, tenus 1 s + 0,3 s par mot. Placez le brief dans un commentaire en haut de Video.tsx.

3. Séquences

Quelle que soit la provenance, les mêmes choses les rendent utilisables : des arrêts (4–5 s d'un état avant et après chaque action : les plans sont découpés à partir d'eux), le vrai produit (jamais les résultats préfabriqués d'un mode démo, jamais de données privées), et les horaires que vous avez lus. npm run scan lit tout enregistrement : ses arrêts, ses changements et son son, avec une sheet de ses images, afin que vous puissiez planifier à partir de séquences que personne ne vous a décrites. Ces horaires sont les valeurs at à partir desquelles les plans sont joués.

4. Construire les scènes

Une scène est un composant qui remplit le cadre. SCENES dans Video.tsx (ou Promo.tsx) les liste avec leurs durées ; la transition du style les relie, et une scène peut nommer la sienne (transition: 'iris', celle qui la précède). Un whoosh joue sous chaque transition qui déplace tout le cadre (un slide, un whip, un zoom).

La bibliothèque (src/library/) contient chaque pièce prête à l'emploi, un dossier chacune : modèles (scènes entières), effets de texte, graphiques, dessins, parties vocales, arrière-plans et transitions. Lisez src/library/CATALOG.md avant de construire : le résumé de chaque élément, une ligne d'utilisation fonctionnelle telle quelle, et ses props. Importez depuis la bibliothèque (import {Stat, Statement} from './library'). Chaque élément lit le style via useLook(), prend start (l'image où il commence, depuis le début de sa scène) et, là où il peut partir, exit. npm run gallery effectue le rendu de l'échantillon de chaque élément, étiqueté avec son code (--props='{"only":"graphics","style":"bold","format":"vertical"}' le réduit).

Un modèle est une scène entière, il va donc directement dans SCENES :

{name: 'Features', seconds: 4.5, component: () => (
  <Features title="Tout dans" accent="une fenêtre." items={[{icon: Columns3, title: 'Volets divisés', text: '…'}]} />
)},

Une scène à partir d'un enregistrement fait flotter la fenêtre, le volet ou le téléphone en 3D sous une Caption, avec la caméra se déplaçant dessus : references/camera.md.

Bien utiliser la bibliothèque.

• Metric, Stat et Quote ne prennent que des chiffres et des citations réels, avec permission.
• Les dessins se teintent vers la couleur de la marque : pour un aspect artisanal et humain, et dans paper.
• Voix : npm run voice -- script.txt name fait parler un script avec les voix intégrées du Mac ou de Windows (ou utilisez des WAV enregistrés) dans public/voice/name/ et src/voice/name.ts. Voiceover le lit, voiceTiming/voiceEnd synchronise les scènes avec lui, et Captions et Waveform le suivent. Les fils d'actualité sont lus en mode muet : une vidéo narrée a toujours besoin de ses sous-titres. Les voix intégrées sont pour les brouillons ; pour une vidéo publiée, enregistrez une personne ou utilisez une voix dont l'utilisateur a les droits.
• Les transitions que le catalogue appelle un shader WebGL ne sont que des accents : vérifiez chaque image du rendu final autour d'une telle transition.
• Redonnez ce qu'une vidéo invente. Une mise en page, une puce ou un mouvement qu'une autre vidéo pourrait utiliser devient un élément dans la bibliothèque du projet (un dossier avec le composant, son échantillon dans <nom>.demo.tsx et item.json, puis npm run library), et proposez à l'utilisateur de l'ajouter aussi à la bibliothèque de dolly.

Plusieurs marques dans un même projet (variantes pour des clients, ou une vidéo par produit) : <LookProvider style="soft" brand={{name, url, logo, accent}}> les définit pour tout ce qui est à l'intérieur, et useBrand() lit la marque.

Chaque format. Les scènes lisent le cadre à partir de useLook() : look.safe (les retraits que les plateformes couvrent avec leurs propres boutons : gardez le texte à l'intérieur), look.band (la bande de légende en haut), look.aim (passez à focusOn), look.size (la taille du titre), look.tall, et byShape(look, {wide, tall, square}) pour choisir une mise en page.

5. Le goût

Ce qui le rend cher, dans n'importe quel style :

• L'apparence propre du produit. Son accentuation, ses polices (brand.fonts), son logo, un style qui lui convient.
• Un titre sur chaque image, dans la bande en haut, la phrase d'accentuation mise en forme selon le style.
• Des choses réelles, coupées de près. Fenêtres entières, volets individuels sous forme de cartes flottantes, le téléphone à côté du Mac. Une scène est souvent deux ou trois cuts, et la légende change avec le cut. Recadrez serré autour de ce vers quoi un push-in se dirige.
• Montrez l'entrée. Tap là où quelque chose est tapé, Callout ou Spotlight autour de ce qui compte, un Cursor sur un modèle, une puce Speed chaque fois que la séquence est accélérée.
• Son à chaque tournant, et peu d'autre. public/sfx/ting.wav sur chaque moment où l'histoire tourne, à l'image où il devient lisible (pas la barre de mesure suivante) ; click.wav sur un tap ; whoosh.wav seulement sous les déplacements de tout le cadre (la vidéo en joue un sous une transition qui voyage : slide, whip, zoom, flip, au plus un toutes les 8 s), environ deux par vidéo. Limitez les effets à environ 5 par 10 s et laissez la musique porter les autres cuts : la piste sous licence de l'utilisateur, ou npm run music -- <secondes>.
• Évitez les signes du design généré : texte en dégradé, dégradés violet-bleu, cyan sur fond sombre, chaque carte identique, un effet sur chaque mot, cinq transitions dans une même vidéo. Un effet par idée, un style de transition par vidéo (plus un accent), les valeurs par défaut du style d'abord.

Règles du mouvement. Vérifiez chaque image par rapport à elles.

1. Déplacez la caméra, pas les objets. Un seul chemin de caméra par plan ; la profondeur donne le parallaxe.
2. Un seul mouvement par plan, avec une raison : révéler, suivre, ou pousser vers ce qui compte.
3. Plat pour lire. Tant qu'il y a du texte à lire, il fait face à la caméra et se déplace lentement.
4. Adoucissez tout. Arrivez avec ease.out, partez avec ease.in (plus rapide), ease.inOut entre les arrêts. Ne rebondissez que là où le style est rebondissant, ou sur un logo.
5. Ne vous arrêtez jamais complètement. Donnez à chaque plan une dérive lente (le deuxième argument de useShot).
6. Tenez assez longtemps pour lire, puis coupez. En cas de doute, tenez plus longtemps et raccourcissez la scène suivante.
7. Coupez sur le temps (0,5 s à 120 BPM), et gardez la direction du mouvement à travers le cut : une scène part de la manière dont la suivante arrive.
8. Retenue. Le produit est la star : au plus un mouvement ou effet tape-à-l'œil par 10 s.

Les chiffres que les meilleures vidéos de lancement atteignent (mesurés image par image) : l'image bouge en 0,1 s et le premier mot se lit en 0,4 s ; le produit est à l'écran au quart du temps ; quelque chose change environ toutes les 0,7 s, même à l'intérieur d'un plan long ; le texte en cours de lecture se déplace d'environ 3 px par image ; un arrêt conçu de 1–1,6 s sur l'affirmation clé, pas d'autre immobilité de plus de 0,8 s ; le plus grand moment à environ 80 % du temps de lecture, puis un carton de fin calme d'environ 2 s.

references/pièges.md contient les pièges : ce qui aplatit la 3D, ce qui casse le rendu image par image, les limites du ffmpeg inclus.

6. Réviser

npx remotion still Sheet out/sheet.png                                          # la vidéo, 1 image/s
npx remotion still Sheet out/focus.png --props='{"scene":"NeedsYou","every":6}' # une scène, 5 images/s
npx remotion still Sheet out/v.png --props='{"format":"vertical","guides":true}' # un autre format, zone de sécurité dessinée
npx remotion still Vertical out/f140.png --frame=140                            # une image, en taille réelle
npm run styles && npm run formats                                               # une image dans chaque style/format

Lisez chaque PNG. Vérifiez que :

• les 2 premières secondes ont du sens sans son et sans contexte ;
• tout ce qui est lisible est perpendiculaire à la caméra et tenu (plusieurs cellules quasi identiques à la suite) ;
• le texte se trouve à l'intérieur de la zone de sécurité en pointillés dans chaque format, et le sujet entre les lignes pointillées ;
• rien d'important n'est recadré par le bord du cadre, caché derrière un plan plus proche, ou sous une légende ;
• aucune image n'est vide ou en miroir (la caméra à l'intérieur ou derrière quelque chose) ;
• cellules voisines

…

[tronqué pour la traduction]