Hoe deze site gemaakt is

Halcyon begon niet met een canvas maar met een these: "een studio voor volumetrisch licht". Drie radicaal verschillende concepten werden geschetst, met per concept een signature-moment, een scroll-verhaal en het grootste risico. Het gedurfdste haalbare concept won.

Dat concept, plus het palet (ijsvogel-teal + koper op inkt-zwart), de typografie en de verboden patronen, werden vastgelegd in een DESIGN.md vóór er ook maar één regel UI werd geschreven. Die lock is de belangrijkste anti-generieke stap.

Het bewegende beeld is geen video en geen 3D-model. Het is één fragment-shader die per beeldpunt duizenden keren door een 3D-ruisveld "marcheert" (raymarching) en het licht optelt dat onderweg wordt geraakt.

De truc voor snelheid: een bounding sphere. Stralen die het organisme missen, worden meteen gestopt, zodat het grootste deel van het scherm goedkoop blijft. Scroll en tijd sturen de uniforms (dichtheid, warp, camera, licht-fase).

De WebGL-laag draait enkel op desktop met voldoende vermogen. Daaronder ligt altijd een met de hand gemaakte CSS-gradient die het organisme benadert: dat is de instant-LCP, de mobiele versie en de reduced-motion-eindtoestand tegelijk.

Alle tekst zit op een leesbare "slab" die het bewegende licht afdekt, zodat het contrast overal AA haalt. Toegankelijkheid is een harde grens, geen bijzaak.

Na de eerste bouw ging de site drie keer door een fijne kam: pass 1 jaagt op defecten (spacing, contrast, timing), pass 2 verrijkt (diepte, micro-interacties, een terugkerend detail), pass 3 snoeit terug tot alles één stem spreekt. Pas daarna zag een mens de site.