CLI HyperFrames
Tout s’exécute via npx hyperframes. Nécessite Node.js >= 22 et FFmpeg.
Flux de travail
- Échafauder —
npx hyperframes init my-video - Écrire — composer la composition HTML (voir la compétence
hyperframes) - Linter —
npx hyperframes lint - Prévisualiser —
npx hyperframes preview - Rendre —
npx hyperframes render
Lintez avant de prévisualiser — cela détecte les data-composition-id manquants, les pistes qui se chevauchent, les timelines non enregistrées.
Échafaudage
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 un fichier vidéo
npx hyperframes init my-video --audio track.mp3 # avec un 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 IA de codage. 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
Linte index.html et tous les fichiers dans compositions/. Signale les erreurs (à corriger obligatoirement), les avertissements (à corriger si possible) et les informations (avec --verbose).
Prévisualisation
npx hyperframes preview # servir le répertoire courant
npx hyperframes preview --port 4567 # port personnalisé (par défaut 3002)
Rechargement à chaud lors des modifications. Ouvre le studio automatiquement dans le navigateur.
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 | Choix possibles | Valeur par défaut | Notes |
|---|---|---|---|
--output | chemin | renders/nom_timestamp.mp4 | Chemin de sortie |
--fps | 24, 30, 60 | 30 | 60 ips double le temps |
--quality | draft, standard, high | standard | draft pour itérer |
--format | mp4, webm | mp4 | WebM supporte 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é GPU |
--strict | drapeau | désactivé | Échec sur erreur de lint |
--strict-all | drapeau | désactivé | Échec sur erreur ET avertissement |
Conseils de 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 (Text-to-Speech)
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 la performance de rendu