ERIK — de oorspronkelijke kubusanimatie

2026

De 3D-animatie die tot oktober 2026 bovenaan mijn homepage stond: 50 kubussen in three.js vormen ERIK, met een foto en video's op de vlakken.

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.

Technologieën

three.js WebGL GSAP JavaScript

Meer van mijn werk

Bekijk het hele portfolio of lees het blog.

Meer werk