ai-video-render

ai-video-render : Rendu d'animations par code

Quand l'utiliser

film.json existe et le style est choisi. Cette compétence transforme le storyboard en images : une page de rendu, des captures d'écran, et une vidéo silencieuse. Aucun travail de voiceover n'a lieu ici.

Le contrat de déterminisme (non négociable)

• Chaque image est une fonction pure du temps : window.render(t) dessine l'image de n'importe quel instant. Pas de requestAnimationFrame, pas de setTimeout, pas de transition CSS, pas d'état sauvegardé entre les images pour l'export.
• Toute aléatoire utilise des graines fixes. N'utilisez jamais une source aléatoire non ensemencée ou une horloge réelle dans le chemin de rendu.
• Réinitialisez l'état du canvas au début de chaque image.
• La page expose window.seek(t), window.render(t), et window.ready = true après le premier rendu réussi.
• Deux rendus du même timestamp doivent produire la même image. Vérifiez cela avec scripts/determinism-check.js avant un rendu complet.

1. Choisir un style (choix utilisateur, porte verrouillée)

Recommander 1 style plus 2 alternatives différentes, avec différences visuelles, raisons et limites, dans style-options.md. Attendez que l'utilisateur choisisse. « Lancez-le » n'est pas une autorisation pour choisir.

Catalogues de styles (à récupérer vous-même en amont ; les fichiers de prompt et les sources de démonstration ne sont pas dans ce dépôt) :

• Flat flowchart, hand-drawn notes, retro newspaper, retro paper-cut, surreal collage, 3D cartoon, black-background tech (7 ensembles, dashi-animationstyle).
• 15 styles MG : flat vector, line art, isometric 2.5D, 3D render, shape morph, sticker explainer, cyberpunk HUD, collage, aurora glass, Bauhaus, synthwave, pixel art, liquid motion, frame-by-frame line boil, variety captions.
• 36 recettes de styles artistiques (huashu-art-motion) et styles lemo-opuscar : impasto oil, watercolor, Chinese ink wash, ukiyo-e, whiteboard explainer.

Règles d'utilisation des styles :

• Un film utilise un seul style, un seul thème, et au maximum 2 grammaires d'animation.
• Apprenez la méthode à partir du prompt ou de la démo d'un style, puis refaites le contenu pour le nouveau sujet. Ne copiez jamais la composition, les personnages ou les actifs d'une démo dans le film.
• Lorsqu'un prompt de style dit « ne pas modifier les caractéristiques signature », ne modifiez que la graine créative (histoire, marque, copie, palette) ou la sortie (par exemple vertical 1080x1920, durée).
• N'utilisez pas de dégradés bleu-violet, de ciels étoilés violet foncé, ou de cyan-violet néon (perçus comme un goût IA évident) sauf si l'utilisateur le demande explicitement.
• Le code ne dessine jamais un visage humain réaliste. Utilisez des images générées par IA uniquement pour des plans de personnages sur fond vert, composites dans des scènes codées ; sans capacité de génération d'image, montrez uniquement les mains et les dos.

2. Construire plan par plan

• Écrivez la page de rendu à partir de templates/render-page.html et templates/render.js. Taille par défaut 1920x1080 (vertical : 1080x1920 avec composition et sous-titres réaménagés, jamais une image horizontale mise à l'échelle).
• Construisez un plan à la fois. Rendez 3 images clés par plan (début, milieu, fin) et vérifiez le débordement de texte, les chevauchements, la taille du sujet et la durée à l'écran. Corrigez le plan avant de passer au suivant.
• Pour les films de plus de 30 secondes, rendez un échantillon basse résolution sans flou de mouvement d'abord, confirmez-le, puis rendez la version complète.
• Le style de rendu 3D fait exception : rendez les images dans Blender, ajoutez les mots et le grain sur la page web.

3. Rendu et assemblage

• Chrome sans tête capture une image par image au framerate du film. Assemblez avec ffmpeg (H.264, CRF 16). Laissez la piste audio de côté ici ; le voiceover est mélangé dans la compétence suivante.
• Gardez une seule timeline pour le son et l'image : les coupes et les actions clés se situent sur la grille de beats ou la timeline du voiceover.
• Vérifiez avec ffprobe : H.264, 1920x1080 (ou 1080x1920), 30 ips, le nombre d'images correspond à la durée de film.json multipliée par les ips.

Contrat de sortie

• render-page.html + render.js (la page de rendu du film).
• frames/ (captures par image).
• film.mp4 (vidéo silencieuse).
• render-report.md (résolution, ips, nombre d'images, résultat de la vérification de déterminisme).

Règles

• Une vérification qui n'a pas été exécutée est écrite comme « non exécutée ». Ne prétendez jamais qu'un rendu a passé une vérification qui n'a pas eu lieu.
• Ne présentez pas une page HTML, un fichier intermédiaire silencieux ou un prompt comme le film fini.
• Les images de référence sont celles de l'utilisateur ou sous licence ; le film fini ne contient jamais l'image originale.