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.