Communitygithub.com

ultimate-claude-render

Crée une vidéo (Reels, Shorts, TikTok, YouTube, annonce, démo produit) à partir d'une scène animée en HTML avec GSAP, rendue image par image, avec narration et sous-titres mot à mot, photos et vidéos insérées, écrans réels d'application, bande-son, effets, mixage à −14 LUFS et QA automatique. Fonctionne avec n'importe quelle marque (marque.json) sous Linux, macOS et Windows.

Qu'est-ce que ultimate-claude-render ?

ultimate-claude-render est une compétence avancée pour créer des vidéos professionnelles (Reels, Shorts, TikTok, YouTube, annonces, démos produit) à partir d'une scène HTML animée avec GSAP. Le rendu est effectué image par image dans un Chromium headless, puis assemblé avec l'audio, la narration, les sous-titres mot à mot, les effets sonores et le mixage final (−14 LUFS). Cette approche déterministe permet de tout refaire à l'identique. La compétence est conçue pour être utilisée avec Claude Code, Cursor, Codex ou d'autres agents IA capables d'exécuter des commandes shell. Elle prend en charge les marques personnalisées via un fichier `marque.json` et s'exécute sur Linux, macOS et Windows. Les étapes clés incluent la planification du script, la création des « stills » (images clés), la prévisualisation et le rendu final, avec un QA automatique pour vérifier la conformité (format, couleurs, volume, texte dans la zone de sécurité).

Compatible avec✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/PedroHenrique0713/ultimate-claude-render/tree/HEAD/skills/ultimate-claude-render

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

ultimate claude render

Une vidéo est une page HTML dont l'état dépend du temps t. Claude écrit la scène ; le moteur demande chaque image (window.__seek(t)), prend la capture dans Chromium headless et ffmpeg assemble le tout avec la voix, la bande-son et les effets. Rien n'est « enregistré » : tout est déterministe et reproductible.

Le repo est le moteur + les scripts audio + cette compétence. Les vidéos de chaque personne se trouvent dans des dossiers de projet en dehors de ce repo.

Avant d'écrire une ligne

  1. Exécutez ucr doctor. Si ffmpeg, Python avec numpy/scipy ou Chromium manque, il indique la commande exacte.
  2. Trouvez le repo. La compétence s'installe avec ucr installer-skill et le repo se trouve là où il a été cloné (ucr dans le PATH ou node <repo>/bin/ucr.mjs). Si vous ne le trouvez pas, demandez où il a été cloné ; ne réimplémentez pas le moteur.
  3. Planifiez avant de produire (une vidéo coûte cher à refaire) : script complet, format, marque, médias disponibles, chiffres sourcés, ce qui apparaît à chaque phrase. L'utilisateur approuve étape par étape : script → images de style (ucr stills) → prévisualisation → rendu final. Ne faites pas le rendu de la vidéo entière sans le script et les images approuvés.
  4. Marque existante d'abord. Lisez le brandbook, le site ou l'application de l'utilisateur et écrivez le marque.json (couleurs, police, logo). N'inventez jamais d'identité et ne redessinez pas le logo. Le matériel client avec une apparence de modèle générique est rejeté : photo, couleur et logo réels.

Flux

ucr nouveau ma-video --marche <dossier-marque|_modele|exemple> --format vertical
# éditez narracao.txt, projet.json et scene.html
ucr tout ma-video          # prep → media → voix → temps → beats → sons → mix → rendu → QA

Étapes isolées : ucr prep|media|voix|temps|beats|sons|mix|rendu|qa <dossier>. Vérification économique : ucr stills <dossier> 2,8.5,15 (PNG à n'importe quel instant, sans rendre la vidéo). Prévisualisation en temps réel : ucr preview <dossier> --audio.

Dossier d'un projet :

FichierDescription
projet.jsonformat, fps, marque, voix, respirations, mix, rendu
narracao.txtle script parlé ; devient voix, sous-titres et temps de la scène
scene.htmlla scène (ce que vous écrivez)
marque/ ou marque dans un autre cheminmarque.json + polices + logo
media/photos, vidéos, piste.mp3, sfx/<type>/
build/, .ucr/, sortie/générés ; ne pas versionner

Écrire la scène

Squelette : voir exemples/modele-scene.html du repo. L'ordre des <script> est important (GSAP → marque → projet → thème → temps → media → beats → moteur). API complète dans references/moteur-api.md ; résumé :

  • M.fond(), M.camera(), M.marque(), M.sous-titres(F, { cles: [...] }), M.grand(texte, { t, fin })
  • M.cellulaire(pere, {x,y,B}), M.fenetre(pere, {...}), M.terminal(pere, {lignes}), M.curseur/cliquer/toucher
  • M.photo(pere, 'nom', {...}), M.video(pere, 'nom', { son: true }) (depuis media/, après ucr media)
  • M.T('mots') = instant où ces mots sont dits. Ancrez tout sur la parole, pas sur des secondes fixes : changer une phrase du script ne décale pas le reste de la scène.
  • M.son(t, 'type') marque un effet pour le mix ; M.beat(t) déclenche une coupe sur le beat de la piste.

Règles d'or de la scène :

  1. Tout ne dépend que de t. Tweens sur la timeline (M.tl), compteurs et dessins dans M.ACTUALISER.push(t => ...). Pas de setInterval, Date.now(), <video> avec play() ou animation CSS.
  2. Zone de sécurité de la plateforme : le QA détecte le texte en dehors (vertical : 14% en haut et 25% en bas).
  3. Le repos entraîne la dérive. Rien de statique pendant plus de ~1,5 s (le QA mesure et le spectateur zappe). M.camera() fait bouger la scène en 3D ; une carte sombre sur fond sombre bouge sans que personne ne le remarque, alors donnez-lui une bordure et de la luminosité.
  4. Chaque parole change le cadre. Nouvelle phrase, nouvelle image ou nouveau mouvement.
  5. Avant de rendre : ucr stills à 3 ou 4 instants. Une erreur de script (variable répétée, mot hors narration) apparaît immédiatement avec le message de la page.

Audio

  • Voix : projet.json → voix.fournisseur : edge (gratuit, sans clé ; bon pour tester, pas pour usage commercial), elevenlabs, fal, ou fichier (vous avez enregistré ; temps via Deepgram nova-3). Texte à l'écran = celui du narracao.txt, les temps viennent de la voix.
  • Respirations : "respirations": {"2": 1.2} = 1,2 s de silence après la phrase d'indice 2 (l'image a besoin de temps pour entrer).
  • Piste : media/piste.mp3 (licence commerciale !) ou "synthetique" (originale, sans licence). Baisse automatiquement sous la voix (ducking).
  • Effets : synthétisés (whoosh, impact, clic, brillance, montée, obturateur, pop, touche, grave, papier) ou fichiers dans media/sfx/<type>/.
  • Master : −14 LUFS et −1,5 dBTP (Reels/TikTok/Shorts), mesuré dans le fichier final.

Détails et pièges : references/audio.md.

QA et livraison

Le rendu exécute le QA automatiquement (sortie/<nom> - QA.txt) : taille, couleur (BT.709 marqué), image fixe, segment noir, loudness, pic et texte hors zone de sécurité. Un QA vert n'est pas une approbation : ouvrez le MP4, regardez les images, écoutez. Signalez ce que le QA a détecté et ce que vous avez vu ; ne déclarez pas « prêt » sans avoir regardé.

Sorties : sortie/<nom>.mp4 (livraison, 22 Mb/s) et sortie/<nom> - leger.mp4 (30 fps, pour envoi par message).

Quand quelque chose ne va pas

  • Scène pas prête (La scène n'est pas prête) : erreur de script (le message donne l'erreur de la page, immédiatement) ou, sans aucune erreur, chemin de <script>/média erroné (là, attend le délai d'attente de 90 s).
  • Rendu lent : voir references/armadilhas.md (filter blur, backdrop-filter, blend en plein écran, <video> dans la page).
  • Refaire seulement un passage : ucr rendu <dossier> --de 30 --jusque 38 (réutilise les morceaux du rendu précédent si les paramètres sont les mêmes).
  • Avant un long rendu : df -h (≈ 250 MB de morceaux et ≈ 145 MB de livraison pour 45 s à 1080×1920).

Références (lire à la demande)

  • references/moteur-api.md : toute l'API de M.* avec exemples
  • references/marque.md : marque.json champ par champ, formats et zones
  • references/audio.md : voix, respirations, piste, effets, mix, licences
  • references/recettes.md : photo, vidéo au milieu, écran réel, terminal, horizontal, variantes, changement de palette
  • references/armadilhas.md : ce qui a déjà cassé (mesuré), par thème

Skills associés