Fra timeline til kode
Traditionel motion graphics bygger på en lineær produktionskæde: storyboard, assets, keyframes, eksport. Hver justering kræver, at man går tilbage i timelinen og manuelt flytter nøglebilleder. Det er præcis den flaskehals, kodebaseret animation er bygget til at løse. Frameworket Remotion lader en skabe videoer og motion graphics med React i stedet for en traditionel timeline, hvor man i stedet for at trække lag rundt skriver komponenter, der renderes ud som video.
Det betyder, at en animation ikke længere er en sekvens af håndsatte nøglebilleder, men en funktion af tid. Som det beskrives i en gennemgang af værktøjet, er koden drevet af et frame-tal, man selv styrer med en variabel, og "interpolate()" der mapper frame-intervaller til værdi-intervaller for eksempelvis opacitet. Ændrer man én variabel, opdateres hele animationen – man skal ikke re-key'e hvert billede i hånden.
Claude som kodepartner, ikke bare autocomplete
Det er her Claude kommer ind som mere end et værktøj. Fordi en Remotion-video i bund og grund er TypeScript og React, kan en kodegenererende AI skrive den flydende, og outputtet er ikke et proprietært filformat, men kode man kan læse, redigere og committe til et repo. En konkret gennemgang af at kombinere Remotion med Claude Code viser netop, hvordan man kan gå fra en tekstprompt til en renderet animeret logo-reveal uden at røre en keyframe-panel.
Det matcher den idé, vi har arbejdet med internt hos KodeKid: en løs tanke som "hvad nu hvis grafikken eksploderer ud af logoet?" kan omsættes direkte til animationslogik og kode, testes med det samme, og justeres igen – uden at man først skal bygge hele produktionen for at finde ud af, om idéen holder.
Dette er i øvrigt også den retning, Anthropic selv har lagt sig i med Claude for Creative Work: en række connectorer, der kobler Claude direkte til kreative værktøjer som Adobe Creative Cloud, Blender og Autodesk Fusion. Ifølge Anthropics egen annoncering kan Claude ikke erstatte smag eller fantasi, men det kan åbne for nye måder at arbejde på – hurtigere og mere ambitiøs idéudvikling, et bredere sæt af færdigheder og mulighed for at kreative kan tage større projekter op. AI kan desuden hjælpe med at bære den del af den kreative proces, der æder tid, ved at håndtere repetitive opgaver og fjerne manuelt slid.
Hvorfor det ændrer selve designet
Når animation er kode og ikke statiske lag, bliver motion graphics en naturlig del af den visuelle identitet i stedet for noget, man lægger ovenpå bagefter. Et logo kan reagere på data. Typografi kan bevæge sig proceduralt. Det samme princip ligger bag biblioteker som GSAP, der ifølge GreenSocks egen dokumentation er et framework-agnostisk JavaScript-animationsbibliotek, der kan animere CSS, SVG, canvas og WebGL – i praksis alt, JavaScript kan røre ved. Kombinationen af et sådant animationslag og en AI, der kan skrive og justere koden på sekunder, er det, der for alvor forkorter afstanden mellem idé og resultat.
Vi har tidligere skrevet om, hvorfor den slags kodebaserede tilgange kræver en vis disciplin for at holde animationer performante – for eksempel i vores gennemgang af hvorfor GSAP scroll-animationer hakker på mobilen, hvor løsningen lå i at måle den faktiske rasteriseringsomkostning i stedet for at gætte.
Mennesket sætter retningen
Det vigtige er, at Claude ikke overtager den kreative beslutning. Det bekræftes også af branchens egne analyser af Remotion-økosystemet, hvor en gennemgang af AI-coding-agent-værktøjer pointerer, at agent-output stadig skal gennemgås og testes, fordi det kan introducere fejlanimation, usikre afhængigheder eller dyr renderingsadfærd. Claude er sparringspartneren, der hjælper med at tænke, udvikle og kode – men retningen, smagen og den endelige vurdering ligger stadig hos designeren.
Det er i øvrigt samme filosofi, vi arbejder efter på tværs af vores projekter – at bygge selv, forstå værktøjerne til bunds og lade AI accelerere processen uden at overtage den kreative kontrol, som vi også har beskrevet i Legesyg med pixels: hvorfor jeg bygger det hele selv.
Resultatet er et workflow, hvor afstanden mellem idé og fungerende prototype er blevet markant kortere – ikke fordi man trykker på en knap og får et færdigt mesterværk, men fordi det ikke længere koster en hel produktion at finde ud af, om en idé virker.
Forfatter: Lars Sohl founder of www.klokly.app and www.kodekid.dk