OneWave-AI/Crest

HyperFrames

HyperFrames est un framework de composition vidéo qui vous permet de créer des compositions cinématographiques en HTML/CSS/JS pur, de les prévisualiser en direct et de les rendre au format MP4 ou GIF. C'est comme Remotion, mais plus léger et natif au navigateur.

Quand utiliser cette compétence

Activez-la dès que l'utilisateur souhaite :

• Créer une vidéo, une animation ou un graphisme animé
• Réaliser une carte-titre, un tiers inférieur, une intro, une outro ou une transition de scène
• Générer une vidéo explicative animée, une démo ou une présentation de produit
• Ajouter des sous-titres, des légendes ou une voix off à une composition
• Convertir un site web, un article de blog, un podcast ou une conférence en vidéo
• Créer un visuel réactif à l'audio
• Rendre un logo animé ou une courte vidéo pour les réseaux sociaux

Si l'utilisateur dit « vidéo », « animation », « motion », « rendu », « MP4 » ou décrit quelque chose de temporel — cette compétence est la bonne.

La CLI

Tout passe par npx hyperframes :

Commande	Objectif
npx hyperframes init	Créer une nouvelle composition (Tailwind, vierge ou modèle)
npx hyperframes preview	Aperçu en direct dans le navigateur avec rechargement à chaud
npx hyperframes lint	Valider la composition par rapport au schéma
npx hyperframes inspect	Afficher le graphe de scène analysé pour le débogage
npx hyperframes render	Produire du MP4 / WebM / GIF
npx hyperframes doctor	Diagnostiquer les problèmes d'environnement (navigateur, ffmpeg)
npx hyperframes add <block>	Installer un bloc du registre (sous-titre, transition, etc.)

Démarrez chaque nouveau projet avec npx hyperframes init depuis le répertoire de travail choisi par l'utilisateur. Confirmez avec l'utilisateur où créer la structure avant d'exécuter.

Modèle mental de base

Une composition HyperFrames est un seul fichier HTML (ou un petit projet) qui déclare :

1. Durée — combien de temps dure la composition (data-duration ou config)
2. Calques — éléments empilés qui apparaissent/disparaissent au fil du temps
3. Timing — data-start, data-end, courbes d'easing et images clés par calque
4. Adaptateurs — utilisez votre bibliothèque d'animation préférée : GSAP, Anime.js, Web Animations API, animations CSS, Lottie, Three.js. HyperFrames reste en retrait et orchestre simplement le temps.

Le moteur de rendu joue la composition de manière déterministe — même entrée, même sortie à chaque fois. C'est ce qui la rend compatible avec les diffs et l'IA.

Workflow

1. Créer — npx hyperframes init et choisissez un modèle
2. Composer — éditez le HTML ; ajoutez des calques, définissez le timing, choisissez une bibliothèque d'animation. Gardez la composition bien ciblée : une scène par fichier, c'est très bien.
3. Prévisualiser — npx hyperframes preview pour le rechargement à chaud
4. Lint + inspecter — repérez les chevauchements de timing et les ressources manquantes tôt
5. Rendre — npx hyperframes render --format mp4 (ou gif, webm)

Compétences compagnes

Lorsque la demande de l'utilisateur correspond à un workflow plus spécifique, appuyez-vous sur la compétence correspondante — Claude Code les chargera automatiquement si pertinent :

• website-to-hyperframes — transformer une URL en vidéo (captures d'écran → scènes)
• remotion-to-hyperframes — porter un projet Remotion existant
• hyperframes-media — narration TTS (Kokoro), transcription Whisper, incrustations transparentes par suppression d'arrière-plan
• hyperframes-registry — installer des blocs de la communauté (tiers inférieurs, VFX, transitions, effets de texte) via npx hyperframes add
• Compétences adaptateur : gsap, animejs, waapi, css-animations, lottie, three, tailwind — motifs pour chaque bibliothèque d'animation dans HyperFrames

Valeurs par défaut qui simplifient la vie

• Privilégiez le modèle Tailwind (npx hyperframes init --tailwind) — la plupart des utilisateurs veulent des compositions stylisées et Tailwind rend cela rapide.
• Par défaut, utilisez GSAP pour les animations basées sur une timeline ; WAAPI pour les mouvements d'élément simples ; Lottie pour les animations JSON fournies par un designer.
• Rendu en 1920x1080 à 30 ips sauf demande contraire de l'utilisateur. Format vertical (1080x1920) pour TikTok / Reels / Shorts.
• Exécutez toujours npx hyperframes lint avant render — cela détecte 90 % des bugs qui ne sont pas visibles dans l'aperçu.

Un exemple minimal

<!doctype html>
<html data-duration="6000">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.tailwindcss.com" />
  </head>
  <body class="bg-black text-white font-sans">
    <div class="absolute inset-0 grid place-items-center"
         data-start="0" data-end="3000">
      <h1 class="text-7xl font-bold tracking-tight">Crest</h1>
    </div>
    <div class="absolute inset-0 grid place-items-center"
         data-start="3000" data-end="6000">
      <p class="text-3xl text-emerald-400">Conçu pour Claude Code</p>
    </div>
  </body>
</html>

Voilà une séquence de titre de six secondes en deux scènes. npx hyperframes preview pour la voir, npx hyperframes render pour générer le MP4.

Ce qu'il faut demander à l'utilisateur au début

Avant de créer la structure, obtenez les réponses à :

1. À quoi sert la vidéo ? (carte-titre, démo, explicative, courte pour les réseaux)
2. Quelle durée ? (moins de 15 s pour les réseaux, 30-60 s pour un produit, 1-3 min pour les vidéos explicatives)
3. Format d'image ? (16:9 ordinateur, 9:16 réseaux sociaux, 1:1 fil d'actualité)
4. Avec voix off ou silencieuse ? (si voix off, utilisez hyperframes-media pour générer la synthèse vocale)
5. Éléments de marque ? (logo, couleurs, polices — à extraire d'une charte graphique si elle existe)

Une fois que vous les avez, créez la structure et commencez à composer.