AI-videocreatie met Hyperframes en Claude Code

AI-videocreatie met Hyperframes en Claude Code

De ketel was nog aan het opwarmen toen de render klaar was.

Ik had grofweg twee alinea's met een beschrijving in Claude Code getypt: een filmisch intro, een donkerblauwe achtergrond, mijn logo dat op zijn plaats viel over een langzaam paars-naar-cyaan verloop, een slogan die in een zachte gloed vervaagde, en dat alles in minder dan drie seconden. Ik drukte op Enter, liep naar de keuken, vulde de ketel, klikte erop en tegen de tijd dat ik naar een mok reikte, had de agent de HTML-compositie al geschreven, de weergave in de wachtrij geplaatst en een voltooide MP4 in mijn projectmap neergezet. Geen tijdlijn. Geen sleutelframes. Geen naeffecten. Geen Figma. Geen première. Geen definitieve snede.

Dat is geen marketinglijn. Dat is wat er feitelijk gebeurde op een dinsdagavond begin mei, en het is de reden dat ik stopte met scrollen en dit bericht begon te schrijven.

De opstelling die dit mogelijk maakte bestaat uit twee delen. Hyperframes is het open-source renderingframework dat HeyGen op 17 april 2026 heeft uitgebracht. Claude Code is de agent die ermee koppelt, uw bedoeling leest en de code schrijft. Samen vouwen ze wat eens een pijplijn met vijf tools voor een hele dag was, samen tot één enkele tekstprompt en een renderwachtrij. Je leert geen motion graphics. Je beschrijft de gewenste motion graphics.

Dat is de kop. Wat iedereen mist – en waar ik je hier doorheen wil leiden – is het gedeelte eronder. Waarom deze combinatie werkt als andere 'prompt to video'-tools al twee jaar stilletjes teleurstellend zijn. Wat je eigenlijk geïnstalleerd nodig hebt. De exacte promptpatronen die een bruikbare eerste versie opleveren. De plekken waar de workflow nog steeds kapot gaat als je er te hard op drukt. En voor de specifieke soorten videowerk is dit nu echt het snelste hulpmiddel ter wereld.

Als je een workflow voor makers, een workflow voor ontwikkelaars, een marketingpijplijn hebt, of als je een oprichter bent die lanceringsvideo's blijft uitstellen omdat de productiekosten als een muur van veertig uur in je hoofd hangen, dan is dit de post die je ertoe zou moeten aanzetten je plan voor het weekend te wijzigen.

Waarom deze combo eindelijk werkt

Prompt-to-video is sinds ongeveer 2023 de heilige graal van AI-tooling, en gedurende het grootste deel van die tijd genereerden de tools luidruchtige, droomachtige beelden of vereisten ze zoveel handmatige opruiming dat ze geen tijd meer bespaarden. De tools die het overleefden – Remotion, Motion Canvas, een paar eigen cloud-renderers – vereisten echte codering. De tools die 'geen code' beloofden, produceerden output die je niet naar een betalende klant kon sturen.

Hyperframes is de eerste die ik heb gebruikt en die op geen van beide assen als een compromis voelt. De reden is structureel, en als je het eenmaal ziet, kun je het niet meer ongedaan maken.

LLM's zijn buitengewoon goed in het schrijven van HTML, CSS en JavaScript. Dat is het dominante inhoudstype waarop ze zijn getraind. Er is meer webcode op het openbare internet dan er is van elk videoframework, motion graphics-bibliotheek en bewerkingssoftware API bij elkaar. Als je een model vraagt ​​om "een filmisch intro te maken met een donker kleurverloop en een gloeiend logo", heeft het in zijn trainingsgegevens tien miljoen versies van vergelijkbare lay-outs gezien. Het kan er binnen enkele seconden een samenstellen. Het knelpunt is nooit het model geweest. Het knelpunt was het uitvoerdoel: het omzetten van die web-vloeiende redenering in iets dat een echt, deterministisch videobestand wordt.

Dat is wat Hyperframes oplost. Het is, in de eigen woorden van het team: "HTML schrijven. Video renderen. Gebouwd voor agenten." U schrijft (of uw agent schrijft) een eenvoudige HTML-compositie met de attributen data-start en data-duration voor elk element. Animaties zijn afkomstig van elke zoekbare runtime: GSAP, Lottie, CSS-overgangen, Anime.js, de webanimaties API, Three.js. De Hyperframes-engine gebruikt Puppeteer om een ​​headless browser aan te sturen, legt elk frame deterministisch vast en voegt ze samen in een MP4, MOV of WebM met FFmpeg. Het raamwerk is open source onder Apache 2.0, zonder kosten per render, zonder licentielimieten en zonder commerciële beperkingen.

De uitdrukking 'deterministische frame-opname' is het gedeelte waar de meeste mensen voorbij vliegen, en het is het belangrijkste woord in het hele verhaal. Het betekent dat elke weergave met dezelfde compositie een pixel-identiek bestand oplevert. Dat is het verschil tussen slim speelgoed en een hulpmiddel waarmee je klantwerk kunt verzenden. Generatieve videomodellen hallucineren. Hyperframes niet. De compositie is code. De weergave is reproduceerbaar. De uitvoer is van jou.

Claude Code is de tweede helft van waarom dit werkt. Zonder een agent die uw bedoeling kan lezen en de compositie voor u kan schrijven, is Hyperframes nog steeds een ontwikkelaarstool. Met Claude Code ervoor wordt het oppervlak natuurlijke taal. Je beschrijft de video. De agent schrijft de HTML, de CSS, de GSAP-tijdlijn, de timing. Je previewt, je tweakt, je rendert. De agent handelt de onderdelen af ​​waar u in een code-editor drie uur aan zou hebben besteed.

Dat is de architectuur die ik in de komende tien minuten op uw machine wil installeren.

Wat je eigenlijk geïnstalleerd nodig hebt

Twee stukjes systeemsoftware en vervolgens het raamwerk. Dat is de hele lijst.

Node.js. Hyperframes is een Node-project. Vanaf mei 2026 bevindt Node 24 zich in Active LTS (uitgebracht op 06-05-2025, codenaam "Krypton") en zal in oktober 2026 overgaan naar Maintenance. Node 22 ("Jod") is in Maintenance LTS tot april 2027. Beide zijn prima voor Hyperframes, en als je vandaag opnieuw aan het instellen bent, zou ik voor 24 gaan. Node 26 is zojuist verzonden op 5 mei, 2026, maar het is de huidige release, niet LTS. Sla deze over voor productiewerk tot oktober, wanneer deze wordt gepromoot. U kunt uw installatie verifiëren met node --version en bijwerken via nvm als u die heeft, of rechtstreeks downloaden van nodejs.org.

FFmpeg. Dit is de rendering-backbone. Hyperframes gebruikt het om de vastgelegde frames samen te voegen tot een videobestand. De laatste stabiele versie op 5 mei 2026 is 6.1.5 (de 6.1 LTS-tak) of 5.1.9 (5.1 LTS-tak – ondersteund tot en met 2027). Op macOS is brew install ffmpeg de weg van de minste weerstand. Op Linux heeft uw pakketbeheerder het. Op Windows is de officiële build van ffmpeg.org/download.html de veiligste route. Verifieer met ffmpeg -version. Als de opdracht niets retourneert, zal de rest van deze handleiding niet werken. Los dit eerst op.

Dat is de systeemsoftware. Nu het raamwerk.

Het slimste installatiepad, dat ik nu op elke nieuwe machine gebruik, is om Claude Code rechtstreeks de GitHub-repositorylink te overhandigen en de omgeving te laten instellen. Open Claude Code in een nieuwe map, plaats https://github.com/heygen-com/Hyperframes erin en vraag: "Stel Hyperframes in deze map in en registreer de relevante vaardigheden in mijn Claude Code-sessie." De agent leest de README, voert npx Hyperframes init uit en registreert de vaardigheden automatisch. Dit is het installatiepad dat ik iedereen aanbeveel die Hyperframes nog niet eerder heeft gebruikt, omdat de agent de nieuwste installatie-instructies uit de repository zelf leest, wat betekent dat deze actueel blijft met de belangrijkste wijzigingen die u anders handmatig zou moeten bijhouden.

Het handmatige pad is, als u daar de voorkeur aan geeft, één opdracht:

npx skills add heygen-com/Hyperframes

Hiermee registreert u een reeks slash-opdrachten binnen uw Claude Code-sessie: /Hyperframes voor het schrijven van composities, /Hyperframes-cli voor de dev-loop-opdrachten zoals init, lint, preview en render, en /gsap voor animatie hulp. Afhankelijk van de adapters waarvoor u zich aanmeldt, ziet u mogelijk ook /animejs, /css-animations, /lottie, /three, /waapi en /tailwind. Elk hiervan is een Claude Code-vaardigheid die de agent leert hoe hij de juiste composities voor die animatieruntime moet schrijven.

Als je mijn overzicht hebt gelezen van waarom Claude Code-vaardigheden het echte hefboompunt zijn, dan is dit de productiekwaliteitsversie van dat argument toegepast op bewegende beelden - de vaardigheid is je gecomprimeerde oordeel, gecodeerd als een opvraagbaar commando.

Maak een speciale projectmap voordat u begint. Hyperframes genereert een kleine maar echte mappenstructuur - compositions/, assets/, render-uitvoer, een paar configuratiebestanden. Het mixen ervan in een bestaande projectdirectory is technisch mogelijk en praktisch een recept voor verwarring drie weken later als je niet meer weet welke map welke video heeft geproduceerd. Ik bewaar één bovenliggende map met de naam videos/ met één submap per project. Saai, betrouwbaar, gemakkelijk te begrijpen.

Zodra Node, FFmpeg en Hyperframes zijn geïnstalleerd, heb je alles. De rest zijn aanwijzingen.

De eerste render: een filmische intro vanaf één prompt

Hier is de prompt die ik gebruikte op de avond dat het ketelverhaal plaatsvond. Ik geef je de eigenlijke tekst, geen gepolijste versie, omdat het om de ruwe randen gaat.

"Bouw een filmische intro van 3 seconden voor mijn merk mejba.me. Donker marineblauwe achtergrondgradiënt (#0F172A tot #1E293B). Mijn logo (logo.svg in /assets) verschijnt gecentreerd op frame 1, schaalt op van 0,6 naar 1,0 met een zachte verzachting van meer dan 1,2 seconden. Een subtiele gradiënt van paars naar cyaan beweegt diagonaal over de achtergrond, achter de logo, geanimeerd gedurende de volledige 3 seconden. De slogan 'Engineered with intent' vervaagt onder het logo na 1,5 seconde, blijft staan en vervaagt na 2,7 seconden met het logo. Soepele, premium GSAP voor de tijdlijn.

Acht dingen in die prompt doen echt werk, en het is de moeite waard om ze eruit te halen:

1. Duur. Drie seconden. De agent heeft een lengte nodig.
2. Merkkleuren met hexadecimale codes. Niet alleen 'donker marineblauw': het hexadecimale paar neemt giswerk weg.
3. Assetpad. Ik wijs de agent naar logo.svg in /assets, die ik daar had geplaatst voordat ik Claude Code opende.
4. Animatiespecificaties. Schaalbereik, versoepelingscurve, duur. Het model kan redelijke standaardwaarden kiezen als u deze overslaat, maar specificiteit maakt het eerste concept bruikbaar.
5. Achtergrondbeweging. Een aparte animatielaag, met een eigen duur en richting.
6. Tekstinhoud en timing. De slogan verschijnt op een specifieke seconde, vervaagt, blijft hangen, vervaagt.
7. Typografie. Een benoemd lettertype. Zonder dit krijgt u alles wat het model standaard gebruikt.
8. Rendervlaggen. Resolutie, formaat, framesnelheid.

Claude Code schreef de compositie in ongeveer elf seconden. Het produceerde een index.html in de map compositions/ van het project, waarbij de GSAP-tijdlijn correct werd geregistreerd met behulp van het { paused: true }-patroon dat Hyperframes nodig heeft voor deterministisch zoeken. Het trok mijn logo in een <img>-tag met het juiste bronpad. De CSS gebruikte mijn hexadecimale codes woordelijk. Het tekstelement had de juiste versoepeling.

Ik heb een voorbeeld bekeken met npx Hyperframes preview, waarmee de studio in mijn browser op localhost:3000 werd opgestart. De preview is een live runtime: dezelfde code die wordt vastgelegd tijdens de weergave wordt uitgevoerd in het iframe, dus wat ik zag is wat ik zou krijgen. De eerste iteratie zag er ongeveer 80% goed uit. De schaal van het logo was iets te agressief (het voelde veerkrachtig aan als ik gravitas wilde) en de gradiëntbeweging bewoog te snel.

Twee prompts later, beide opgelost. "Vertraag de schaal van het logo tot 1,5 seconde en gebruik een power2.out-versoepeling in plaats van stuiteren." Opgelost. "Halveer de snelheid van de achtergrondgradiëntbeweging en verlaag de dekking naar 0,6." Opgelost. Toen rende ik:

npx Hyperframes render compositions/intro --format mp4 --quality high

De MP4 viel veertig seconden later in de uitvoermap. Ik heb het teruggekeken. Het was de zuivere, premium intro die ik in mijn hoofd had voorgesteld toen ik begon te typen. Totale tijd van lege map tot voltooide MP4: minder dan twaalf minuten, inclusief de prompt-iteraties.

Dat is wat de lanceringsvideo's u laten zien. De reden dat het werkt is niet dat het model iets magisch doet. Het is dat Hyperframes het uitvoerdoel heeft veranderd in iets waar het model al tien jaar op is getraind. Webcode in. Video uit.

Iteratie bestaat uit prompts, geen keyframes

Waar ik steeds op terugkom over deze workflow – en de reden waarom ik denk dat deze de komende achttien maanden een aanzienlijk deel van de motion-graphics-markt zal opslokken – is hoe iteratie aanvoelt.

In een traditionele editor is verfijning mechanisch. Je selecteert een laag. U sleept een sleutelframe. Je tuurt naar de afspeelkop. Je exporteert opnieuw. Jij scrubt. Jij vloekt. Jij herhaalt. Een retour van vijftien minuten per wijziging is normaal, zelfs voor ervaren redacteuren. Voor mensen die dit parttime doen ligt het dichter bij de dertig.

In Hyperframes tot en met Claude Code is verfijning conversatie.

"Maak de titel 20% groter en voeg er een zachte cyaan gloed aan toe."

"De ingang van het logo voelt gehaast aan. Rek het uit tot 1,8 seconden en voeg aan het einde een pauze van 200 ms toe voordat de slogan verschijnt."

"Vervang het achtergrondverloop door een langzamere radiale puls vanuit het midden, in dezelfde kleuren."

"Voeg een dunne geanimeerde lijn toe die onder de slogan loopt terwijl deze vervaagt."

Voor elk van deze wijzigingen heeft de agent minder dan dertig seconden nodig om te schrijven. Het voorbeeld wordt hot-reloads. Je ziet het. Je houdt het of je geeft de volgende instructie. Er is geen tijdlijn om te schrobben. Geen lagenpaneel om te navigeren. Geen versie van "waar is dat effect gebleven?" Omdat de compositie HTML en CSS is, is elke visuele beslissing inspecteerbaar, bewerkbaar en opnieuw aan te passen.

Wat dit in de praktijk instort, is het deel van motion-graphics dat onervarenheid bestraft. Wat After Effects intimiderend maakt, is niet dat de handelingen complex zijn; het is dat je precies moet weten welk paneel, welke parameter en welke combinatie van Bezier-handvatten de look in je hoofd oplevert. Met Hyperframes via Claude Code blijf je in de laag waarin je eigenlijk denkt: de look. Jij beschrijft de look. De agent vertaalt dit naar de parameters. Je bekritiseert het resultaat. De agent stemt de parameters af. De vertaallaag is niet langer een muur die je moet beklimmen. Het is een gesprek dat je voert.

Voor iemand die tien jaar in een tijdlijneditor heeft gewerkt, zal dit in eerste instantie raar aanvoelen, en de verleiding zal groot zijn om de gegenereerde HTML handmatig te blijven bewerken. Weersta die verleiding voor de eerste vijf projecten. Blijf in de promptlaag. Je wordt sneller dan je voor mogelijk had gehouden, omdat je niet langer de cognitieve kosten betaalt van het schakelen tussen wat ik wil en aan welke knop ik moet draaien.

De uitzondering – en daar wil ik eerlijk over zijn – is wanneer je een perfecte synchronisatie met een voice-over nodig hebt. Dat is een ander probleem, een probleem dat ik in detail heb besproken in mijn Claude Design and Hyperframes testpost. De korte versie: voor dat gebruik heb je transcriptietijdstempels op woordniveau nodig, en je moet deze als JSON-bestand in de prompt invoeren. Hyperframes kunnen individuele woorden op het frame raken, maar alleen als u de timinggegevens verstrekt. Voor pure motion graphics zonder voice-oversynchronisatie (intro's, outro's, lower-thirds, geanimeerde uitleggers, sociale posts, advertentiemateriaal) heb je daar niets van nodig. Je beschrijft alleen de beweging.

Rendering: de studio versus de prompt

Er zijn twee manieren om een MP4 uit Hyperframes te halen, en deze omvatten verschillende workflows.

Pad één: vraag Claude om te renderen. U blijft in uw terminal, u vertelt de agent "geef deze compositie weer in 1080p MP4, hoge kwaliteit, sla op in outputs/intro-final.mp4," en de agent voert de opdracht CLI uit en schrijft het bestand. Dit is wat ik voor 90% van mijn werk doe. Het houdt mij in één venster. De weergave wordt uitgevoerd. Het bestand verschijnt. Klaar.

Pad twee: gebruik de Hyperframes-studio. Voer npx Hyperframes preview uit en de studio wordt geopend in uw browser. De studio is een echte compositie-editor - voorbeeldvenster aan de ene kant, code aan de andere kant, hot reload ertussen - en het heeft een exportpaneel waar je het formaat (MP4, WebM, MOV), kwaliteitsvoorinstelling en resolutie kunt kiezen. Dit is wat ik gebruik als ik twee enigszins verschillende versies van dezelfde compositie wil A/B-test of als ik precies wil zien wat de runtime op een bepaald frame doet. Het voorbeeld-iframe voert dezelfde code uit die de renderer vastlegt, dus wat u ziet is wat u krijgt.

Voor de meeste agentische workflows wint het promptpad het op snelheid. Voor tweak- en inspectiewerkzaamheden verdient de studio zijn plaats. Er is geen reden om permanent de ene boven de andere te verkiezen: ze bestaan ​​naast elkaar in dezelfde projectmap.

Een opmerking over uitvoerformaten. MP4 is de standaard en het juiste antwoord voor bijna alles wat u publiceert op YouTube, LinkedIn, X, TikTok of Instagram. WebM is kleiner en werkt prachtig voor insluiting op een website waar u de speler bestuurt. MOV is wat je nodig hebt als je een fragment aan iemand overhandigt die het achteraf in kleur kan beoordelen in DaVinci Resolve of Premiere, omdat het meer visuele informatie behoudt ten koste van de bestandsgrootte. Hyperframes exporteren ze alle drie. De rendervlag is --format mp4 | webm | mov. Kwaliteitsvoorinstellingen zijn low, medium, high en lossless. Voor sociale inhoud is high een goede plek: visueel niet te onderscheiden van lossless voor de gemiddelde kijker, met een fractie van de bestandsgrootte.

De huidige versie heeft een resolutieplafond van 1080p. Als je 4K nodig hebt, is dit nog niet jouw hulpmiddel. Voor de platforms waarop de meeste makers en marketeers daadwerkelijk publiceren, is 1080p nog steeds het juiste doelwit: TikTok, Reels, Shorts, native video op LinkedIn en de meeste advertentieplaatsingen worden allemaal op of onder 1080p weergegeven. Omroep- en bioscoopwerk hebben een andere pijplijn nodig.

Meer dan één enkele prompt: van een webpagina een video maken

De filmische introtest is de eenvoudige demo. Wat mij verraste was wat er gebeurt als je Hyperframes een complexere invoer geeft.

Ik heb dit geprobeerd op mijn eigen portfoliopagina. Ik opende Claude Code, gaf het de URL https://www.mejba.me en vroeg: "Lees deze webpagina en verander er een filmische uitlegvideo van 60 seconden van. Houd de donkere, premium esthetiek. Haal de merkkleuren en typografie van de site zelf. Behandel de belangrijkste waardepropositie in drie beats: wie ik ben, wat ik bouw en hoe je met mij kunt samenwerken. Gebruik heldere bewegende beelden, geen beeldmateriaal, geen commentaar. Render op 1080p MP4."

Wat acht minuten later terugkwam, was een video van 60 seconden die er echt uitzag alsof hij voor het merk was gemaakt. De agent had het donkerblauwe palet en het paars-cyaanaccent vastgelegd. Het had een paar kopregels van de pagina gehaald en deze omgezet in geanimeerde typografische beats. Het had mijn eigenlijke projectenlijst gebruikt om het middengedeelte te structureren. De overgangen waren schoon, het tempo was redelijk en de afsluitende CTA-kaart paste bij de beeldtaal van de rest van het stuk.

Het was niet perfect. Bij de eerste versie waren de breekpunten van de sectie enigszins afwijkend: tel twee duurde een beetje lang, tel drie voelde gehaast. Twee aanwijzingen om de timing opnieuw in evenwicht te brengen, hebben het probleem opgelost. Maar het feit dat ik in minder dan vijftien minuten van een openbare URL naar een merkgerelateerde uitleg van 60 seconden kon gaan, is echt nieuw in de toolingwereld, en het is het deel dat de meeste lezers volgens mij onderschatten als ze hier voor het eerst over horen.

Hetzelfde patroon werkt voor documenten. Ik heb het geprobeerd op een productoverzicht van vier pagina's dat ik voor een klant had geschreven - een pdf, in de projectmap geplaatst, met de prompt "Converteer dit overzicht naar een uitlegvideo van 90 seconden. Gebruik dezelfde donkere, professionele esthetiek als mijn intro. Breng de drie belangrijkste mogelijkheden in afzonderlijke scènes samen. Sluit af met de contact-CTA uit het document." De agent las de pdf, identificeerde de structuur, componeerde drie scènes en renderde. Het resultaat was bruikbaar als eerste schets. Na twee rondes met revisieprompts kon ik het naar de klant sturen.

Dit is het deel van de workflow dat het meest zal verstoren. Marketeers die momenteel drie uur en vierhonderd dollar besteden aan het produceren van één enkele uitlegvideo, kunnen er nu één per uur produceren voor de kosten van hun Claude-abonnement. PM's die PRD's in Notion hebben geschreven, kunnen hetzelfde document aan Hyperframes overhandigen en een videoversie krijgen voor de kickoff-bijeenkomst. Oprichters die een product lanceren, kunnen een kopie van hun landingspagina maken en een videoadvertentiepijplijn gereed hebben voordat de pagina zelfs maar live is. De toetredingsdrempel voor 'video als inhoudsformaat' is zojuist met een orde van grootte ingestort.

De traditionele pijplijn versus deze

Hier is de vergelijking ontdaan van marketingtaal. Beide kolommen zijn gebaseerd op het daadwerkelijk doen van het werk.

git het als iets anders | | Merkconsistentie | Degene die het bestand heeft gemaakt, beheert het systeem | Opgeslagen als een Claude Code-vaardigheid, voor altijd herbruikbaar | | Uitvoerformaten | Wat u ook onthoudt om te exporteren | MP4, MOV, WebM via vlag of studiopaneel | | Plafond | 4K, uitzendkleur, complexe VFX | 1080p, bewegende beelden, geen native zware 3D |

Het eerlijke verhaal op deze tafel is dat Hyperframes geen senior motion designer vervangt die aan een merkfilm van $ 50.000 werkt. Het vervangt vrijwel geheel de lange staart van 'we hebben een snelle intro nodig voor deze video' en 'kan iemand een onderste derde maken voor deze clip' en 'we hebben vrijdag een advertentie van 30 seconden nodig' die de wachtrijen voor projecten van bureaus vult. In die lange staart leven de meeste productie-uren. Dat is de markt die in beweging is.

De gebruiksscenario's die dit nu ontgrendelt

Hier is wie dit dit weekend zou moeten opzetten, opgesplitst per taak, met het specifieke soort werk dat volgens mij het snelst wint:

Creators. Intro-animaties, outro-kaarten, lower-thirds, eindschermen, geanimeerde sectieverdelers voor lange inhoud, geanimeerde cover-art voor podcasts. Dingen waarvoor vroeger een freelance redacteur of een zondagmiddag in DaVinci nodig was. Je bouwt een aantal vaardigheden op (één per itemtype) en hergebruikt ze voor elke toekomstige video. Je kanaal ziet er visueel consistent uit op een manier die anders duur in onderhoud is.

Ontwikkelaars. Productdemo-intro's, geanimeerde changelogs, video's met release-aankondigingen, README-heldanimaties. Alles wat u graag op een documentenpagina of in een lanceringstweet had willen insluiten, maar dat niet deed omdat de productiekosten te hoog waren. Nu kost het tien minuten.

Marketeers. Advertentiemateriaal voor sociale advertenties in volume, A/B testvarianten van dezelfde advertentie met verschillende teksten of tempo's, geanimeerde uitleg voor landingspagina's, wekelijkse video's met productupdates. De oude beperking was: "we kunnen het ons niet veroorloven vijf varianten te testen." Die beperking is verdwenen. Je kunt binnen een uur twintig varianten van een advertentie weergeven en het platform laten vertellen welke werkt.

Productmanagers. Geanimeerde walkthroughs van nieuwe functies voor kickoff-vergaderingen, videoversies van een PRD voor updates voor belanghebbenden, democlips voor verkoopbevordering. Het gaat er niet om dat je motion designer wordt. Het punt is dat je een video op dezelfde manier kunt produceren als een Slack-bericht: snel, goedkoop en vanuit tekst.

Oprichters. Lanceringsvideo's, supplementen voor fondsenwerving, wervingsclips, producttrailers. Het werk dat je stilletjes hebt vermeden omdat het te duur leek om het waard te zijn. De kosten zijn gewoon ingestort. Er is niet langer een verdedigbare reden om te lanceren zonder video.

Als je mijn werk aan de bredere videostack hebt gevolgd, past dit in het productiesysteem dat ik heb beschreven in de Claude Code videoproductiestack met 3 tools - ontwerpsysteem bovenaan, Hyperframes in het midden, Auphonic onderaan voor audio. Voor pure motion graphics zonder voice-over kunt u de onderste laag volledig overslaan en alleen vanuit Hyperframes verzenden.

Waar de workflow nog steeds breekt

Ik wil je de eerlijke versie van de beperkingen geven, omdat de lanceringsvideo's dat niet doen.

Voice-oversynchronisatie is een apart probleem. Als uw video gesproken tekst heeft en u tekst of afbeeldingen op het scherm nodig heeft om bij specifieke woorden terecht te komen, heeft u een transcript op woordniveau nodig en een prompt die naar die tijdstempels verwijst. Hyperframes zal het correct uitvoeren als u het de gegevens geeft. Het zal raden als je dat niet doet. Ik heb de volledige transcriptiegestuurde workflow behandeld in mijn Claude Design- en Hyperframes-test, en dezelfde aanpak werkt hier.

Genereer tijdschalen met complexiteit van de compositie. Een filmisch intro van drie seconden wordt in minder dan een minuut weergegeven. Een compositie van 90 seconden met meerdere animatielagen, beeldoverlays en een drukke achtergrond kan op een moderne laptop vijf tot tien minuten duren. Dit is geen beperking van de tool, het is natuurkunde: de engine legt elk frame vast in een browser zonder hoofd en voegt ze samen met FFmpeg. Als u klantwerk doet waarvoor vijftig renders per dag nodig zijn, houd dan rekening met de kosten voor de lokale machine.

Het 1080p-plafond is voorlopig reëel. Als uw uitvoerspecificatie 4K is, is dit nog niet uw hulpmiddel. Bekijk de releases van GitHub: het engineteam heeft hard gewerkt.

Aangepaste lettertypen moeten beschikbaar zijn voor de runtime. Als u verwijst naar een merklettertype dat niet Google Fonts is en niet in de map assets/ van uw project staat, zal de renderer terugvallen. Plaats uw .woff2-bestanden in het project en verwijs ernaar in de CSS van de compositie, of gebruik websafe en Google Fonts voor vroege experimenten.

Zware 3D is niet de juiste taak voor deze tool. Je kunt Three.js gebruiken als animatieruntime, en voor gestileerde abstracte scènes werkt het goed. Voor complexe 3D-karakteranimatie of fotorealistische 3D-rendering zijn Blender en een echte renderfarm nog steeds het antwoord.

Geen van deze zijn dealbreakers voor de gebruiksscenario’s die ik hierboven heb genoemd. Dit zijn de grenzen van waar deze tool echt goed in is, en als u ze van tevoren kent, bespaart u de tijd dat u ze op het verkeerde moment in een project tegenkomt.

Wat daarna komt: de avatarpijplijn

Wat het beeld op de lange termijn interessant maakt, is wat er gebeurt als je Hyperframes gaat combineren met de rest van de AI-videostack. HeyGen – het bedrijf achter Hyperframes – heeft al een deep avatar-product. De logische volgende stap, en eentje die ik dit jaar verwacht te zien, is een schone overdracht tussen een pratende avatar, de bewegende beelden erachter en de bewerkingslaag die het geheel met elkaar verbindt. Avatar in HeyGen, lower-thirds en beweging in Hyperframes, audioverfijning in Auphonic, de hele pijplijn georkestreerd door Claude Code-vaardigheden die je ooit hebt geschreven en voor altijd hebt opgeroepen.

Dat is geen sciencefiction. De stukken worden allemaal verzonden. De orkestratielaag is wat u voor uzelf bouwt, en het is meestal een snel technisch en vaardigheidsontwerp zodra de tooling is geïnstalleerd. Het samengestelde bezit is uw vaardighedenbibliotheek. Elke video die u verzendt, voegt iets meer capaciteit toe, zodat de volgende sneller kan worden verzonden. Als je mij hebt zien schrijven over geanimeerde heldensecties gebouwd met Claude Code, is dit hetzelfde samengestelde patroon dat wordt toegepast op video: de hefboomwerking is niet het individuele resultaat, het is het herbruikbare oordeel gecodeerd als een opvraagbare vaardigheid.

Veelgestelde vragen

Moet ik weten hoe ik moet coderen om Hyperframes te gebruiken met Claude Code?

Nee, u beschrijft de video in gewoon Engels en Claude Code schrijft de HTML-, CSS- en JavaScript-compositie voor u. U hoeft Node.js en FFmpeg slechts één keer te installeren. Voor het volledige installatieoverzicht raadpleegt u het gedeelte Wat u daadwerkelijk moet installeren hierboven.

Is Hyperframes gratis commercieel te gebruiken?

Ja. Hyperframes is open source onder de Apache 2.0-licentie zonder kosten per render, licentielimieten of beperkingen op bedrijfsgrootte. U betaalt alleen voor uw Claude Code-abonnement en de rekenkracht op uw lokale computer. Render zoveel video's als uw hardware aankan.

Hoe verhoudt Hyperframes zich tot Remotion?

Beide zijn op HTML gebaseerde videoframeworks. Hyperframes is speciaal gebouwd voor AI-agenten om composities te schrijven en wordt kant-en-klaar geleverd met Claude Code-vaardigheden. Remotion gebruikt React en is algemener bedoeld. Voor promptgestuurde, agent-first-workflows wint Hyperframes op het gebied van time-to-first-render. Ik heb de diepere vergelijking behandeld in mijn Claude Code videobewerkingsworkflowpost.

Welke uitvoerformaten ondersteunt Hyperframes?

MP4, MOV en WebM, ingesteld via de --format-vlag tijdens het renderen of gekozen in het studio-exportpaneel. MP4 is de standaard en het juiste antwoord voor de meeste sociale publicaties en webpublicaties.

Kunnen Hyperframes een webpagina of pdf omzetten in een video?

Ja: geef de URL of het document door aan Claude Code met een prompt die de gewenste video beschrijft, en de agent zal de bron lezen, de scènes structureren, de compositie schrijven en renderen. In het gedeelte Beyond a single prompt hierboven wordt een echt voorbeeld doorlopen.

Wat is de maximale renderresolutie?

1080p vanaf mei 2026. Voor TikTok, Reels, Shorts, LinkedIn, YouTube en de meeste betaalde advertentieplaatsingen is 1080p het juiste doelwit. Voor 4K-uitzendingen of bioscoopwerk heb je een andere pijplijn nodig.

De render die mijn plan voor deze maand veranderde

Toen de ketel klaar was met koken, goot ik het water uit, ging terug naar mijn bureau en keek hoe de MP4 drie keer achter elkaar werd afgespeeld. Niet omdat het perfect was – dat was het niet – maar omdat de kloof tussen wat ik had getypt en wat nu als voltooid bestand op mijn schijf stond groter was dan welk hulpmiddel dan ook dat ik de afgelopen vijf jaar had gebruikt. Die kloof is het daadwerkelijke product. De compositie zelf was onopvallend. De ineenstorting van de productiekosten tussen "Ik wil een filmische intro" en "Ik heb een filmische intro" is wat dit jaar veel plannen gaat veranderen, inclusief de mijne.

Ik ga de komende maand besteden aan het opnieuw opbouwen van de visuele laag van elke video die ik via deze stapel publiceer - elke intro, elke outro, elk onderste derde deel, elke sectie-einde - en ik ga ze allemaal omhullen met een Claude Code-vaardigheid, zodat ik er nooit meer over hoef na te denken. Tegen de tijd dat ik mijn volgende lange video opneem, zullen de visuele productiekosten nul zijn. Dat is het eigenlijke punt van deze tooling. Niet dat één render indrukwekkend is. Dat de hele pijplijn een zin verwijderd wordt.

Als je hebt gewacht op het moment waarop AI videocreatie overging van "interessante demo" naar "Ik kan dit morgen in mijn echte werk gebruiken", dan is dat vorige maand gebeurd. De waterkoker is je timer.

Laten we samenwerken

Wilt u AI-systemen bouwen, workflows automatiseren of uw technische infrastructuur schalen? Ik help je graag.

• Fiverr (aangepaste builds en integraties): fiverr.com/s/EgxYmWD
• Portfolio: mejba.me
• Ramlit Limited (ondernemingsoplossingen): ramlit.com
• ColorPark (ontwerp en branding): colorpark.io
• xCyberSecurity (beveiligingsdiensten): xcybersecurity.io