Dit is de animatie die tot oktober 2026 bovenaan de homepage van vandeblaak.com stond. Hij zit al in de eerste commit van deze site, van januari 2026. Op de homepage is hij vervangen door een nieuwe animatie; hier draait hij nog zoals hij was.
Het woord ERIK staat in de code als een patroon van vijf regels tekst. Elk sterretje wordt een kubus, een spatie blijft leeg. Dat geeft 50 kubussen in een raster van 24 kolommen breed. Elke kubus krijgt een kleine draai die afhangt van zijn volgnummer, zodat ze niet allemaal precies gelijk staan.
Alle kubussen delen dezelfde zes materialen. Op twee vlakken staat een foto, op de andere vier speelt een video. Omdat de materialen gedeeld zijn, speelt elke video tegelijk op alle 50 kubussen. Als de animatie buiten beeld is, pauzeren de video's en slaapt de renderlus.
De camera draait in een ellips om de letters, ongeveer één rondje per 33 seconden, en beweegt daarbij een beetje op en neer. Elke kubus draait langzaam om zijn as en wordt in 14 seconden groter en weer kleiner, elk met een eigen vertraging. Daarachter staan drie lagen sterren met 2.500, 4.000 en 6.000 punten, die elk met een eigen snelheid draaien.
Wijs je een kubus aan, dan zoekt een raycaster welke kubus onder de muis ligt. Die komt naar voren, draait een stukje en zijn randen lichten op; GSAP regelt die overgangen. Onderaan verschijnt af en toe de handtekening 'Erik van de Blaak (2026)', waarvan elke letter om zijn eigen as draait.
Voor deze losse versie is er een knop voor volledig scherm bijgekomen. De camerabaan was gemaakt voor de brede strook op de oude homepage. Op smallere schermen gaat de camera daarom verder naar achteren, zodat ERIK in beeld past.
Het woord ERIK staat in de code als een patroon van vijf regels tekst. Elk sterretje wordt een kubus, een spatie blijft leeg. Dat geeft 50 kubussen in een raster van 24 kolommen breed. Elke kubus krijgt een kleine draai die afhangt van zijn volgnummer, zodat ze niet allemaal precies gelijk staan.
Alle kubussen delen dezelfde zes materialen. Op twee vlakken staat een foto, op de andere vier speelt een video. Omdat de materialen gedeeld zijn, speelt elke video tegelijk op alle 50 kubussen. Als de animatie buiten beeld is, pauzeren de video's en slaapt de renderlus.
De camera draait in een ellips om de letters, ongeveer één rondje per 33 seconden, en beweegt daarbij een beetje op en neer. Elke kubus draait langzaam om zijn as en wordt in 14 seconden groter en weer kleiner, elk met een eigen vertraging. Daarachter staan drie lagen sterren met 2.500, 4.000 en 6.000 punten, die elk met een eigen snelheid draaien.
Wijs je een kubus aan, dan zoekt een raycaster welke kubus onder de muis ligt. Die komt naar voren, draait een stukje en zijn randen lichten op; GSAP regelt die overgangen. Onderaan verschijnt af en toe de handtekening 'Erik van de Blaak (2026)', waarvan elke letter om zijn eigen as draait.
Voor deze losse versie is er een knop voor volledig scherm bijgekomen. De camerabaan was gemaakt voor de brede strook op de oude homepage. Op smallere schermen gaat de camera daarom verder naar achteren, zodat ERIK in beeld past.
Meer werk
![TEN[10] — de draaiende laptop](/uploads/portfolio/thumbnails/2026/10/ten-rotating-laptop-hero.jpg)
TEN[10] — de draaiende laptop
Een portfolio in een 3D-laptop die om zijn as draait. Elke keer dat het scherm terugkomt, staat er een andere pagina op, in echte HTML. three.js en CSS3D.

Interactieve 3D WebGL Experience
3D-WebGL-werk met geanimeerde chroomletters, een neon-grid en sterren op warpsnelheid. Beweeg je muis om de camera mee te laten bewegen.

Nine Times PHP — een ode aan PHP in blauwe balpen
Een ode aan PHP in blauwe balpen: negen versies van 1995 tot 2026, vier vloekende programmeurs en grafieken die vanzelf bewegen.
