Sma1lboy/rove

HyperFrames CLI

Tout s'exécute via npx hyperframes sauf si les instructions du projet spécifient un wrapper local. Suivez exactement le wrapper local. Nécessite Node.js >= 22 et FFmpeg.

Workflow

1. Scaffold — npx hyperframes init my-video (ou capture depuis une URL)
2. Écrire — composer l'HTML de la composition (voir ../core)
3. Lint — npx hyperframes lint
4. Valider — npx hyperframes validate (erreurs d'exécution + contraste)
5. Inspection visuelle — npx hyperframes inspect
6. Aperçu — npx hyperframes preview ouvre Studio, l'éditeur de timeline où l'utilisateur peut tout modifier manuellement (pas seulement regarder). Vérifier là-bas, puis demander avant de lancer le rendu.
7. Rendu — choisissez la variante :
   • Itération : npx hyperframes render --quality draft
   • Livraison : npx hyperframes render --quality high --output out.mp4
   • CI / reproductibilité multi-hôtes : npx hyperframes render --docker --strict --output out.mp4
   • Cloud (long / volumineux) : npx hyperframes lambda render ./my-project --width 1920 --height 1080 --wait (voir Lambda ci-dessous)

Exécutez lint, validate, inspect avant l'aperçu. lint détecte les data-composition-id manquants, les pistes qui se chevauchent et les timelines non enregistrées. validate charge la composition dans un Chrome sans tête et signale les erreurs console d'exécution ainsi que les problèmes de contraste WCAG. inspect parcourt la timeline et signale le texte qui déborde des bulles/conteneurs ou du canevas — et, lorsqu'un fichier *.motion.json est présent, vérifie l'intention de mouvement (déclenchements d'entrée pendant le parcours, ordre de décalage, dans le cadre, vivacité) par rapport à cette même timeline parcourue.

Pour les travaux axés sur l'animation, privilégiez une itération basée sur des instantanés (snapshot) et un fichier *.motion.json — voir references/lint-validate-inspect.md pour la discipline et les spécifications de vérification des mouvements.

Conventions pour l'Agent

Règles transversales qui s'appliquent à chaque commande :

• --json est disponible sur toutes les commandes sauf render, preview et play. Utilisez-le pour toute invocation par un agent / CI des commandes prises en charge ; la sortie inclut une enveloppe _meta (version CLI, dernière version disponible, conseil de mise à jour). render signale l'état via stdout + code de sortie uniquement — vérifiez le succès avec la vérification post-rendu ci-dessous ; preview/play sont des serveurs, pas de JSON.
• doctor --json se termine toujours par 0, même lorsque l'environnement est défectueux. Vérifiez le champ ok du payload : npx hyperframes doctor --json | jq -e '.ok' > /dev/null. Cela protège les pipelines des changements de version CLI.
• Le mode non-TTY est détecté automatiquement. Lorsque stdout n'est pas un TTY (CI, agents, sortie redirigée), la CLI bascule automatiquement en mode non interactif ; init nécessite alors --example. Passez --non-interactive pour forcer ce mode même sur un TTY.
• CI gating sur le rendu : --strict échoue sur les erreurs de lint, --strict-all échoue aussi sur les avertissements, --strict-variables échoue sur les clés --variables non déclarées.
• Les chemins dans --json sont expurgés — $HOME devient le littéral $HOME afin que la sortie puisse être collée en toute sécurité dans les rapports de bugs et les contextes d'agent.
• Le rendu est soumis à l'approbation de l'utilisateur. Ne lancez jamais le rendu automatiquement une fois les vérifications passées. Faites une pause au niveau preview, dites à l'utilisateur que la vidéo est éditable dans Studio, et ne rendez qu'après son approbation.
• Vérification post-rendu. Après que render a renvoyé le code 0, vérifiez que le fichier de sortie existe et a une taille plausible avant de signaler le succès : [ -s "$OUTPUT" ] || echo "render produced no output". La CLI imprime ◇ <path> en cas de succès ; pour les rendus longs, vérifiez également la durée avec ffprobe -i "$OUTPUT" -show_format -v error.

Aiguillage

Pour…	Lire
Créer un projet (init, capture, skills)	references/init-and-scaffold.md
Vérifier l'exactitude (lint, validate, inspect, snapshot)	references/lint-validate-inspect.md
Prévisualiser ou rendre (preview, play, render, publish)	references/preview-render.md
Diagnostiquer l'environnement (doctor, browser)	references/doctor-browser.md
Rendu cloud sur AWS Lambda (lambda deploy / sites / render / progress / destroy / policies)	references/lambda.md
Tout le reste (info, upgrade, compositions, docs, benchmark, telemetry, prétraitement d'actifs)	references/upgrade-info-misc.md

Points de Transfert

• Projets Tailwind (init --tailwind) → voir ../core/references/tailwind.md avant de modifier les classes ou les tokens de thème.
• Blocs/composants du registre (hyperframes add, hyperframes catalog) → voir ../registry pour les chemins d'installation, le câblage des sous-compositions et la fusion d'extraits.
• Rendus paramétrés (--variables) → déclarés via data-composition-variables sur <html> ; voir ../core/references/variables-and-media.md pour le schéma complet.

Lambda (Rendu Cloud)

hyperframes lambda déploie le rendu distribué sur AWS Lambda et pilote les rendus depuis votre ordinateur ou votre CI. Le processus complet se fait en trois commandes :

npx hyperframes lambda deploy                                             # provisionner la pile SAM (Lambda + Step Functions + S3)
npx hyperframes lambda render ./my-project --width 1920 --height 1080 --wait
npx hyperframes lambda destroy                                            # démanteler (le bucket S3 est conservé)

Utilisez Lambda lorsqu'un rendu est trop long / trop volumineux pour un seul hôte (vidéos de plusieurs minutes, 4K, lots parallèles importants) et que vous avez configuré des identifiants AWS. Pour la boucle de développement locale, restez sur le render local.

Voir references/lambda.md pour les prérequis, les 6 sous-commandes (deploy, sites create, render, progress, destroy, policies), la validation des politiques IAM, les fichiers d'état, et les règles de coût/nettoyage.

Seuil de Validation Minimum

Vérifications statiques

npx hyperframes lint
npx hyperframes validate

Ajoutez inspect pour les travaux sensibles à la mise en page et render --strict en CI pour échouer sur les erreurs de lint.

Test visuel rapide — requis lorsque le projet utilise des sous-compositions

lint / validate / inspect évaluent chaque composition isolément. Ils ne chargent jamais index.html et ne montent pas les sous-compositions via data-composition-src, ils ne peuvent donc pas détecter les échecs de montage entre fichiers (voir ../core/references/sub-compositions.md, « Pièges courants »). Le seul moyen de les détecter est de charger index.html et de parcourir la timeline.

Utilisez hyperframes snapshot — il charge le projet de la même manière que render (exerçant donc le même chemin de montage) mais ne capture que les instants demandés, ce qui prend quelques secondes au lieu d'un rendu complet :

# Capturer une image au milieu de chaque sous-composition.
# Milieux = data-start + data-duration/2 pour chaque slot hôte dans index.html.
npx hyperframes snapshot --at <t1>,<t2>,<t3>,...

# Ou, si vous n'avez pas besoin de ciblage par scène, un échantillon régulièrement espacé :
npx hyperframes snapshot --frames 9

La sortie est placée dans snapshots/frame-NN-at-Xs.png. Examinez chaque image par rapport au plan de scène.

Signaux d'alarme par image (chacun correspond à un mode de défaillance spécifique que les vérifications statiques ne détectent pas) :

Ce que vous voyez	Cause racine
Le texte apparaît tout petit + sans style dans le coin supérieur gauche	Bloc <style> laissé dans <head> en dehors de <template> (Piège 1) — aucun CSS n'a atteint le DOM vivant
Les éléments SVG/icônes sont agrandis à la taille du canevas	Même chose — aucune contrainte de largeur/hauteur appliquée
L'élément principal de la scène est complètement absent ; seul l'arrière-plan + filigrane sont visibles	Host-id ≠ template id (Piège 2) — la timeline n'a jamais été exécutée, image capturée à l'état initial
La commande snapshot enregistre Sub-composition timelines not registered after 45000ms	Piège 2 — confirmation directe

snapshots/ peut être supprimé après examen ; le rendu final destiné à l'utilisateur est une passe séparée avec npx hyperframes render.