Een video die gewoon code is

Op 8 oktober bracht Anthropic Claude Motion uit: je beschrijft een animatie in een chat en Claude maakt er een video van. Daar zit geen videomodel achter. Claude schrijft code die tekst, vormen en grafieken laat bewegen, en die code wordt afgespeeld als video. Slim bedacht. Alleen zit het voorlopig alleen in de Team- en Enterprise-abonnementen, en wat je eraan overhoudt is een videobestand. Voor een blog die juist draait op interactieve uitleg voelt dat als een stap terug.

Dus heb ik hetzelfde idee zelf gebouwd, met Remotion. Hieronder het resultaat: de DNS-opvraging van wallieweb.nl, van de vraag van je laptop tot het antwoord uit de cache. Druk op afspelen.

Wat je hier ziet is een React-component die in je browser draait, met een tijdlijn eromheen. Je kunt pauzeren, terugspoelen en naar elk moment springen. Exact dezelfde code levert ook een MP4 op, voor plekken waar je geen code kunt draaien, zoals LinkedIn.

Een video als functie van de tijd

Remotion draait om één idee: een video is een functie van het framenummer. Een compositie is een gewone React-component die met useCurrentFrame() vraagt welk frame het is, en op basis daarvan bepaalt waar alles staat. Frame 0 is het begin, bij 30 frames per seconde is frame 300 precies tien seconden later.

In de DNS-animatie betekent dat bijvoorbeeld: het pakketje naar de root-server vertrekt op frame 85 en is 40 frames later terug. Op elk frame daartussen rekent de component uit hoe ver het onderweg is en zet het bolletje op die plek langs de lijn. De tijdbalk onderin telt de milliseconden op naarmate de antwoorden binnenkomen, tot 79 ms. In de slotscène gebeurt hetzelfde nog een keer, maar dan beantwoordt de resolver de vraag uit zijn geheugen en stopt de teller bij 21 ms.

Waarom geen CSS-animaties

Het ligt voor de hand om gewoon transition en @keyframes te gebruiken, zoals in de scroll-explainers op deze site. Dat werkt hier niet. Om een MP4 te maken opent Remotion de compositie in een headless Chrome, springt naar een frame, maakt een screenshot en gaat door naar het volgende. Die frames worden niet per se op volgorde gerenderd, en soms in meerdere tabbladen tegelijk. Een CSS-transitie hangt af van hoeveel echte tijd er is verstreken sinds een wijziging, en die tijd bestaat in zo'n render niet. Je krijgt dan een video die flikkert, of waarin een animatie halverwege blijft hangen.

Daarom rekent de compositie alles uit het framenummer, tot en met het moment waarop een ondertitel verschijnt. Remotion helpt daarbij met functies als interpolate() om een waarde tussen twee frames te laten verlopen, en spring() voor de veerbeweging waarmee de servers in beeld komen. Elk frame klopt daardoor op zichzelf. Spring naar seconde 9 en je ziet precies wat daar hoort, ook als de frames ervoor nooit gerenderd zijn.

Eén bron, twee uitgangen

Op de site speelt de Remotion Player de compositie af. Die schaalt de animatie naar de breedte van de pagina en tekent er knoppen voor afspelen, pauzeren en de tijdlijn omheen. Op een telefoon wordt het beeld te klein voor een liggend diagram, dus heeft de compositie twee layouts: liggend (16:9) en staand (4:5). De speler kiest er een op basis van de schermbreedte, dezelfde grens die de scroll-explainers gebruiken.

Een klein detail dat ik pas na een code review goed had: de verhouding van het kader moet in CSS staan, niet in JavaScript. De server weet niet hoe breed je scherm is en rendert dus de liggende versie. Als de verhouding pas na het laden omslaat naar staand, schuift de tekst eronder op je telefoon bijna 250 pixels naar beneden. Met een media query in CSS heeft het kader meteen de juiste maat, en kiest JavaScript alleen welke versie erin speelt.

Voor de MP4 is er één commando: npm run motion:render -- dns voor de liggende versie in 1920 bij 1080, of dns-staand voor 1080 bij 1350. Vijftien seconden animatie wordt een bestand van iets minder dan een megabyte.

Claude Motion of Remotion?

Wil je snel een losse video, dan is Claude Motion handiger. Alles gebeurt in de chat en er is niets te installeren; in de demo's klik je op een element in de animatie en vraag je om alleen dat aan te passen. Remotion vraagt meer werk, maar je houdt de code. Die staat gewoon in de repository van deze site, wordt gereviewd en gedeployd zoals de rest, en kan dus ook als interactief onderdeel in een artikel draaien in plaats van als videobestand. Remotion is gratis voor individuen en bedrijven tot en met drie mensen; daarboven heb je een betaalde licentie nodig.

Eerlijk is eerlijk: ook hier schreef Claude de code, alleen in Claude Code in plaats van in een chat. Het principe is precies hetzelfde. Er wordt een programma geschreven dat de beelden tekent, en dat programma kun je lezen, aanpassen en opnieuw draaien.

Tot slot

Wil je weten wat er in de animatie precies gebeurt, met de echte dig-uitvoer en de achtergrond bij elke stap? Dat staat in Hoe DNS in 80 milliseconden een naam vindt, de scroll-versie van hetzelfde verhaal. Deze animatie is de samenvatting in vijftien seconden. Welke vorm beter werkt weet ik eerlijk gezegd nog niet. Scrollen in je eigen tempo legt meer uit, maar een animatie kun je doorsturen naar iemand die nooit een artikel over DNS zou openen.