HyperFrames CLI
Tout s'exécute via npx hyperframes. Nécessite Node.js >= 22 et FFmpeg.
Workflow
- Scaffolding —
npx hyperframes init my-video - Écrire — créer une composition HTML (voir la compétence
hyperframes) - Linter —
npx hyperframes lint - Inspecter visuellement —
npx hyperframes inspect - Prévisualiser —
npx hyperframes preview - Rendre —
npx hyperframes render
Effectuez le linting et l'inspection avant la prévisualisation. lint détecte les data-composition-id manquants, les pistes qui se chevauchent et les timelines non enregistrées. inspect ouvre la composition rendue dans Chrome sans tête, parcourt la timeline et signale tout texte débordant des bulles/conteneurs ou du cadre.
Scaffolding
npx hyperframes init my-video # assistant interactif
npx hyperframes init my-video --example warm-grain # choisir un exemple
npx hyperframes init my-video --video clip.mp4 # avec fichier vidéo
npx hyperframes init my-video --audio track.mp3 # avec fichier audio
npx hyperframes init my-video --non-interactive # ignorer les invites (CI/agents)
Modèles disponibles : blank, warm-grain, play-mode, swiss-grid, vignelli, decision-tree, kinetic-type, product-promo, nyt-graph.
init crée la structure de fichiers appropriée, copie les médias, transcrit l'audio avec Whisper et installe les compétences de codage IA. Utilisez-le plutôt que de créer les fichiers manuellement.
Linting
npx hyperframes lint # répertoire actuel
npx hyperframes lint ./my-project # projet spécifique
npx hyperframes lint --verbose # résultats détaillés
npx hyperframes lint --json # lisible par machine
Analyse index.html et tous les fichiers dans compositions/. Signale les erreurs (à corriger impérativement), les avertissements (à corriger si possible) et les informations (avec --verbose).
Inspection visuelle
npx hyperframes inspect # inspecte la mise en page rendue sur la timeline
npx hyperframes inspect ./my-project # projet spécifique
npx hyperframes inspect --json # résultats lisibles par agent
npx hyperframes inspect --samples 15 # balayage plus dense de la timeline
npx hyperframes inspect --at 1.5,4,7.25 # horodatages explicites des héros
À utiliser après lint et validate, surtout pour les compositions avec bulles de parole, cartes, légendes ou typographie serrée. Il signale :
- Le texte qui s'étend en dehors du conteneur visuel ou de la bulle le plus proche
- Le texte tronqué par sa propre boîte à largeur/hauteur fixe
- Le texte qui dépasse du cadre de la composition
- Les éléments enfants qui s'échappent des conteneurs de clipping
Les erreurs doivent être corrigées avant le rendu. Les avertissements sont remontés pour examen par l'agent ; ajoutez --strict pour échouer également sur les avertissements. Les problèmes statiques répétés sont regroupés par défaut afin que la sortie JSON reste compacte pour les fenêtres de contexte des LLM. Si le débordement est intentionnel pour une animation d'entrée/sortie, marquez l'élément ou son ancêtre avec data-layout-allow-overflow. Si un élément décoratif ne doit jamais être audité, marquez-le avec data-layout-ignore.
npx hyperframes layout reste disponible comme alias de compatibilité pour la même inspection visuelle.
Prévisualisation
npx hyperframes preview # sert le répertoire actuel
npx hyperframes preview --port 4567 # port personnalisé (par défaut 3002)
Recharge à chaud lors des modifications de fichiers. Ouvre le studio dans votre navigateur automatiquement.
Rendu
npx hyperframes render # MP4 standard
npx hyperframes render --output final.mp4 # sortie nommée
npx hyperframes render --quality draft # itération rapide
npx hyperframes render --fps 60 --quality high # livraison finale
npx hyperframes render --format webm # WebM transparent
npx hyperframes render --docker # identique octet par octet
| Option | Options | Défaut | Notes |
|---|---|---|---|
--output | chemin | renders/nom_horodatage.mp4 | Chemin de sortie |
--fps | 24, 30, 60 | 30 | 60 ips double le temps de rendu |
--quality | draft, standard, high | standard | draft pour itérer |
--format | mp4, webm | mp4 | WebM prend en charge la transparence |
--workers | 1-8 ou auto | auto | Chacun lance Chrome |
--docker | drapeau | désactivé | Sortie reproductible |
--gpu | drapeau | désactivé | Encodage accéléré par GPU |
--strict | drapeau | désactivé | Échouer sur les erreurs de lint |
--strict-all | drapeau | désactivé | Échouer sur erreurs ET avertissements |
Conseils sur la qualité : draft pendant l'itération, standard pour la relecture, high pour la livraison finale.
Transcription
npx hyperframes transcribe audio.mp3
npx hyperframes transcribe video.mp4 --model medium.en --language en
npx hyperframes transcribe subtitles.srt # importer existant
npx hyperframes transcribe subtitles.vtt
npx hyperframes transcribe openai-response.json
Synthèse vocale
npx hyperframes tts "Texte ici" --voice af_nova --output narration.wav
npx hyperframes tts script.txt --voice bf_emma
npx hyperframes tts --list # afficher toutes les voix
Dépannage
npx hyperframes doctor # vérifier l'environnement (Chrome, FFmpeg, Node, mémoire)
npx hyperframes browser # gérer le Chrome intégré
npx hyperframes info # version et détails de l'environnement
npx hyperframes upgrade # vérifier les mises à jour
Exécutez doctor en premier si le rendu échoue. Problèmes courants : FFmpeg manquant, Chrome manquant, mémoire insuffisante.
Autres
npx hyperframes compositions # lister les compositions du projet
npx hyperframes docs # ouvrir la documentation
npx hyperframes benchmark . # évaluer les performances de rendu