Hoe Ik een 3D Geanimeerd Portfolio Bouwde Met AI
Laatst bijgewerkt: 1 juli 2026
Ik had een portfolio dat eruitzag als een cv in een trenchcoat. Statische screenshots, een raster kaarten, een About-sectie die niemand las. Het deed zijn werk op dezelfde manier als een stopbord zijn werk doet — functioneel, vergetelijk, en niet het soort ding waarvan iemand zegt "je moet dat zien."
Toen lanceerde Anthropic Claude Design 2.0, en Higgsfield verscheepte Seedance 2.0 met native 4K-uitvoer, en ik realiseerde me dat ik een volledig 3D geanimeerd portfolio kon bouwen — met een herovideo, soepele overgangen en echte diepte — zonder handmatig After Effects, Cinema 4D of een freelance motion designer. Niet omdat AI die tools vervangt. Maar omdat het de drempel verlaagde van "huur iemand in of leer een 3D-suite" naar "schets het op een servet en bouw het in een weekend."
Dit is de volledige workflow. Geen theorie, geen "je zou kunnen" — de eigenlijke stappen die ik nam, de tools die ik gebruikte, wat brak, en het portfolio dat er aan de andere kant uitkwam.
Waarom een 3D geanimeerd portfolio nu eindelijk de moeite waard is om te bouwen
Twee jaar geleden was een 3D geanimeerd portfolio een flex — indrukwekkend maar onpraktisch tenzij je een motion designer was die het als portfoliostuk kon rechtvaardigen. Het vereiste Cinema 4D of Blender voor de 3D-assets, After Effects voor de animatie, een paar duizend dollar aan freelance-kosten als je het niet zelf kon, en weken van heen en weer om het goed te krijgen.
Dat veranderde in juni 2026 in twee stappen. Claude Design 2.0 voegde prototyping, wireframing en markup-tools toe die een complete landingspagina laten ontwerpen, itereren en exporteren naar code — alles binnen dezelfde interface. Seedance 2.0 4K van Higgsfield lanceerde met native 4K-videogeneratie, character consistency en de soort motion-kwaliteit die een maand geleden nog een render van uren vereiste. Samen vallen de kosten en tijd om een premium geanimeerd portfolio te bouwen naar "een lang weekend."
Ik behandelde de Claude Design 2.0 tools in mijn hands-on met de Claude Design-revisie. Dit stuk is wat ik ermee bouwde.
De wireframe die ik schetste voordat ik AI aanraakte
Dit is het deel dat iedereen overslaat en dat alles bepaalt.
Voordat ik een tool opende, tekende ik op een servet. Letterlijk. Een schuine rechthoek voor de herosectie, een lijn voor de navigatie, drie vakken voor projectkaarten, een voettekst. Ernaast schreef ik drie woorden: "bewegen, licht, diepte." Dat was het creatieve brief — niet een document van tien pagina's, maar drie woorden die elke beslissing erna zouden sturen.
De reden dat dit ertoe doet: als je in een AI-ontwerptool springt zonder te weten wat je wilt, produceert het model iets generieks en verbluffend snel, en je besteedt de rest van de dag aan het polishen van iets dat je niet had moeten bouwen. Het servet is het filter. Het voorkomt dat je je verliest in mogelijkheden en dwingt je om te beslissen wat het portfolio is voordat je beslist hoe het eruitziet.
Mijn servet zei: een vollscherms herovideo met een 3D geanimeerd karakter, minimal navigatie, drie projectkaarten met hover-effecten, en een enkele CTA. Dat is het. Alles wat niet op het servet stond, ging er niet in.
Het opzetten van de build in Claude Design 2.0
Claude Design 2.0 is geen Figma-vervanging — ik wil daar eerlijk over zijn. Het is een prototypingtool die je van idee naar een bewerkbaar, exporteerbaar ontwerp brengt zonder dat je Figma-niveau vaardigheden nodig hebt. Voor iemand als ik — een ontwikkelaar, geen ontwerper — is dat precies de juiste abstractielaag.
Ik begon met een tekst-prompt: "Ontwerp een portfolio landingspagina met een vollscherms herosectie voor een achtergrondvideo, minimale navigatie, drie projectkaarten onder de hero, en een enkele contactknop. De stijl moet donker, modern en premium aanvoelen met subtiele beweging."
Claude Design produceerde een eerste versie in ruwweg 15 seconden. Het was 70% van wat ik wilde — de lay-out klopte, de kleurenschema was dicht genoeg, maar de spacing was te krap en de projectkaarten hadden een generiek AI-uiterlijk dat ik "gradient-syndroom" noem.
Hier is waar de markup-tools echt waardevol werden. In plaats van de problemen in tekst te beschrijven, omcirkelde ik de projectkaarten en schreef "meer padding, verwijder gradiënt, vlakke kleur, scherpe hoeken." Ik wees naar de navigatie en schreef "kleiner, opzij." De interface-als-prompt aanpak — wijzen in plaats van beschrijven — bespaarde me vier of vijf iteratierondes. Drie markup-passen en het ontwerp was waar ik het wilde.
De assets genereren in Higgsfield
Het 3D-karakter goed krijgen (voorbij de uncanny valley)
Het herovideo had een 3D geanimeerd karakter nodig — niet een stockfoto, niet een statische illustratie, maar iets dat bewoog, persoonlijkheid had en er niet uitzag als een was-pop.
Higgsfield's 3D-karaktergeneratie is indrukwekkend en frustrerend. De eerste drie pogingen landden diep in de uncanny valley — technisch gedetailleerd maar met dat niet-helemaal-menselijke dat je maag omdraait. De fix was contra-intuïtief: ik styliseerde meer, niet minder. In plaats van fotorealisme na te jagen, stuurde ik richting een licht gestileerd uiterlijk — gladde huid, vereenvoudigde trekken, iets overdreven verhoudingen. De uncanny valley treft fotorealisme het hardst. Lichte stilering omzeilt het volledig.
Het werkende prompt: "Een professionele mannelijke softwareontwikkelaar, licht gestileerd 3D, schone rendering, neutrale verlichting, halflang portret, zacht omgevingslicht, geen fotorealisme." Het kostte vijf iteraties om daar te komen. De les: als je AI-gegenereerde 3D er griezelig uitziet, maak het niet realistischer — maak het iets minder.
Animeren in Seedance 2.0 4K
Seedance 2.0 4K is het deel dat het hele project mogelijk maakt. Het genereert native 4K-video — niet opgeschaald, niet geïnterpoleerd, maar echt 4K-rendering — met karakter-consistentie over clips heen. Dat betekent dat hetzelfde karakter er hetzelfde uitziet in elke scène, wat niet het geval was bij eerdere AI-videomodellen waar elk frame een andere versie van je karakter kon produceren.
Ik genereerde drie clips: het karakter draait zich om naar de camera en glimlacht (herovideo), het karakter typt op een laptop (achtergrondlus), en een langzame zoom-in op het karakter met deeltjes-effecten (scroltransitie). Elke clip was 6-8 seconden. De kwaliteit op native 4K was scherp genoeg om vollscherms te draaien op een Retina-scherm zonder zichtbare artefacten.
De 4K-clip in de hero droppen
Terug in Claude Design, voegde ik de herovideo toe als achtergrondlaag. De tool handelt video-inbedding redelijk goed af — je kunt de clip positioneren, trimmen en basisovergangen toepassen. Ik stelde de herovideo in als autoplay, gedempt, gelooped met een langzame fade-in.
Het resultaat: een vollscherms 3D geanimeerd karakter als het eerste wat je ziet bij het laden, met de site-titel en CTA erover gelegd. Het zag er onmiddellijk uit alsof een studio het had gebouwd. Dat is niet bescheidenheid — het is het eerlijke punt. De productiewaarde van 4K AI-video in een goed ontworpen lay-out overschrijdt wat de meeste freelance portfoliowebsites vandaag tonen.
De drie bewerkingsmodi die me behoedden voor her-prompten
Claude Design 2.0 heeft drie bewerkingsmodi die me aanzienlijk productiviteit opleveren ten opzichte van de pure tekst-prompting aanpak van eerdere versies:
Markup-modus: Teken op het ontwerp — omcirkel elementen, schrijf notities, wijs naar problemen. De AI interpreteert je visuele annotaties als instructies. Dit is hoe ik het gradient-syndroom op de projectkaarten fixte.
Direct-edit modus: Klik op elk element en bewerk de eigenschappen direct — kleuren, spacing, typografie, grootte. Geen prompt nodig. Dit is sneller dan beschrijven voor elke wijziging waarvoor je precies weet wat je wilt.
Prompt-modus: De klassieke tekstinterface voor grotere veranderingen of nieuwe secties. Ik gebruikte dit voor het genereren van het initiële ontwerp en voor het toevoegen van secties die nog niet bestonden.
De kracht is dat je ze allemaal door elkaar heen kunt gebruiken. Ik markupte het kleurenprobleem, schakelde naar direct edit voor de padding-aanpassingen, en prompte om een nieuw footercomponent toe te voegen — allemaal in dezelfde sessie. De interface wordt de prompt. Dat is de stille UX-verschuiving die het praktisch maakt.
Het 3D geanimeerde portfolio responsive maken
Responsive design is waar de meeste AI-gegeneerde sites stuklopen. Het desktopresultaat ziet er geweldig uit en de mobiele versie is een instortend kaartenhuis.
Claude Design 2.0 is hier eerlijk gezegd beter dan ik verwachtte. Het genereert responsive breakpoints automatisch, en de resultaten waren 80% correct uit de doos. De 20% die ik moest fixen: de projectkaarten stapelden op mobiel maar met te weinig ruimte ertussen, de herovideo schaalde maar het karakter was te klein op telefoonschermen, en de navigatie schakelde niet schoon om naar een hamburgermenu.
Ik fixte de kaartspacing in direct-edit, wees de herovideo aan en schreef "op mobiel, zoom in op het bovenste derde deel van het frame," en prompte om de navigatie om te bouwen als een drawer-menu. Drie fixes, vijf minuten, en de site werkte op elke schermgrootte.
Exporteren naar Claude Code voor echte controle
Dit is de stap die het verschil maakt tussen "ik bouwde een prototype" en "ik verscheepte een website."
Claude Design 2.0 exporteert naar Claude Code — de volledige gegenereerde HTML, CSS en JavaScript gaat naar een Claude Code-sessie waar je het kunt bewerken, testen en deployen als echte code. Dit is geen screenshot-overdracht. Het is functionele code die je kunt draaien, aanpassen en verschepen.
Ik behandelde de details van deze handoff in mijn Claude Design-revisie post. De korte versie: de code is niet perfect — het is AI-gegenereerde code die opschoning nodig heeft — maar het is een draaiend startpunt dat 80% van de initiële bouw overslaat. Ik besteedde ruwweg twee uur in Claude Code aan het opschonen van de CSS, het optimaliseren van de videolaadsnelheid, en het toevoegen van de juiste meta-tags voor SEO.
De stap die een prototype in een platform verandert
Het portfolio is een statische site — HTML, CSS, JavaScript, een 4K-video. Het had geen backend, geen CMS, geen build-pipeline nodig. Ik deployde het rechtstreeks vanuit Claude Code naar mijn hostingprovider.
De les die groter is dan dit project: het tijdperk van "ik heb een team nodig om een premium web-ervaring te bouwen" vervaagt. Niet verdwenen — een complex product met gebruikersauth, datastromen en real-time functies vereist nog steeds engineering. Maar een portfolio, een landingspagina, een marketingsite met premium visuele kwaliteit? Eén persoon met de juiste AI-workflow bouwt dat nu in een weekend.
Als je hulp nodig hebt bij het opzetten van deze soort build-pipeline — van ontwerp naar AI-gegenereerde assets naar schone code naar deployment — dat is precies het werk dat ik doe. Vind het op fiverr.com/s/EgxYmWD.
Veelgestelde vragen
Kun je echt een 3D geanimeerd portfolio bouwen met AI en zonder codering?
Je kunt het bouwen met minimale codering. Claude Design 2.0 handelt het ontwerp en de prototyping af, Seedance 2.0 4K genereert de 3D-videoassets, en de export naar Claude Code produceert werkende HTML/CSS/JS die opschoning nodig heeft maar het meeste bouwwerk overslaat. Je hebt basis-webkennis nodig om de geëxporteerde code te finetunen, maar je hoeft niet helemaal vanaf nul te bouwen.
Wat maakt Seedance 2.0 4K anders dan andere AI-videomodellen?
Native 4K-rendering (niet opgeschaald), karakter-consistentie over clips heen (hetzelfde karakter ziet er hetzelfde uit in elke scène), en motion-kwaliteit die scherp genoeg is voor vollscherms websitegebruik. Eerdere AI-videomodellen produceerden karakters die per frame veranderden en bij opschaling zichtbare artefacten vertoonden.
Waarom zag mijn AI-gegenereerd 3D-karakter er griezelig uit, en hoe fix ik het?
De uncanny valley treft fotorealisme het hardst. De fix is contra-intuïtief: stiliseer meer, niet minder. Ga voor licht gestileerde, gladde 3D in plaats van fotorealistisch. Vereenvoudigde trekken en iets overdreven verhoudingen omzeilen de uncanny valley-respons die exacte menselijke replica's triggeren.
Hoe werkt de Claude Design naar Claude Code handoff?
Claude Design 2.0 exporteert het volledige ontwerp als functionele HTML, CSS en JavaScript naar een Claude Code-sessie. Het is werkende code die je kunt draaien en bewerken, niet een plat beeld. De code heeft opschoning nodig maar biedt een draaiend startpunt dat het meeste initiële bouwwerk overslaat.
Het servet was de hele truc
Ik begon met een tekening op een servet en eindigde met een 3D geanimeerd portfolio dat eruitziet alsof een studio het heeft gebouwd. De hele build — wireframe tot gedeployde site — kostte een lang weekend.
Het deel dat alles bepaalde was niet de AI. Het was het servet. Drie woorden — "bewegen, licht, diepte" — stuurden elke beslissing erna. De AI was de snelheid. Het servet was de richting. Zonder het servet had de AI iets generieks en indrukwekkends gebouwd dat niet het mijne was.
Ga iets schetsen voordat je iets opent. Het is de enige stap die geen enkel AI-model kan overslaan.
Laten We Samenwerken
- Fiverr (maatwerk builds & integraties): fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited (enterprise oplossingen): ramlit.com
- ColorPark (design & branding): colorpark.io
- xCyberSecurity (beveiligingsdiensten): xcybersecurity.io
