kosta4a/stopmotion-video

Vidéo stop-motion

Les vidéos réalisées avec cette compétence bougent comme un stop-motion calé sur une chanson. Chaque pose est tenue pendant une double-croche, puis tout change d'un coup. Les pages arrivent sur les temps forts des mesures. Chaque clic tombe sur un coup de batterie, et les grands changements atterrissent sur les grosses caisses importantes. Le nombre d'images par seconde reste volontairement bas. Quand un mouvement paraît brusque, ses poses sont mieux espacées ; le rythme n'est jamais lissé.

Les règles proviennent de la réalisation d'un film de lancement de 47 secondes calé sur un morceau drum and bass à 169,825 BPM, après plusieurs centaines de tours de notes. Le film tournait à 30 ips et tenait une pose par double-croche, soit 5,66 poses par seconde, 5 ou 6 images chacune. Les valeurs ici sont celles du film, et dans live.md celles d'une page web qui en joue les scènes avec un métronome. Quand une règle se généralise au-delà, le texte le précise.

Vocabulaire

• Pose : une image fixe tenue, la double-croche de la chanson. Le code l'appelle un beat (STEP_MS, useBeat).
• Temps de la chanson (song beat) : ce que compte le BPM, une noire. Il dure deux poses et reçoit un clic de métronome.
• Mesure : quatre temps de la chanson, huit poses. En drum and bass, la grosse caisse tombe sur la pose 0 et les caisses claires sur les poses 2 et 6, en comptant à partir de 0.
• Coup (hit) : un son de batterie dans la chanson. Une grosse caisse importante (big kick) est celle qui ouvre une phrase (toutes les mesures impaires dans la piste du film).
• ms auteurs : les temps dans le code. Ils sont écrits sur une pose de 200 ms et joués SPEED fois plus vite (SPEED = TEMPO / 150).
• Horodatages (timestamps) écrits m:ss.ff, où ff compte les images. C'est ainsi que Remotion Studio affiche le temps, et que les notes arrivent.

Posture de travail

• Conserver volontairement le faible nombre d'images par seconde. Ne jamais lisser le rythme pour corriger un mouvement. Mieux espacer les poses du mouvement à la place.
• Tout tient une pose pendant un temps et change ensemble, transitions comprises. Rien ne tourne sur sa propre horloge : une animation intégrée ou une page qui défile avance aussi par la pose. La frappe est la seule exception : elle va plus vite que le temps, comme la frappe le fait, à partir de sa pose.
• La chanson est l'horloge. Mesurez-la avant de storyboarder. Disposez les pages sur ses mesures et placez les actions sur ses coups.
• Une seule horloge pour toute la vidéo. Comptez les poses sur les images de la vidéo, jamais sur celles d'une scène.
• Déplacez-vous par mesures entières. Modifiez la longueur d'une page par mesures entières, ou reprenez les poses ailleurs avant la prochaine barre de mesure. Sinon, tout ce qui suit se décale de la chanson.
• Pas de poses inactives. Une fois que ce qui se passe sur une page est terminé, ne la tenez que le temps nécessaire au spectateur pour la comprendre.
• Peu de types de changements, une seule direction, rien ne fond.
• Vérifiez en mesurant. Utilisez des images fixes une par pose, des temps mesurés dans l'audio du rendu, et une coupe au métronome. Ne jugez pas la synchronisation à l'œil.

L'outil : Remotion, par défaut

Proposez Remotion pour réaliser la vidéo, sauf si le projet réalise déjà sa vidéo d'une autre manière. Dites-le avant le storyboard, avec la raison, et ne changez que si l'utilisateur demande un autre outil. Sur une page web, jouez-la en direct (live.md) ; dans un outil d'animation, les règles tiennent toujours mais les aides ne s'appliquent pas.

• Pourquoi ça convient. Chaque image est un composant React calculé à partir du numéro d'image, donc une pose est exacte sur n'importe quelle image où elle tombe et se rend de la même façon à chaque fois. Un rendu dessine les images dans le désordre, sur plusieurs onglets, ce que seule une vidéo pilotée par l'image survit. Les aides dans assets/remotion/ sont écrites pour lui, et son Studio affiche le temps en m:ss.ff, la forme sous laquelle les notes arrivent.
• Installation. npx create-video@latest avec le modèle vide. Épinglez remotion et chaque paquet @remotion/* à une version exacte (celle du film : 4.0.532), et gardez TypeScript en 5.x (clock.md §7). Une seule composition, 1920×1080 à 30 ips. Copiez beat.ts et transitions.tsx dans src/ et définissez TEMPO.
• Configuration. Dans remotion.config.ts : images JPEG à qualité 95 (la qualité par défaut de 80 rend rugueux les fonds plats et les caractères fins sur leurs bords), couleur BT.709 (pour que les lecteurs affichent les couleurs comme le navigateur), et écrasement activé.
• Aperçu et rendu. npx remotion studio pour travailler ; npx remotion render <Comp> out/<nom>.mp4 pour la 1080p, avec --scale=2 pour la 4K ; --frames=<premier>-<dernier> ou npx remotion still <Comp> --frame=<n> pour vérifier une portion ou une pose.

L'ordre des décisions

Travaillez de haut en bas. Chaque étape contraint la suivante.

1. Proposer l'outil. Remotion, sauf si le projet réalise déjà la vidéo autrement ; installez-le comme ci-dessus avant toute autre chose.
2. Mesurer la chanson. Trouvez le tempo à partir de ses attaques et vérifiez que la grille tient sur la portion que vous utilisez. Marquez les mesures et les phrases, les endroits où la batterie s'arrête et revient, et les grosses caisses importantes. Coupez l'extrait exactement sur l'échantillon, un cheveu (23 ms) avant le premier coup d'une phrase. Voir song.md.
3. Régler l'horloge. Une pose est la double-croche de la chanson. Auteurisez sur une pose de 200 ms avec SPEED = TEMPO / 150, faites le rendu à 30 ips, et comptez les poses sur les images de toute la vidéo. Voir clock.md.
4. Disposer les pages sur les mesures. Écrivez le storyboard en poses. Chaque page a un nombre entier de poses et commence sur un temps fort de mesure. Mappez les événements de la chanson sur les poses avant d'animer quoi que ce soit.
5. Placer les coups. Le code est tapé en morceaux sur les doubles-croches, et les titres ainsi qu'un retour arrière maintenu vont plus vite que le temps à partir de leur pose. Les clics et pops vont sur les caisses claires, les atterrissages et nouvelles pages sur les temps forts, et les grands changements sur les grosses caisses importantes. La construction se fait dans le calme, et l'atterrissage a lieu quand la batterie revient. Voir hits.md.
6. Espacer les poses. Choisissez chaque courbe pour ses poses. La première pose d'un mouvement est son premier pas, et chaque pose le déplace visiblement. Les choses atterrissent plutôt que de ramper. Voir poses.md.
7. Changer de page. Utilisez une coupe franche sur le temps, une coupe du sol, une page posée comme un drap, la caméra qui entre dans une couleur, un remplissage depuis l'intérieur, une ouverture à travers une forme, ou des blocs de pixels. Jamais de fondu. Voir hits.md.
8. Régler la typographie. Le crénage se resserre quand la taille augmente, et l'interlignage se resserre avec lui. Chaque mot atteint 4,5:1 par rapport à son fond à chaque pose. Les titres sont tapés, pas fondus. Voir type.md.
9. Faire le son. Chaque clic va sur le coup de la chanson lui-même, placé sur l'échantillon, et tous les clics sont cuits dans une seule piste qui commence avec la chanson. Baissez la musique sous les clics, et gardez une coupe au métronome pour vérifier. Voir sound.md.
10. Décider où sauter un temps. Couper, baisser, tenir, claquer, couper des mesures entières, finir sur un temps de la chanson. Voir skipping.md.
11. Vérifier. Faites une planche contact, mesurez la synchronisation et regardez la coupe au métronome. Prenez des notes sous forme d'horodatages mappés sur des poses. Voir checking.md.
12. Jouer en direct, dans un navigateur ? Les mêmes règles avec un métronome : une horloge sur le temps de la page, l'image 25 ms en avance sur le son, le son programmé en avance sur l'horloge audio, et sans chanson, chaque changement sur un clic. Voir live.md.

Règles en un coup d'œil

Horloge

Élément	Règle
Nombre d'images par seconde	30 ips, volontairement. Une variante fluide à 60 ips peut partager le storyboard (clock.md §8)
Pose	la double-croche de la chanson : 176,65 ms à 169,825 BPM, 5,66 par seconde, 5 ou 6 images à 30 ips
Auteurisation	chaque temps en ms sur une pose de 200 ms ; SPEED = TEMPO / 150 ; ms() vers images, seconds() pour les horloges intégrées
Première image de la pose n	ceil(n × images par pose), sur les images de toute la vidéo (beatFrame)
Page	un nombre entier de poses, commençant sur un temps fort de mesure (pose divisible par 8)
Modification d'une longueur	par mesures entières, ou reprenez les poses avant la prochaine barre de mesure
Glissements Studio	une piste glissée écrit un décalage from qui décale l'image par rapport au son : supprimez-le

Espacement

Mouvement	Courbe	Poses
Entrée et sortie (un mouvement de caméra, un passage, un soulignement)	easeInOutSine	7, 18, 25, 25, 18, 7 % sur six poses
Entrée depuis hors du cadre	un ease-out	sinon il passe son démarrage lent hors de vue
Une page posée sur une autre	easeOutSine	38, 70, 92 % sur une transition de trois poses
Zoom, épaississement de lignes, agrandissement d'ouvertures	croît du même facteur à chaque pose	un zoom garde sa cible sur une ligne droite vers le milieu
Pas sur peu de poses	cubique in-out (3, 12, 35, 35, 12, 3 : sauts au milieu) ; le strong ease-out (atterrit sur sa première pose : 78, 97, 100 % pour une transition de trois poses, 88, 99, 100 % pour un mouvement avec moved())

Éléments sur le temps

Élément	Règle
Clic	une pose pressée, sur une grosse caisse ou une caisse claire ; le curseur disparaît la pose après son dernier clic
Curseur	solide pendant la frappe, puis deux poses allumé et deux éteint
Rotateur	au maximum un quart de tour par pose ; plus d'un demi-tour par pose donne l'impression de tourner à l'envers
Marque roulée	tourne de sa course sur son rayon, atterrit droit, sur easeOutSine
Compteur	un chiffre par pose sur le strong ease-out, chiffres tabulaires, deux poses sur le nombre rond
Titres	tapés plus vite que le temps à partir de leur pose : un mot toutes les trois images ; longues lignes une lettre toutes les 25 ms (temps auteur)
Code	tapé en morceaux inégaux de 2 à 4 caractères par pose
Retour arrière maintenu	une seule passe, une lettre toutes les 25 ms (temps auteur), sauts de ligne aussi
Élévation de caméra	s'élève, reste immobile deux poses en haut, redescend
Depuis hors du cadre	pas dessiné tant qu'il n'a pas bougé
Placé à la main	décalé d'au plus un dixième du déplacement de cette pose, pas du tout une fois arrêté ; posé à quelques pixels près

Coups

Dans la chanson	Dans l'image
Doubles-croches	code tapé en morceaux, les étapes d'un mouvement
Caisses claires	clics, pops
Temps forts	atterrissages, nouvelles pages, première action d'une page
Grosses caisses importantes	grands changements : atterrissage d'une page, la dernière page entière, le dernier clic
La batterie s'arrête	la construction
La batterie revient	l'atterrissage

Les clics doivent être sur le temps. Une transition peut en être décalée.

Son

Élément	Règle
Placement du clic	sur l'échantillon, sur le coup de la chanson (les coups du film arrivaient 25 ms après ses poses)
Fichier de clic	40 ms de silence avant son tick, pour que le rogner sur l'échantillon ne le mange jamais
Piste de clics	chaque clic cuit dans une seule piste qui commence avec la chanson
Baisse du volume	silence autour d'un clic important ; 45 % pendant 160 ms sous les autres ; fondus de 10 ms
Métronome	un clic sur chaque temps de la chanson sur ses coups, le premier de la mesure plus haut, musique à 20 % ; jamais dans l'export

Typographie

Taille	Crénage	Interlignage
moins de 20 px	0 ; mono capitales +2 %	1,4–1,5
20 px et plus	−1 %	environ 1,4
32 px et plus	−2 %	environ 1,25
56 px et plus	−3 %	1,1–1,2 ; jusqu'à 0,9 pour les titres d'affichage sur deux lignes

Chaque mot doit atteindre au moins 4,5:1 par rapport à son fond à chaque pose. Utilisez une seule famille par défaut (Geist et Geist Mono dans les exemples), noir sur blanc, comme le fait le design tactile ; le film lui-même associait une police d'affichage à sa police de texte et plaçait ses pages sur des fonds de couleur unie. Les compteurs utilisent des chiffres tabulaires. Les titres sont tapés, jamais fondus.

En direct, dans un navigateur

Élément	Règle
Horloge	beat = anchorBeat + temps écoulé s × BPM / 60 × 2 sur performance.now() ; ré-ancrée à maintenant sur un changement de tempo ; chaque scène une fonction pure du beat
Image	lit le beat 25 ms en avance ; chaque scène engagée dans la frame d'animation (flushSync)
Son	une minuterie toutes les 25 ms programme les 120 ms suivantes sur l'horloge audio (getOutputTimestamp()) ; la fenêtre mesurée en temps audio, la latence de sortie ajoutée
À l'écran	seul ce qui est à l'écran s'anime ; l'exemple le plus à l'écran est entendu
Démarrage	essayé au chargement, puis à la première pression ou touche ; une pression qui a démarré le son ne le coupe pas (600 ms) ; un muet mémorisé
Pas de chanson	chaque changement sur un clic : un mouvement peut avancer sur les doubles-croches mais commence et atterrit sur les clics ; le propre clic du métronome est omis
Métronome	un coup de bois silencieux (880 Hz en 50 ms, 1320 Hz sur le premier de la mesure), pas de bruit sourd sans musique, le tout via un seul limiteur
Pause	sur le clic le plus proche : joué jusqu'à lui, ou reposé sur 160 ms
Mouvement réduit	une pose fixe qui montre l'idée, ne bougeant qu'après une pression d'un bouton sonore
Typographie	mots 4,5:1, marques signifiantes 3:1, les plus petits mots d'une scène redimensionnée 9 px ou plus tels que rendus

Quand sauter un temps

La grille est stricte, donc la briser est une décision. Chaque rupture ci-dessous a une raison dans skipping.md.

• Couper la musique autour d'un clic important. Elle devient silencieuse de 50 ms avant le clic jusqu'à la prochaine barre de mesure, avec des fondus de 10 ms. Le clic est entendu seul, et le temps revient avec ce qui suit.
• Baisser sous les autres clics. Abaissez la musique à 45 % pendant 160 ms pour laisser de la place au son du clic.
• Tenir un résultat seul pendant un temps de la chanson avant que la chose suivante commence, par exemple une coche après une copie.
• Tenir deux poses identiques en haut d'une élévation.
• Tenir deux poses sur un nombre rond avant de continuer.
• Accrocher une note qui tombe entre les temps au temps accentué le plus proche.
• Couper des mesures entières, même quand la note en demande moins. Dites ce que ça coûte.
• Finir sur un temps de la chanson. La dernière page tient environ 2 secondes, avec la musique qui s'estompe sur la dernière pose. Sinon, finir juste après l'action.

Jamais livrer

• Mouvement lissé hors du temps pour cacher un mouvement mal espacé
• Une scène comptant les poses depuis sa propre première image
• Une page qui commence hors d'une barre de mesure sans une raison écrite à côté
• Un changement de longueur qui n'est pas en mesures entières et n'est pas repris avant la prochaine barre de mesure
• Un décalage from de Studio laissé dans l'arbre de composition
• Un clic hors d'une grosse caisse ou caisse claire, ou un son de clic placé sur une image au lieu de l'échantillon
• Des sons de clic courts démarrés sur leurs propres images au lieu d'une seule piste cuite
• Un mouvement dont la première pose est celle qu'il quitte, ou qui rampe ses derniers pixels
• Quelque chose depuis hors du cadre dessiné avant d'avoir bougé
• Un rotateur ou une roue tournant de plus d'un demi-tour par pose
• Un fondu, ou un fondu enchaîné entre des fonds saturés
• Changements de fond plus rapides que trois flashs par seconde
• Un mot en dessous de 4,5:1 par rapport à son fond à n'importe quelle pose
• …

[le reste du contenu original est tronqué pour la traduction]