tugrulz/style-kurzgesagt

Vidéos explicatives style Kurzgesagt

Ce skill est une direction créative. Il décide de l'apparence, du mouvement, du son et du ton d'une vidéo. Les skills remotion-* décident comment la construire en code : lisez remotion-best-practices (le routeur) et remotion-markup avant d'écrire une composition, et suivez-les partout où un extrait ici est en désaccord.

Le genre fonctionne parce qu'il rend les idées complexes petites, chaleureuses et amusantes, tout en gardant les visuels clairs. La plupart des règles ci-dessous servent cela : des formes simples pour que l'idée soit lisible, un mouvement doux constant pour la rendre vivante, et de grands changements d'échelle pour qu'un nombre ou une distance se ressente plutôt que se lise.

Les dix règles du style

1. Pas de contours. Les formes sont définies par un remplissage, un dégradé et une forme d'ombre. Les traits n'apparaissent que pour les lignes de diagramme, les graphiques et les pointeurs, avec une épaisseur uniforme et des extrémités arrondies.
2. Géométrie simple et arrondie. Cercles, capsules, rectangles arrondis, blobs doux. Si une forme a besoin de plus d'une douzaine de points de chemin, simplifiez-la.
3. Fond saturé foncé, accents chauds. Un champ dégradé sombre (bleu marine, indigo, aubergine, bleu-vert profond) avec une ou deux teintes d'accent vives. Le contraste chaud/froid attire l'œil sur le sujet.
4. La lumière a une direction. Chaque objet se compose d'une base + d'une ombre (décalée de teinte vers le bleu/violet, pas seulement plus foncée) + d'un mince reflet. Une seule direction de lumière par scène.
5. Personnages minuscules, presque sans visage. Des yeux en points, généralement pas de bouche, des membres trapus. L'émotion vient de la posture et du mouvement, pas des détails du visage.
6. Bords animés, centre clair. Les couches d'arrière-plan portent de petits détails à faible contraste (étoiles, particules, formes lointaines). Le sujet est fort et lisible en taille de vignette.
7. Rien n'est jamais statique. Dérive douce, léger zoom avant, parallaxe, scintillement. Un plan fixe semble mort.
8. Entrée rapide avec rebond, sortie douce. Les éléments apparaissent avec un petit dépassement, décalés en vagues. Les fondus et les mouvements de caméra s'estompent doucement.
9. L'échelle est l'effet spécial principal. Zoomez à travers un objet dans un monde plus petit, reculez pour montrer à quel point quelque chose était petit, répétez les icônes jusqu'à ce qu'un nombre tombe.
10. Les mots sont rares. La narration porte le contenu. Le texte à l'écran est réservé aux étiquettes, aux chiffres et à la chute occasionnelle.

Flux de travail

Travaillez par étapes avec deux points de validation. Les scripts et les storyboards sont peu coûteux à modifier, contrairement à l'animation. Obtenez donc un accord avant de construire.

0. Brief. Ne demandez que ce qui manque : sujet, public, durée, format, source vocale (enregistrement utilisateur, ElevenLabs via voiceover.md de remotion-markup, ou placeholder silencieux) et ambiance. Valeurs par défaut : 16:9, 1920×1080, 30 fps, 3-5 minutes.
1. Recherche → research/facts.md. Tableau avec affirmation | chiffre | source | confiance. N'inventez jamais une statistique ; marquez les estimations comme telles. La vidéo explicative ne vaut que par ses faits.
2. Script → script.md. Lisez references/script-and-structure.md. Point de validation : l'utilisateur approuve le script.
3. Storyboard → storyboard.md, une ligne par plan (modèle dans la référence du script). Choisissez une recette dans references/scene-recipes.md pour chaque plan. Point de validation : l'utilisateur approuve le storyboard.
4. Bible de style. Copiez assets/theme.ts vers src/kg/theme.ts. Choisissez une palette par acte (un « script couleur » ; voir references/visual-language.md) pour que l'ambiance change avec l'argumentation.
5. Construction. D'abord les primitives partagées dans src/kg/ (formes ombrées, champ d'étoiles, personnages, étiquette, grue de caméra), puis un composant par scène dans src/scenes/. Lisez references/visual-language.md et references/motion-language.md. Utilisez remotion-create pour l'échafaudage et remotion-markup pour la mécanique.
6. Audio. Narration d'abord, puis déduisez la durée de chaque plan des timings audio (remotion-captions pour les timings des mots, calculateMetadata pour la durée dynamique). Ajoutez un fond musical et un petit pop/whoosh pour chaque entrée majeure (sfx.md de remotion-markup). Mixez la narration autour de -20 dB RMS, le fond musical environ 8 dB en dessous, et le pic à -1 dBFS ou moins. Les fichiers de synthèse vocale culminent souvent à 0 dBFS, donc réduisez la narration à environ 0.8 avant d'ajouter quoi que ce soit d'autre (détails dans references/motion-language.md).
7. QA et rendu. Rendez des images fixes à chaque battement, à l'image 0, et de chaque côté de chaque transition de scène. Exécutez la liste de contrôle ci-dessous, rendez avec remotion-render, puis mesurez l'audio du résultat.

Structure du projet

src/
  kg/theme.ts          palettes, rampes d'ombre, préréglages d'assouplissement
  kg/primitives/       ShadedSphere, StarField, Character, Label, CameraRig, ...
  scenes/NN-name.tsx   une scène par groupe de plans du storyboard
  Video.tsx            séquence les scènes ; possède l'audio
public/                narration, musique, effets sonores
research/facts.md
script.md
storyboard.md

Notes d'environnement

• Windows : gardez le chemin du projet court. Les outils lancés par Remotion (esbuild, le moteur de rendu, Chrome headless) échouent avec ENOENT lorsque leur chemin résolu dépasse 260 caractères. C'est facile à atteindre sous AppData ou dans un dossier de session profond, où le chemin s'allonge encore une fois que le système le résout. Échafaudez dans quelque chose comme D:\my-video et rendez une image fixe avant de construire quoi que ce soit.
• Le ffmpeg fourni avec Remotion est une version minimale sans le filtre volumedetect. Pour vérifier les niveaux, décodez le rendu en WAV (npx remotion ffmpeg -i out.mp4 -vn -ac 1 -c:a pcm_s16le check.wav) et calculez le pic et le RMS dans un petit script.

Liste de contrôle avant rendu

Exécutez cette liste sur des images fixes du début, du milieu et de la fin de chaque scène, et sur l'image 0 et les images de chaque côté de chaque transition de scène.

• Y a-t-il un contour sur une forme qui n'est pas une ligne de diagramme ? Supprimez-le.
• Chaque objet a-t-il un côté ombré et un reflet, éclairé depuis la direction unique de la scène ?
• Y a-t-il au maximum 2 teintes d'accent plus la famille de fond dans le cadre ?
• Le sujet est-il lisible à 25 % de la taille ? Sinon, agrandissez-le ou réduisez le contraste de la périphérie.
• Quelque chose bouge-t-il chaque seconde de la scène (mouvement de fond, caméra, particules) ?
• Un nouveau battement visuel apparaît-il au moins toutes les 2-4 secondes, généralement aligné sur une phrase ?
• Le texte à l'écran fait-il 6 mots ou moins, au moins 36 px en 1080p, en casse de phrase ?
• Chaque nombre à l'écran figure-t-il dans research/facts.md avec une source ?
• Chaque lueur est-elle un simple dégradé (pas de bandes empilées), et tout ce qui attend hors écran est-il exempt de lueur visible à l'image 0 ?
• La vignette est-elle légère (environ 35 % dans les coins) et teintée de violet, pour que les sujets lumineux ne deviennent pas boueux ?
• Le texte à côté d'un sujet en expansion reste-t-il à l'écart de la taille maximale du sujet, et la boîte d'un compteur contient-elle sa valeur la plus large ?
• Après le rendu : le pic audio est-il à -1 dBFS ou moins, avec la narration clairement au-dessus de la musique ?

Garde-fous

• Originalité. Le look est un genre ; l'identité de la chaîne ne l'est pas. N'utilisez pas le nom Kurzgesagt, son logo, son intro/outro, ni ses personnages spécifiques (comme son oiseau) dans la sortie. Concevez des personnages originaux et un carton de fin original, et ne présentez pas la vidéo comme le travail de la chaîne.
• Précision. Une vidéo explicative enseigne, donc les faits sourcés comptent plus qu'une belle image. Indiquez l'incertitude dans la narration (« les scientifiques estiment... ») au lieu de l'arrondir, et terminez la vidéo par une liste de sources.
• Accessibilité. Ajoutez des sous-titres (remotion-captions). Évitez les flashs plus rapides que 3 par seconde, y compris les flashs de zoom avant plein écran. Ne codez pas les séries de graphiques uniquement par la couleur ; étiquetez-les directement.
• Sujets lourds. Des visuels mignons sur des sujets sérieux font partie du charme et du risque du genre. Pour la mort, la maladie, la guerre ou la pauvreté, gardez les visuels simples et évitez les blagues.

Fichiers de référence

Lisez ceci	Quand
references/visual-language.md	Choix des palettes, dessin des formes ombrées, arrière-plans, personnages, typographie, composition, recettes d'objets
references/motion-language.md	Écriture d'animations : assouplissement, apparition, mouvement de fond, caméra, parallaxe, zoom, graphiques, timing
references/script-and-structure.md	Écriture de la narration, planification de l'arc, rythme, fiche de faits, liste de plans
references/scene-recipes.md	Planification de chaque plan : révélation d'échelle, foule de 100, aparté, course contre la montre, diagramme de processus, etc.
assets/theme.ts	Point de départ pour les tokens de design (palettes, rampes d'ombre, préréglages d'assouplissement)