CLI HyperFrames
Tout passe par npx hyperframes. Nécessite Node.js >= 22 et FFmpeg.
Workflow
- Scaffold —
npx hyperframes init my-video - Écrire — composer la composition HTML (voir la compétence
hyperframes) - Linter —
npx hyperframes lint - Inspection visuelle —
npx hyperframes inspect - Prévisualiser —
npx hyperframes preview - Rendre —
npx hyperframes render
Effectuez le lint 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 headless, parcourt la timeline et signale le texte qui dépasse des bulles/conteneurs ou du canevas.
Initialisation
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 : 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 à la main.
Linting
npx hyperframes lint # répertoire courant
npx hyperframes lint ./my-project # projet spécifique
npx hyperframes lint --verbose # résultats de niveau info
npx hyperframes lint --json # lisible par machine
Lint index.html et tous les fichiers dans compositions/. Signale les erreurs (à corriger impérativement), les avertissements (à corriger de préférence) 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-images
À utiliser après lint et validate, en particulier pour les compositions avec bulles de dialogue, cartes, légendes ou typographie serrée. Signale :
- Texte s'étendant à l'extérieur du conteneur visuel ou de la bulle le plus proche
- Texte tronqué par sa propre boîte de largeur/hauteur fixe
- Texte s'étendant à l'extérieur du canevas de la composition
- Enfants s'échappant des conteneurs de découpage
Les erreurs doivent être corrigées avant le rendu. Les avertissements sont signalés pour examen par l'agent ; ajoutez --strict pour échouer également sur les avertissements. Les problèmes statiques répétés sont réduits par défaut afin que la sortie JSON reste compacte pour les fenêtres de contexte 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 passe d'inspection visuelle.
Prévisualisation
npx hyperframes preview # sert le répertoire courant
npx hyperframes preview --port 4567 # port personnalisé (par défaut 3002)
Rechargement à chaud sur les modifications de fichiers. Ouvre le studio dans votre navigateur automatiquement.
Lorsque vous remettez un projet à l'utilisateur, utilisez l'URL du projet Studio, pas le chemin source index.html :
http://localhost:<port>/#project/<nom-du-projet>
Utilisez le port réel de la sortie de prévisualisation et le nom du répertoire du projet. Par exemple, après npx hyperframes preview --port 3017 dans codex-openai-video, signalez http://localhost:3017/#project/codex-openai-video.
Traitez index.html uniquement comme contexte de code source. Il est acceptable de le lier en tant que fichier d'implémentation, mais ne le qualifiez pas de projet ou de surface de prévisualisation.
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 # sortie identique octet par octet
| Option | Options | Défaut | Remarques |
|---|---|---|---|
--output | chemin | renders/nom_timestamp.mp4 | Chemin de sortie |
--fps | 24, 30, 60 | 30 | 60ips 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 les erreurs ET avertissements |
Recommandations de qualité : draft pendant l'itération, standard pour la révision, 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
Diagnostic
npx hyperframes doctor # vérifier l'environnement (Chrome, FFmpeg, Node, mémoire)
npx hyperframes browser # gérer Chrome fourni
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.
Autre
npx hyperframes compositions # lister les compositions dans le projet
npx hyperframes docs # ouvrir la documentation
npx hyperframes benchmark . # évaluer les performances de rendu