Un modello linguistico non sa "girare" un video, ma sa scrivere molto bene HTML, CSS e JavaScript. HyperFrames, pubblicato da HeyGen con licenza Apache-2.0, sfrutta proprio questo: è un framework che trasforma una pagina HTML animata in un video MP4 deterministico. Lo slogan è "Write HTML. Render video. Built for agents."
Come funziona
- Una composizione è un file HTML. Gli elementi hanno attributi che ne fissano tempi e tracce:
data-start,data-duration,data-track-index; la radice dichiara la risoluzione condata-widthedata-height. - Le animazioni si scrivono con GSAP, CSS, Lottie, Three.js, Anime.js o Web Animations API.
- L'audio è un normale
<audio>con gli stessi attributi di tempo piùdata-volume. - Il renderer apre la pagina in Chrome headless, si posiziona su ogni singolo fotogramma e lo codifica con FFmpeg: lo stesso input produce sempre lo stesso video.
- Non c'è un passo di build: un
index.htmlsi riproduce così com'è.
Il progetto si dichiara ispirato a Remotion; la differenza principale è che usa HTML puro invece di React.
Requisiti
- Node.js 22 o superiore
- FFmpeg (e ffprobe) sul PATH
- Chrome: usa quello di sistema o ne scarica uno con
npx hyperframes browser ensure
Per controllare l'ambiente: npx hyperframes doctor.
Da riga di comando
npx hyperframes init my-video
cd my-video
npx hyperframes preview # anteprima nel browser con ricaricamento automatico
npx hyperframes render # rendering in MP4Con init --resolution si sceglie il formato: landscape (1920×1080), portrait (1080×1920, per reel e storie), square (1080×1080) o landscape-4k. Altri comandi utili:
| Comando | A cosa serve |
|---|---|
npx hyperframes check | Controlli di layout, contrasto e qualità in un colpo; --strict fa fallire anche sugli avvisi |
npx hyperframes add <nome> | Aggiunge un blocco o una transizione dal catalogo |
npx hyperframes capture <url> | Cattura un sito come materiale di partenza |
npx hyperframes transcribe audio.mp3 | Trascrive un audio (per sottotitoli) |
npx hyperframes tts "testo" | Sintesi vocale |
Oltre all'MP4 la documentazione cita altri formati di uscita, tra cui WebM e MOV con trasparenza e GIF.
Con Claude Code
La strada consigliata è il plugin:
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesPoi si avvia una nuova sessione (o si usa /reload-plugins) e si chiede il video:
Using /hyperframes:hyperframes, make a 10-second product intro for https://example.com.In alternativa si installano solo le skill nel progetto con npx skills add heygen-com/hyperframes (scegliendo le "Core Skills"); in questo caso il comando è /hyperframes. Tra le skill ci sono anche /hyperframes-cli, /media-use, /slideshow, /figma e un convertitore da Remotion. Il supporto è dichiarato anche per Codex, Cursor, Gemini CLI e Copilot.
Cosa resta in locale e cosa no
Composizione, anteprima e rendering sono locali e gratuiti, così come trascrizione e sintesi vocale di base. Le funzioni che usano i modelli di HeyGen (avatar, voci, immagini e musica generate, condivisione) richiedono un account HeyGen e, per alcune, il piano Pro.
Usi pratici
- Video di presentazione di un prodotto o di una nuova funzione, generati dalle schermate reali.
- Reel verticali per i social con testi animati e sottotitoli.
- Tutorial brevi con didascalie, rigenerabili quando l'interfaccia cambia: basta modificare l'HTML e rilanciare il rendering.
Un consiglio: tieni le composizioni nel repository come qualunque altro codice. Essendo il risultato deterministico, il video si ricostruisce identico in qualsiasi momento.