Six — een muur van tekeningen als lichtkrant

Een scherm vol kleine tegels dat rustig golft als een vlag, en in het midden lichten tegels op tot de letters SIX. Six is een designstudie op één scherm. Elke tegel is een uitsnede uit een van vier tekeningen die ik zelf heb gemaakt: een hond, een jongen met pony, een vel vol gezichten en een olifant met ruiter. Er zijn 40 uitsneden. Een vaste seed verdeelt ze over het raster, zodat het patroon altijd hetzelfde is en dezelfde uitsnede nooit direct naast of boven zichzelf staat. In rust is de muur donker en grijs.

Letters worden gevormd met tegels. Elke pixel van een eigen 5×7-lettertype is een tegel die oplicht in de kleuren van de tekening; bij de grote SIX op een breed scherm is dat een blok van twee bij twee tegels. Eerst bouwt SIX zich letter voor letter op: de tegels van een letter lichten in willekeurige volgorde op binnen een halve seconde, met 300 ms tussen de letters. Daarna loopt de zin 'SIX — a website by Erik van de Blaak' als lichtkrant door de muur, 8 tegels per seconde op een breed scherm en 6 op een smal scherm. De tegels blijven staan; alleen het lichtpatroon schuift. De tegelgrootte volgt uit de schermbreedte: breder dan 783 px zijn er altijd minstens acht tekens te lezen (1440 px geeft tegels van 28 px), op een telefoon vijf (390 px geeft 12 px). Intro en lichtkrant zijn één pure functie van tijd en raster naar de gewenste helderheid per tegel, en daardoor zonder canvas te testen.

Alles wordt getekend met Canvas 2D in één requestAnimationFrame-lus, zonder WebGL of animatiebibliotheek. Een script met sharp snijdt de uitsneden vooraf tot twee sprite-sheets in WebP: een grijze, gedimde versie en een versie in de originele inkt, samen ongeveer 83 KB. De vlag zit links vast: de uitslag groeit van 0,15 tegel bij de stok tot 0,45 tegel aan de vrije rand, met een kleinere tweede golf en een langzame windvlaag erbovenop. Opgelichte tegels komen tot 106 procent naar voren en geven gloed af op hun buren, via een bloom-buffer op een kwart van de resolutie. Als er niets verandert, wordt er niet getekend.

Met je muis of vinger teken je lichtsporen over de muur: een ronde lichtvlek van ongeveer twee tegels die in 1,2 seconde uitdooft. De lichtkrant blijft daaronder leesbaar, omdat elke tegel de hoogste van de twee helderheden krijgt. Een klik op een tegel opent de hele tekening waar die uit komt: de tekening groeit uit de tegel en de uitsnede krijgt even een kader. Met de pijlen of een veeg blader je naar de andere drie tekeningen. Met 'minder beweging' aan staat SIX stil, golft de muur niet en staat de zin eronder als gewone tekst. Voor schermlezers staat de hele zin in een verborgen kop, en de knop 'Bekijk de tekeningen' opent de lightbox met het toetsenbord. Gebouwd met SvelteKit en Svelte 5 in TypeScript. Lighthouse mobiel: 100 voor prestaties, 100 voor toegankelijkheid.