Portfolio-video med Claude Code + Remotion — Programmatisk video utan videoredigerare

1. Claude Code + Remotion: Konceptet

Vad är Remotion?

Remotion är ett React-baserat ramverk som låter dig skapa video programmatiskt. Istället för att dra och släppa i en timeline (som i Premiere eller After Effects), skriver du React-komponenter som renderas frame-för-frame till en video.

Varför Claude Code?

Claude Code är en AI-assistent som kan skriva och köra kod direkt i terminalen. Kombinationen blir kraftfull:

Arbetsflödet

Jag beskriver vad jag vill →
Claude Code skriver koden →
Remotion Studio visar preview →
Jag ger feedback →
Iteration

Remotion enforces constraints som passar perfekt för AI-driven utveckling:

• Deterministisk rendering — ingen Math.random(), bara random('seed') från Remotion
• Frame-baserad timing — allt uttrycks i frame-nummer, inte sekunder
• Clamp-ad interpolation — alltid extrapolateLeft: 'clamp', extrapolateRight: 'clamp'
• Inga CSS-animationer — all rörelse drivs av useCurrentFrame()

Dessa constraints betyder att Claude Code inte kan introducera icke-deterministiskt beteende av misstag. Reglerna dokumenterades i CLAUDE.md i projektets rot, som Claude Code läser automatiskt vid varje sessionsstart.

2. Planeringen: Fasbaserad arkitektur

Vi började inte med kod — vi började med struktur. I mappen plan/ skapade vi 13 markdown-dokument.

Nyckeldokument

Storyboarden specificerar varje animation med exakta frame-ranges — till exempel: Scene 4 (Knowledge Work) har SectionLabel slide-in vid frame 0-30, sökfält fade-in vid 30-40, typewriter-query vid 40-120, counter-countdown med Easing.out(Easing.cubic) vid 140-220, projektbilder slide-in vid 240-270.

VIDEO-BIBLE.md

Ett centralt dokument där ALL text som syns i videon finns nedskriven:

• Exakta strängar ("I build with AI, not just talk about it")
• Vilken scen de tillhör
• Vilken frame-range de visas
• Styling (färg, storlek, font-weight)

Varför? Claude Code kan inte "se" videon. Genom att ha allt dokumenterat kunde vi referera: "Texten i VIDEO-BIBLE.md rad 4.2 ska visas frame 30-120"

Fasbaserad approach

Projektet delades in i 11 faser:

1. Skapa VIDEO-BIBLE.md
2. Detaljerad storyboard
3. Scaffolda Remotion-projekt
4. Bygg återanvändbara komponenter
5. Bygg scen 1-7 (en scen i taget, fas 5-10)
6. Polish, transitions, render (fas 11)

En fas per session. Efter varje fas: dokumentera, committa, stanna. Börja nästa session med ren kontext. Arbetsflödet var disciplinerat: 17 sessioner med session-loggar i work-progress/2026-01-31/.

3. Remotion Skills och Playwright

Remotion Skills

Projektet inkluderar en skills/-mapp klonad från Remotions officiella GitHub-repo. Denna innehåller 30+ markdown-filer med best practices för animationer, timing, transitions, sekvensering, fonts, bilder, Zod-parametrar med mera. Dessa fungerar som en domänspecifik kunskapsbas — när Claude Code behöver implementera en spring-animation eller sätta upp en TransitionSeries läser den relevant skill-fil istället för att förlita sig på generell React-kunskap.

CLAUDE.md i projektet enforcar detta: "Vid VARJE kodändring: Jag använder Remotion best practices skill."

Skills vi använde

Playwright MCP för visuell verifiering

Playwright MCP-integrationen användes för visuell verifiering under utveckling. Under projektets gång sparades 11 screenshot-PNGs tagna vid specifika frames genom hela videon:

• check-intro-frame60.png — verifiera portrait fade-in timing
• check-automation-frame350.png — kontrollera automation scene layout
• check-glitch-frame241.png — verifiera RGB glitch-effekten på projektkort
• check-automation-pipeline-wave.png — energy wave som sveper genom pipeline-noder
• En checkpoint per scen genom hela videon

Arbetsflödet: Claude Code navigerade till Remotion Studio i webbläsaren, sökte till en specifik frame, tog en screenshot, och verifierade resultatet visuellt — allt utan att en människa behövde kontrollera manuellt. När något såg fel ut (som en felplacerad glowing border) gav screenshoten omedelbar feedback för iteration.

4. Sessionerna: Från scaffold till cyberpunk

Tidig fas (Session 1-5): Grund

• Session 1: Läste projektdokumentation, initierade git, klonade Remotion skills
• Session 2: Skapade hela planstrukturen — 13 planeringsdokument med designsystem, färgpalett (#0a192f navy bakgrund, #64ffda teal primärfärg), Inter-font, och animationsstandarder (spring damping 200)
• Session 3-5: Scaffoldade Remotion-projektet, hämtade assets från portfolio-siten, byggde Scene 1 (Intro) som proof of concept med typewriter-text, spring-animerat namn, portrait fade-in med floating-effekt

Byggfas (Session 6-12): Scen för scen

Varje scen byggdes enligt sin fasplan, med återanvändning och utökning av komponentbiblioteket. Komponenter som växte fram:

• PipelineFlow — animerat flödesdiagram med spring node pop-in, pilritning, och highlight-puls
• CounterAnimation — animerad sifferräknare ("3 timmar" som räknar ner till "30 sekunder")
• ProjectCard — bildkort med staggered entrance-animationer

Session 7: IntroScene — typewriter-effekt, portrait slide-in Session 8: AutomationScene — pipeline-animation med noder Session 9: AIDevelopmentScene — BheastPortal med guld-ram Session 12: AgileScene — certifieringsbadges, testimonial Session 13: OutroScene — tech stack pills, mässingskugghjul

Cyberpunk-effekter (Session 13-15)

Session 15 var en stor visuell uppgradering — 6 nya effekter lagda över alla 7 scener i ~260 rader kod:

1. Scanlines — subtil horisontell linje-overlay (TV-statik-känsla)
2. DataParticles — fallande Matrix-liknande tecken (01アイウエオ>_{}[]) med deterministisk cykling
3. NeonFlicker — dual-layer drop-shadow glow med 70% sinus-puls + 30% random flicker, applicerad på section labels i 6 scener
4. ProjectCard glitch — RGB split text-shadow + horisontell jitter vid kort-entrance (frame 0-12), aktiv på alla 10 projektkort
5. Pipeline highlight nodes — cyan glow på nyckel-noder ("AI", "Claude") med energy wave sweep
6. Energy pulse wave — loopande glow-sweep genom pipeline-noder

Alla effekter är additiva — de lägger sig ovanpå utan att modifiera befintliga animationer. All randomness använder Remotions deterministiska random('seed').

Animerade bakgrunder och Zod (Session 16-17)

Session 16 justerade timing (pills som dök upp 2-3 sekunder tidigare), uppdaterade innehåll, och introducerade AnimatedSceneOverlay — bakgrundsbilder med hologram-glow och orange ljusremsor.

Session 17 skapade två fler overlay-komponenter:

• AmbientDualPulse (Scene 1) — cyan och magenta gradients som "andas" in och ut via sinusvågor, lätt ur fas
• CyberpunkOverlay (Scene 3) — tre lager: glödande cyan holografisk border, flickrande taklampor med broken-fluorescent randomness, och subtil "BUILD"/"CREATE" neonskylt-glow

IntroScenen förfinades också: fade-from-black togs bort och content-animationer skiftades 16 frames senare, vilket skapade ett "take in the scenery"-moment — den första sekunden visar bara rummets bakgrund med ambient breathing och data-partiklar innan någon text dyker upp.

5. Zod: Visuella kontroller

Vad är Zod i Remotion-kontexten?

Zod är ett schema-valideringsbibliotek för TypeScript. Remotion har inbyggt stöd för Zod-schemas som visuella kontroller i Studio. När du definierar ett Zod-schema för en kompositions props renderar Remotion Studio interaktiva sliders, inputs och toggles i sidopanelen.

Problemet vi löste

Den glödande border-rutan i cyberpunk-bilden var felplacerad. Istället för att gissa pixelvärden och köra om kom vi på en bättre approach.

Lösningen: Sliders i Studio

export const CyberpunkDemoSchema = z.object({
borderLeft: z.number().min(0).max(100).default(32),
borderTop: z.number().min(0).max(100).default(42),
borderWidth: z.number().min(5).max(80).default(36),
borderHeight: z.number().min(5).max(60).default(18),
borderRadius: z.number().min(0).max(50).default(8),
});

Resultat i Remotion Studio

┌─────────────────────────────────────┐
│  Props                              │
│  ─────────────────────────────────  │
│  borderLeft      [====●=====] 32%   │
│  borderTop       [======●===] 42%   │
│  borderWidth     [====●=====] 36%   │
│  borderHeight    [==●=======] 18%   │
│  borderRadius    [●=========] 8px   │
└─────────────────────────────────────┘

Dra i slidern → rutan flyttar sig i realtid. Ingen kodändring, ingen omstart.

Arbetsflödet: definiera schema → dra sliders i Studio → hitta rätt värden → spara som defaults. Den glödande bordern gick från en initial gissning till finjusterade värden — hittade interaktivt på sekunder istället för genom en kod-reload-check-cykel.

Mönstret kan återanvändas för vilken positionerad overlay-komponent som helst.

6. Sammanfattning

Vad vi byggde

• 7 scener, ~60 sekunder total längd
• 15+ återanvändbara komponenter
• Animerade bakgrunder med pulse/flicker-effekter
• Visuella kontroller för finjustering

Vad vi lärde oss

1. Planering först — VIDEO-BIBLE.md och storyboard sparade timmar
2. En fas i taget — Förhindrade context-överbelastning
3. Skills är kritiska — Remotion-specifika patterns > generell React
4. Zod för iteration — Sliders >> gissa-och-kör
5. Dokumentera sessioner — Startprompts för nästa session

Tech stack

• Remotion — Programmatisk video
• Claude Code — AI-driven kodning
• TypeScript — Typsäkerhet
• Zod — Schema + visuella kontroller
• React — Komponentarkitektur
• Playwright MCP — Visuell verifiering

Videon är resultatet av 17 sessioner, 11 faser, och ett nära samarbete mellan människa och AI.