Zo is GLOED gebouwd

GLOED is een fictief atelier voor gesmolten glas. Het idee: de site zelf koelt af. Bovenaan is het glas 1400 graden en vloeibaar, onderaan is het koud en stil. Alles op de pagina hangt aan die ene beweging.

Het concept

Scrollpositie wordt vertaald naar een heat waarde tussen 1 en 0. Die ene uniform stuurt de complete choreografie: de vorm van de blob, de kleur van de kern, de sterkte van de bloom, de intensiteit van het licht en de temperatuurmeter rechts in beeld. Het verhaal van het glasproces (smelten, vormen, koelen, stilstand) volgt exact dezelfde curve.

De blob

• Renderer: three.js WebGPURenderer met automatische WebGL-fallback, plus een statische CSS-fallback als beide ontbreken.
• Geometrie: een icosahedron met hoge subdivisie, vervormd in de vertex-shader via TSL met mx_fractal_noise_float. De amplitude is gekoppeld aan heat: heet golft, koud verstilt.
• Normalen: na displacement kloppen de originele normalen niet meer. Ze worden numeriek herberekend door twee buurpunten op de sphere ook te displacen en het kruisproduct te nemen.
• Materiaal: een MeshPhysicalNodeMaterial. De emissive is een heat-ramp van sintelrood naar bijna-wit op basis van de noise-waarde, met een fresnel-randgloed. Koud schuift het materiaal naar donker glas: lage roughness, clearcoat, koele fresnel-rand.
• Post: bloom via BloomNode, met een sterkte die meedooft met de temperatuur.

Typografie en kleur

• Display: Syne 800, breed en eigenzinnig, extreem groot in de hero.
• Body: Archivo, nuchter tegenwicht.
• Data en meter: IBM Plex Mono met tabular numerals.
• Palet: koolzwart #0B0907, sintelrood #FF3D00, gloed #FFB566, heet wit #FFF6EC, as #9A8D80.

Details die het dragen

• De temperatuurmeter telt live af van 1400 naar 20 graden en is de rode draad door de pagina.
• De blob verschuift langzaam uit het centrum naarmate de inhoud belangrijker wordt.
• prefers-reduced-motion bevriest de noise-animatie en de parallax, de scroll-koppeling blijft (die is gebruikergestuurd).
• Fonts zijn self-hosted woff2, er zijn geen externe runtime-dependencies.

Credit

Site 01 van 25 in de Vormula demo-reeks. Concept, code en copy: Claude (Fable 5), in opdracht van Vormula Studio.