Six — a wall of drawings as a marquee

A screen full of small tiles waves gently like a flag, and in the middle tiles light up into the letters SIX. Six is a one-screen design study. Each tile is a crop from one of four drawings I made myself: a dog, a boy with a fringe, a sheet full of faces and an elephant with a rider. There are 40 crops. A fixed seed spreads them over the grid, so the pattern is always the same and the same crop never sits directly next to or above itself. At rest the wall is dark and grey.

Letters are formed with tiles. Each pixel of a custom 5×7 font is a tile that lights up in the colours of the drawing; for the big SIX on a wide screen it is a block of two by two tiles. First SIX builds up letter by letter: the tiles of a letter light up in random order within half a second, with 300 ms between letters. Then the sentence 'SIX — a website by Erik van de Blaak' runs through the wall as a marquee, at 8 tiles per second on a wide screen and 6 on a narrow one. The tiles stay put; only the pattern of light moves. The tile size follows the screen width: wider than 783 px there are always at least eight readable characters (1440 px gives 28 px tiles), on a phone five (390 px gives 12 px). Intro and marquee are one pure function from time and grid to the wanted brightness per tile, so they can be tested without a canvas.

Everything is drawn with Canvas 2D in a single requestAnimationFrame loop, without WebGL or an animation library. A sharp script cuts the crops in advance into two WebP sprite sheets: a grey, dimmed version and one in the original ink, about 83 KB together. The flag is fixed on the left: the swing grows from 0.15 of a tile at the pole to 0.45 of a tile at the free edge, with a smaller second wave and a slow gust of wind on top. Lit tiles rise to 106 per cent of their size and cast a glow onto their neighbours, through a bloom buffer at a quarter of the resolution. When nothing changes, nothing is drawn.

Move your mouse or finger to draw trails of light across the wall: a round spot of light about two tiles wide that fades in 1.2 seconds. The marquee stays readable underneath, because every tile takes the higher of the two brightness values. Click a tile to open the whole drawing it comes from: the drawing grows out of the tile and the crop is briefly outlined. Use the arrows or a swipe to browse the other three drawings. With reduced motion on, SIX stands still, the wall does not wave and the sentence appears below it as plain text. For screen readers the whole sentence is in a hidden heading, and the button 'Bekijk de tekeningen' ('View the drawings') opens the lightbox from the keyboard. Built with SvelteKit and Svelte 5 in TypeScript. Lighthouse mobile: 100 performance, 100 accessibility.