Zman2087/faceless-studio

Vidéo animée

Tout ce qui est ici est rendu dans remotion/ pour zéro crédit. Deux niveaux – essayez toujours le niveau 1 d'abord :

1. Composer des scènes prédéfinies dans une spécification (minutes, sans code).
2. Ajouter un nouveau type de scène au moteur lorsqu'une idée en a vraiment besoin (code, testé, puis réutilisable par chaque agent).

Avant de lancer le rendu local : si remotion/node_modules est manquant, exécutez cd remotion && npm ci (le premier rendu télécharge également le Chrome autonome de Remotion, ~170 Mo, une fois).

Niveau 1 — la trousse à scènes

scène (shots[].type)	meilleur usage	champs clés
kinetic	l'accroche, une chute	text, highlight, per_word (0.18) — les mots apparaissent un par un
title	une ligne forte unique	text ≤ 6 mots, highlight
number	un chiffre frappant	value, prefix, suffix, decimals, caption, color — compteur croissant
bars	comparer des tailles	title, unit, items[{label,value,color}]
compare	eux vs vous, mythe vs réalité, avant/après	title, left{label,items,color}, right{…}
list	« 3 choses », à faire/éviter	items, style tick/cross/number
timeline	comment c'est arrivé	items[{year,text}]
chat	une histoire racontée par SMS	title (contact), messages[{from: me/them, text, at}]
quote	une citation sourcée	text, by
media	b-roll, une photo, le clip IA	src, kenburns, headline, fit

Chaque scène accepte label (kicker), stamp (numéro de tampon en caoutchouc), bg (photo/video atténuée derrière, avec credit) et transition (fade par défaut, cut, slide, zoom, wipe). Les incrustations (headline, textover, lowerthird, stamp) se superposent à n'importe quelle scène. Référence complète : remotion/SPEC.md. Un exemple complet de chaque nouvelle scène : remotion/examples/animated.json.

Recettes

• Vidéo explicative sans visage (20–40 s) : accroche kinetic → number → bars/compare → list → title payoff qui fait écho à l'accroche. Voix off en audio, sous-titres depuis words, fond musical discret à 0.08–0.12.
• Histoire par SMS : accroche kinetic (« Elle a répondu à 3h du matin ») → un chat par échange (at espacé de 0.8–1.4 s, calé sur la narration) → title rebondissement. Gardez chaque bulle ≤ 10 mots.
• Insertion animée dans une vidéo parlée : CLIP_1 … number ou compare pendant 2–3 s sur le temps fort qui le dit (transition: "zoom") … retour à CLIP_1 avec start réglé à l'endroit où le clip doit reprendre.
• Mythe vs réalité : compare avec left.color: "danger", right.color: "good", puis un stamp « FAUX » sur le title suivant.

Planifiez les temps forts avec video-script (tools/beats.mjs synchronise les scènes avec la voix), puis :

cd remotion
node render.mjs job/spec.json --validate
node render.mjs job/spec.json job/final.mp4 --preview job/check.jpg --at 0.1,<milieu de chaque scène>,<fin-1>

Regardez toujours la bande de prévisualisation avant de livrer : accroche entièrement dessinée à 0.1 s, rien coupé sur les bords, pas de chevauchement de texte, couleur d'accent lisible, tag IA et filigrane présents.

Règles de style

• Marque depuis settings.brand (thème du spec) : une couleur d'accent, utilisée pour l'unique élément important dans chaque scène.
• ≤ 7 mots par titre, ≤ 12 par textover, ≤ 4 éléments par liste/colonne de comparatif (l'écran du téléphone est petit).
• Une scène reste affichée au moins 1.5 s par ligne de texte qu'elle contient.
• Les chiffres doivent correspondre aux citations ; n'animez jamais un chiffre que vous n'avez pas sourcé.
• Pas de logos de marques, pas de photos de vraies personnes, pas de captures d'écran de conversations réelles.

Niveau 2 — un nouveau type de scène

Uniquement quand aucune combinaison ci-dessus ne peut exprimer l'idée (par ex. un itinéraire sur une carte, un cercle de progression, une réaction en split-screen).

1. src/types.ts : ajouter XShot = ShotBase & { type: "x"; … } et l'ajouter à l'union Shot.
2. src/shots/Shots.tsx : écrire le composant à côté des autres — animer avec spring/interpolate depuis useCurrentFrame() (jamais d'animations CSS ni Math.random : les rendus doivent être déterministes), utiliser t.font, t.accent, tone(t, color), dimensionner pour 1080×1920, puis ajouter un if (s.type === "x") body = … dans ShotView. Si la scène est à l'écran à 0 s (base === 0), la dessiner entièrement sans entrée.
3. render.mjs : ajouter "x" à types et une validation pour ses champs obligatoires (l'agent de vérification s'appuie sur ces messages).
4. SPEC.md + le tableau ci-dessus : le documenter. L'ajouter dans examples/animated.json.
5. Tester : npx tsc --noEmit -p ., node render.mjs examples/animated.json out/animated.mp4 --preview out/animated.jpg --at … et regarder le résultat.