Vier richtingen.

Elke richting bestaat uit een homepage en een insights-pagina, zodat je ziet hoe hij zich houdt bij een verhaal en bij een lijst. De teksten zijn overal die van de echte site, zodat je naar vormgeving kijkt en niet naar andere woorden. In alle vier zitten Mind, Body en Soul, plus een laag over data en AI.

A Ruis wordt orde

Een shaderveld waarin losse punten zich onder het scrollen tot een raster ordenen. De drie lagen stapelen op elkaar in plaats van elkaar af te lossen.

Techniek
WebGL, een fragment-shader
Gewicht
Licht. Een canvas en een handvol regels shader.
Let op
Staat of valt bij de shader. Zonder WebGL zie je een statische versie.

B Het dashboard als held

Het dashboard uit je herobeeld als echt 3D-object dat zich tijdens het scrollen monteert, uit datapunten die de namen van je eigen bronsystemen dragen.

Techniek
Three.js, lokaal gebundeld
Gewicht
Zwaar. Een gedeelde chunk van 528 kB, alleen op deze pagina.
Let op
De meeste bouwtijd en het meeste onderhoud. Ook het meest onderscheidend.

C Donker en typografisch

Zware typografie, een draad die van koel naar warm kleurt door de hoofdstukken heen, en lijntekeningen die zichzelf tekenen op scroll.

Techniek
Alleen CSS, nul JavaScript
Gewicht
Vrijwel niets. Geen enkele kilobyte script.
Let op
Vraagt het meeste van de tekst, want er is niets om achter te schuilen.

D Cinematisch

Panelen die op elkaar plakken en over elkaar heen schuiven, koppen die uit onscherpte oplossen, en canvas-loops die de beweging renderen in plaats van hem af te spelen.

Techniek
Canvas 2D en sticky scroll
Gewicht
Middel. Vijf kleine tekenlussen, geen videobestanden.
Let op
De timing moet kloppen, anders wordt het traag in plaats van filmisch.

Dit zijn schetsen, geen voorstellen. Ze staan op noindex en niet in het menu. Waar je op kunt letten: wat je als eerste ziet, of je blijft scrollen, en of het na drie keer kijken nog steeds werkt. Dat laatste is waar de meeste van dit soort ontwerpen op stuklopen.