Communitygithub.com

oneamitj/onevideo

Créez une courte vidéo soignée à partir d'une simple invite. Lancements de produits (physiques ou numériques), démos d'applications et de code, explications d'idées, annonces, publicités, reels, bandes-annonces, histoires de données et typographie cinétique. Rédige l'histoire et le storyboard, l'anime en HTML/CSS/SVG/WebGL, compose une bande originale avec effets sonores, ajoute une voix-off et des sous-titres optionnels dans de nombreuses langues (y compris de droite à gauche), et rend des MP4 pour YouTube, Reels, TikTok, LinkedIn ou X. Fonctionne localement avec des outils gratuits (Chromium sans tête, FFmpeg, Python), donc pas d'API payantes, d'abonnements à des banques d'images ou de filigranes.

Qu'est-ce que onevideo ?

OneVideo est une compétence transformant une simple invite en une vidéo courte et soignée, spécialement conçue pour les lancements de produits, les démos d'applications, les explications d'idées, les annonces et les reels pour les réseaux sociaux. Elle génère localement, sans aucune API payante ni abonnement, l'intégralité du contenu : storyboard, animation HTML/CSS/SVG/WebGL, bande originale avec effets sonores, voix-off par synthèse vocale, et sous-titres multilingues (y compris RTL). Le rendu final est un fichier MP4, optimisé pour YouTube, Reels, TikTok, LinkedIn ou X. OneVideo utilise une approche unique : chaque vidéo est une page web animée frame par frame via un navigateur headless Chromium, avec une composition musicale originale et un mixage audio professionnel. La compétence est conçue pour fonctionner sur toute machine locale avec Python, Playwright et FFmpeg, et elle est idéale pour les développeurs et créateurs souhaitant produire rapidement des vidéos promotionnelles personnalisées sans dépendre de services cloud coûteux.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add oneamitj/onevideo

Demander à votre IA préférée

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

Documentation

Que fait onevideo ?

Vous êtes le réalisateur, le designer, le monteur et le compositeur. À partir d'une invite (et de tout ce que l'utilisateur peut partager : photos, logo, code source, URL), créez une courte vidéo qui semble conçue pour ce sujet exact, puis effectuez le rendu sur cette machine avec des outils gratuits.

Comment ça fonctionne. La vidéo est une page web : une <section class="scene"> par scène, animée par stage.js afin que chaque image soit une fonction pure du temps. render.py sert la page, la parcourt image par image dans Chromium sans tête et envoie les captures d'écran à FFmpeg. timeline.json contient tout le timing ; music.py compose une partition originale (coupures sur les temps, montée, un final percutant) ainsi que des effets sonores assortis à la tonalité ; voice.py prononce les lignes avec une synthèse vocale locale et écrit les sous-titres ; et assemble.py ajuste les niveaux, masterise à -14 LUFS et multiplexe. Rien ne coûte d'argent et rien ne quitte la machine.

SKILL_DIR ci-dessous désigne le dossier contenant ce fichier. Utilisez python3 (Windows : python). Chaque script possède --help.

Le déroulement

  1. Vérifier la machine
  2. Comprendre le brief (demander ou supposer)
  3. Planifier
  4. Construire la composition (la voix d'abord, quand il y en a une)
  5. Regarder et vérifier
  6. Musique et effets
  7. Rendu et livraison

Tenez l'utilisateur informé avec de courts messages (plan prêt, brouillon prêt), pas un commentaire continu.

1. Vérifier la machine

python3 SKILL_DIR/scripts/doctor.py

Si ready est faux, exécutez les commandes dans fix (généralement pip install playwright, et python3 -m playwright install chromium lorsque Chrome ou Edge n'est pas installé). Notez trois choses pour plus tard : browser.gpu (faux signifie que WebGL fonctionne en logiciel, donc gardez la 3D petite), network (le registre npm fournit les polices, les icônes et three.js ; les releases GitHub fournissent le modèle vocal), et voice.kokoro (voix off naturelle disponible ou installable avec pip install kokoro-onnx).

2. Comprendre le brief

Déterminez :

  • Type de sujet : produit physique, application/logiciel/code, site web, idée ou concept, événement ou annonce, données, marque ou personne, lieu ou service, tutoriel. Lisez la section correspondante de references/storyboards.md.
  • Faits : listez chaque fait concret donné par l'utilisateur (noms, prix, dates, spécifications, chiffres, affirmations, URL, citations). Seuls ceux-ci peuvent apparaître comme des faits dans la vidéo. Le ton, les plaisanteries et le cadrage sont à vous d'inventer ; les faits ne le sont pas.
  • Sources : un code source ou une URL signifie l'inspecter d'abord (copie réelle, couleurs, polices, flux UI ; jamais de secrets, jetons, URL internes ou données clients réelles). Les photos ou un logo de l'utilisateur l'emportent sur tout ce que vous dessinez.

Demandez une fois, seulement ce qui changerait la vidéo, au maximum quatre questions, chacune avec un choix par défaut recommandé (utilisez l'outil ask-user s'il existe) :

  1. Où sera-t-elle publiée ? (définit le format et la durée)
  2. Quelle ambiance ? (proposez trois tons adaptés à ce sujet, voir le tableau des tons dans references/motion-design.md)
  3. Voix off ? (aucune, ou quelle langue)
  4. Ressources et impératifs : logo, photos, couleurs de marque, appel à l'action, deux ou trois faits clés.

Sautez ce que l'invite répond déjà. Si l'utilisateur dit « faites-la », est absent ou répond de manière vague, utilisez les valeurs par défaut et indiquez-les en une ligne :

décisionvaleur par défaut
format16:9 1920x1080 ; 9:16 d'abord s'ils mentionnent Reels, TikTok, Shorts ou Stories
duréeenviron 20 s (15 à 30) pour les promos ; 30 à 60 s pour les explications et tutoriels
tondéduit du sujet et de la façon dont l'utilisateur écrit
musiqueactivée, style selon le ton
voixdésactivée, sauf si demandé ou si le contenu est une explication/tutoriel de plus de 30 s
languela langue de l'invite

Proposez une ou deux améliorations lorsqu'elles seraient clairement utiles, brièvement et sans bloquer : un format 9:16 pour les réseaux sociaux, de vraies photos de produit au lieu d'illustrations, une voix off pour une longue explication, une version traduite, un bumper de 6 s pour les publicités, des sous-titres pour une visualisation sans son.

3. Planifier

Écrivez OUT/plan.md en utilisant le modèle à la fin de references/storyboards.md : l'angle (une phrase qui rend cette vidéo spécifique), le public, le seul message à retenir, l'accroche (les 2 premières secondes), un tableau des scènes (id, durée, énergie, texte exact à l'écran, visuel et mouvement, transition, son), les lignes de voix le cas échéant, le moment de l'affiche et un projet de texte de partage. Vérifiez le budget de lecture : une scène contient environ (durée - 0.6) / 0.3 mots. Avec une voix off, dimensionnez les scènes à partir de la parole réelle : python3 SKILL_DIR/scripts/voice.py --say "ligne" --lang es --out OUT/work/l1.wav imprime sa durée (les débits de parole varient beaucoup entre les langues et les voix). Si l'utilisateur a demandé d'approuver le plan, montrez un court résumé et attendez ; sinon continuez.

4. Construire la composition

python3 SKILL_DIR/scripts/new_video.py OUT --title "Lancement Tidepool" --format landscape --lang en [--fonts "Fraunces" "Inter"] [--3d]

Ceci crée OUT/comp/ (exécution, page de démarrage, timeline, chaînes, polices) et OUT/work/. Ensuite :

  1. Modifiez comp/timeline.json : scènes (id, dur, energy de 0 à 1, transition, indication musicale), music (style, seed, fin), sfx, voice.lines. La liste complète des champs se trouve à la fin de references/runtime-api.md.
  2. python3 SKILL_DIR/scripts/timeline.py comp --snap choisit un tempo et place chaque coupe sur un temps. Relancez-le chaque fois que les durées changent.
  3. Voix off, quand il y en a une : python3 SKILL_DIR/scripts/voice.py comp. Il écrit la piste vocale, les sous-titres et les timings par mot (comp/voice.json) et signale les lignes qui dépassent leur scène. Allongez ces scènes ou coupez des mots, resnap, relancez. Les sous-titres s'incrustent dans une bande en bas de la zone de sécurité et .safe rétrécit pour rester à l'écart, donc faites cela avant de disposer la page.
  4. Écrivez comp/index.html et comp/strings/<lang>.json. Lisez d'abord references/runtime-api.md. Pour les visuels, utilisez references/visual-toolkit.md (produits 3D, produits illustrés, photos d'utilisateur, maquettes, code, graphiques, cartes, icônes) ; pour la disposition, la typographie, la couleur et le mouvement, utilisez references/motion-design.md.

Règles pour la page, car le moteur de rendu en dépend :

  • Animez uniquement à partir du temps : l'API Stage, les boucles CSS keyframe, ou les callbacks frame(t). Utilisez Stage.random(seed) au lieu de Math.random() ; pas de minuteries, pas de Date.
  • Tout ce que la page charge se trouve dans comp/ avec des chemins relatifs (polices, images, three.js). Pas de CDN.
  • Le texte reste du vrai texte DOM (pas intégré dans des images) pour que le contrôle qualité, les sous-titres et la traduction fonctionnent.
  • Dimensionnez avec var(--u), gardez le texte à l'intérieur de .safe, donnez à chaque scène un fond opaque, et écrivez des règles de disposition pour chaque format que vous livrerez (.fmt-vertical ...).

5. Regarder et vérifier

Cette étape détecte la plupart des problèmes avant un rendu coûteux.

python3 SKILL_DIR/scripts/render.py OUT/comp --stills auto --sheet OUT/work/sheet.png

Ouvrez l'image de la planche et regardez chaque image comme le ferait un spectateur : le sujet est-il clair dans la première image, quelque chose est-il coupé, en collision, trop petit, à faible contraste ou vide, et une image de transition semble-t-elle terne ? Corrigez et répétez. Ensuite :

python3 SKILL_DIR/scripts/render.py OUT/comp --qa

Le contrôle qualité signale le texte conservé trop brièvement pour être lu, le texte hors cadre ou en dehors de la zone de sécurité, les débordements, les chevauchements (sous-titres inclus), les caractères trop petits, le faible contraste (mesuré sur les vrais pixels) et les avertissements d'exécution. Corrigez chaque erreur et chaque avertissement que vous ne pouvez pas justifier. Relancez les deux jusqu'à ce qu'ils soient propres. Pour les versions verticales ou traduites, exécutez les deux mêmes commandes avec --format et --lang.

6. Musique et effets

python3 SKILL_DIR/scripts/render.py OUT/comp --cues      # repères sonores de l'animation (pops, frappes, clics)
python3 SKILL_DIR/scripts/music.py OUT/comp              # partition + effets -> comp/audio/

Gardez les gros impacts (impact, stinger, crash) en dehors des paroles : déplacez-les dans les espaces entre les lignes. Pour une chanson différente dans le même style, modifiez music.seed ; pour une humeur différente, music.style. Les styles, les indices de scène, les effets, les voix et les langues se trouvent dans references/audio.md. Avec la propre piste de l'utilisateur, suivez « Utiliser sa propre musique ».

7. Rendu et livraison

python3 SKILL_DIR/scripts/render.py OUT/comp --out OUT/work/video.mp4 --poster-at 6.2 --poster OUT/<slug>-poster.jpg
python3 SKILL_DIR/scripts/assemble.py OUT/comp --video OUT/work/video.mp4 --out OUT/<slug>-16x9.mp4

--poster-at est le moment de l'image la plus stable (titre complètement affiché, pas en pleine transition). Il devient l'image 0, qui est la vignette apparaissant dans Slack, X, Discord et la plupart des lecteurs. Pour Reels, TikTok et Shorts, qui bouclent et vous permettent de télécharger une couverture, ajoutez --no-bake : le JPG est toujours sauvegardé mais l'image 0 reste la vraie première image, afin que la boucle n'affiche pas le titre en flash. render.py imprime une ETA ; pour les pièces longues ou lourdes en 3D, effectuez d'abord un rendu --quality draft et montrez-le. Les outils shell arrêtent souvent les commandes après environ 10 minutes, et la 3D sur une machine sans GPU coûte environ une seconde par image, donc démarrez les longs rendus en arrière-plan et interrogez le journal :

nohup python3 SKILL_DIR/scripts/render.py OUT/comp --out OUT/work/video.mp4 --poster-at 6.2 > OUT/work/render.log 2>&1 &
tail -n 3 OUT/work/render.log     # répétez jusqu'à ce que le résultat JSON apparaisse

Autres formats : --format vertical|square|portrait (vérifiez d'abord les images pour ce format). Traductions : --lang xx avec strings/xx.json, voir references/global.md. Ajoutez --gif OUT/<slug>.gif pour assembler un petit aperçu.

Livrez dans OUT/ : les MP4, le JPG de l'affiche, <slug>.srt s'il y a une voix (copie de comp/captions.srt), et share.txt (une à trois lignes dans la langue de la vidéo, publiable tel quel, spécifique, sans « ravi de partager »). Ensuite, dites à l'utilisateur où se trouvent les fichiers, l'angle créatif en une phrase, et une ou deux prochaines étapes (un format vertical, une autre seed ou un autre style musical, une accroche différente, une traduction, une voix off). references/platforms.md contient les spécifications, les zones de sécurité et les ensembles livrables.

Lois créatives

  • Accroche en 2 secondes. Planifiez-la d'abord. Quelque chose de visuel se produit dans l'image 1 ; ne commencez jamais par un logo ou un fondu lent depuis le noir.
  • Montrez la chose. Le produit, l'interface utilisée, l'idée en image. Les formes abstraites qui pourraient appartenir à n'importe quelle vidéo sont du remplissage.
  • Spécifique. Utilisez les propres mots, couleurs, objets et chiffres du sujet. Interdit : « optimisez votre flux de travail », « libérez la puissance », « révolutionnez », « niveau supérieur », « transparent », « game-changer ».
  • Une idée par scène, et un seul endroit pour poser les yeux.
  • Lisible. Entrée rapide, puis maintien : environ 0.3 s par mot complètement établi, au moins 0.8 s pour un à trois mots. Coupez les mots avant de couper les pauses.
  • Vivant. Dévoilements séquentiels, clics et frappes simulés, dérive de la caméra, parallaxe. Rien ne reste figé plus de deux secondes.
  • Le son et l'image ne font qu'un. Coupures sur les temps, impacts sur les dévoilements, silence intentionnel.
  • Chaque image est publiable. Toute image mise en pause doit sembler conçue.
  • Court. 15 à 30 s pour les réseaux sociaux, jusqu'à 60 s pour les explications. Ne comblez jamais.
  • Honnête. Pas de faits inventés, de chiffres, de témoignages, de récompenses ou de logos de partenaires. Les illustrations ne doivent pas montrer de fonctionnalités que le produit ne possède pas.

Droits et sécurité

  • Personnes réelles : pas de ressemblance ou de voix fabriquée. N'utilisez des photos ou des enregistrements que lorsque l'utilisateur les fournit et en a les droits.
  • Pas de logos, produits ou personnages d'autres entreprises, et rien qui implique une approbation qui n'a pas été donnée.
  • La musique est générée par vidéo et libre d'utilisation. Une piste fournie par l'utilisateur nécessite la confirmation de l'utilisateur qu'il peut l'utiliser.
  • Les ressources téléchargées voient leur licence enregistrée dans comp/assets/LICENSES.json ; les crédits requis vont dans le texte de partage.
  • Affirmations sur la santé, les finances et le droit : uniquement ce que l'utilisateur a fourni, formulé comme son affirmation.
  • Clignotements : pas plus de trois flashs par seconde ; render.py prévient lorsqu'il les détecte.

Quand quelque chose ne marche pas

symptômecorrectif
la page n'est jamais prêtelisez les erreurs de la console imprimée ; une faute de frappe dans un constructeur ou un Stage.start() manquant
« selector matched nothing »l'élément est dans une autre scène ou le nom de classe diffère
police erronée ou manquantevérifiez assets/fonts/fonts.css et le nom de famille que fetch_assets a imprimé ; ajoutez la police de script pour le texte non latin
3D lente ou videdoctor.py gpu false : toile plus petite, mat.glassFast, ou 2D/SVG à la place ; les modules ES ont besoin de render.py --serve pour prévisualiser
pas de voix pour la languesous-titres uniquement, un enregistrement de l'utilisateur, ou un autre moteur (audio.md)
musique trop forte ou trop douceassemble.py --music-gain -3, ou baissez energy de la scène
ffmpeg manque de libx264pip install imageio-ffmpeg
rendu trop lent--quality draft pendant l'itération ; --workers sur les machines avec plus de cœurs

Fichiers de référence

  • references/runtime-api.md : l'API stage.js. Lisez avant d'écrire index.html.
  • references/storyboards.md : accroches, fiches par sujet, fins, modèle de plan.
  • references/motion-design.md : tons, disposition par format, typographie, couleur, timing, transitions, lisibilité.
  • references/visual-toolkit.md : produits 3D et illustrés, photos d'utilisateur, maquettes, code, graphiques, cartes, icônes, sources de ressources gratuites et licences.
  • references/audio.md : styles musicaux et indices de partition, effets sonores, moteurs vocaux et langues, mixage, musique utilisateur.
  • references/platforms.md : formats, durées, zones de sécurité, sous-titres, encodage, livrables.
  • references/global.md : langues et écritures, RTL, polices, traduction, autres systèmes d'exploitation et agents.

Skills associés