Que fait explainer-short (court explicatif vertical) ?
Créez un court explicatif vertical : présentateur dans la moitié inférieure, graphismes animés dans la moitié supérieure, grandes bulles de sous-titres au milieu. Une seule idée par séquence. Des jetons de thème contrôlent la couleur, la typographie, les coins arrondis et les animations, permettant au même script de prendre une apparence chaleureuse, monochrome, à haut contraste ou ludique.
Quand l'utiliser
- Un clip d'enseignement vertical de 8 à 30 secondes ou une démonstration produit
- Un pipeline HTML/Canvas réutilisable qui exporte en MP4
- Des thèmes visuels interchangeables sans réécrire le code des scènes
Disposition
+---------------------------+
| graphismes / cartes (1080) |
| |
|---------------------------| <- bulle de sous-titre à la jointure
| présentateur (960) |
| |
+---------------------------+
1080 x 1920
Système de thèmes
Les thèmes se trouvent dans template/themes/*.json (et sample/themes/ pour la démo).
Le thème actif est theme.json dans le dossier du projet.
bash template/scripts/use-theme.sh warm # ou mono | high-contrast | playful
# ou depuis un projet copié :
bash scripts/use-theme.sh mono
Jetons (variables CSS après loadTheme) :
| Jeton | Rôle |
|---|---|
--ink --mute | Texte |
--bg --bg-hi --bg-lo | Fond d'écran |
--surface --surface-2 | Cartes |
--accent --accent-2 --accent-3 | Accentuation |
--chip-bg --chip-fg | Bulle de sous-titre |
--radius-card --radius-chip --chip-size | Forme |
--headline-weight | Graisse du titre |
--font-sans --font-mono | Typographie (OFL woff2 dans fonts/) |
Préréglages : warm (par défaut), mono, high-contrast, playful.
Modifiez un fichier JSON, relancez use-theme.sh, rechargez. Aucune étape de build pour le thème lui-même.
Changement de police
- Placez un fichier woff2 sous licence ouverte dans
fonts/et conservez son fichier de licence à côté. - Définissez
fonts.sans/fonts.sans_file(et mono) dans le JSON du thème. - Pointez
@font-facedansindex.htmlvers le nouveau fichier si le nom de famille change. - Rendez à nouveau une image à mi-trame et confirmez.
Polices par défaut fournies : Inter + JetBrains Mono (SIL OFL). Les textes de licence sont livrés sous fonts/.
Démarrage rapide (démo de thème, sans prise de vue du présentateur)
npm install
node scripts/render_sample.mjs warm
node scripts/render_sample.mjs mono
# produit : sample/out/<preset>/<preset>.mp4 + images fixes de trames
Nécessite : Node 18+, Chrome ou Chromium système, ffmpeg.
Pipeline complet du projet (autonome)
- Copiez
template/dans un nouveau dossier de projet (ou travaillez danssample/). - Écrivez les scènes dans
main.jsqui appellentwindow.render(t)et utilisent les variables CSS du thème. - Optionnel : présenteur – déposez une prise, remplissez
src/edit.json, exécutezpython3 src/edit.py(nécessite numpy + soundfile), puispython3 src/captions.py. - Depuis la racine du skill (après
npm install) :
PRESET=warm bash template/build.sh
# ou, pour un projet copié :
SKILL_ROOT=/chemin/vers/explainer-short PRESET=mono bash build.sh
# ou appelez directement le moteur de rendu :
node scripts/render.mjs --dir chemin/vers/projet --preset warm --out chemin/vers/projet/out/video.mp4
- Si vous avez
out/voice.wav,python3 mix.pynormalise le volume vers -14 LUFS / -1 dBTP etbuild.shle multiplexe.
template/scripts/render.mjs est également copié à côté du modèle afin qu'un projet puisse conserver une copie locale.
Règles de conception
- Une seule idée. Un objet, une promesse, tenue avant la fin.
- Lisible à bout de bras. Grand caractère, contraste élevé, peu de mots à l'écran.
- Les bulles de sous-titres sont la voix. Gardez les indices courts ; figez brièvement sur le dernier mot.
- Thématisez, ne codez pas en dur. Les couleurs, les rayons et la taille des bulles proviennent des jetons.
- Valeur par défaut neutre. Warm est le défaut ; la personne choisit un préréglage.
Vérification avant livraison
Notez chaque axe de 0 à 3. Livrez uniquement si la moyenne est d'au moins 2,3. Un réviseur indépendant mesure le fichier principal.
| Axe | À vérifier |
|---|---|
| Figement | La dernière bulle se maintient ~0,3-0,5s ; pas de coupure en milieu de mot |
| Volume sonore | Environ -14 LUFS intégré (mesurer avec ffmpeg loudnorm) |
| Crête réelle | <= -1 dBTP |
| Couverture | La trame de fin ou le décalage de vignette est une carte titre claire |
| Thème | Jetons appliqués ; aucune couleur de marque codée en dur restante |
| Clarté | Un inconnu comprend le message sans audio |
Grille complète : references/review-rubric.md. Zones sécurisées : references/cover.md.
Fichiers
| Chemin | Rôle |
|---|---|
package.json | Déclare playwright-core |
template/ | Projet de démarrage (HTML, thème, polices, build.sh) |
template/themes/ | JSON des préréglages |
template/theme.js | loadTheme() -> variables CSS sur :root |
sample/ | Démo de thème autonome de 12s |
scripts/render.mjs | Rendu headless des trames + multiplexage ffmpeg |
scripts/render_sample.mjs | Wrapper pratique pour les préréglages d'exemple |
references/ | Structure, thèmes, grille de révision, couverture, finition |
docs/ | Aperçus des trames issues de exécutions vérifiées |
Liste de contrôle pour l'agent
-
npm installexécuté dans la racine du skill - Préréglage de thème choisi (ou warm par défaut)
-
theme.jsoncorrespond au préréglage - Les scènes utilisent des variables CSS, pas de couleurs de marque codées en dur
- L'exemple ou le build complet produit un MP4
- ffprobe confirme 1080x1920 et la durée attendue
- L'image à mi-trame semble cohérente avec le préréglage
- Volume sonore ~ -14 LUFS et crête réelle <= -1 dBTP en présence d'audio
- Moyenne de la grille de révision >= 2,3
- Aucun résidu de marque personnelle ou tierce dans le projet