Zo is het Getijde Instituut gebouwd

Een fictief oceanografisch instituut. Het concept: de bezoeker begint met de ogen op zeeniveau, tussen de golven, en eindigt loodrecht boven een meetraster. De site kantelt letterlijk van ervaring naar meting, precies wat een meetinstituut doet.

De zee

• Honderdduizend punten: een raster van circa 100.000 puntjes in een THREE.Points geometrie, met een eigen GLSL ShaderMaterial en additive blending.
• Gerstner-golven: vijf gesuperponeerde Gerstner-golven in de vertex-shader verplaatsen punten ook horizontaal richting de golfkam, wat het karakteristieke steile golffront geeft. Geen vlakke sinus-zee.
• Cursor-rimpel: de muispositie wordt via een raycast op het watervlak geprojecteerd en geeft een lokale radiale rimpel in de shader.

De kanteling

• De camera volgt een kwadratische bezier van laag boven het water naar recht erboven, aangedreven door de scrollpositie met exponentiële smoothing.
• Tegelijk mengt een uMeetmodus uniform het kleurmodel in de fragment-shader van oceaan (dieptekleur, schuimkoppen) naar waterkaart: contourbanden op hoogte, een graticule-raster, en vier pulserende boei-gele meetstations.
• De vier stations op de kaart zijn dezelfde vier uit de stationslijst in de content. Het verhaal en de shader delen hun data.

De klok

Rechtsboven tikt een NAP-waterstand, opgebouwd uit twee harmonischen (maansgetij M2 en zonsgetij S2) op een versnelde klok. Stijgend of dalend volgt uit de afgeleide, niet uit een timer.

Typografie en kleur

• Display: Bodoni Moda, een didone die het negentiende-eeuwse instituut oproept, met de italic als levend contrast.
• Body: Public Sans. Data: Space Mono.
• Palet: ink #02191F, cyaan #19D3F5, zeeglas #8FE8DC, schuim #EAF9FC, boei-geel #FFB020 als functioneel accent voor metingen.

Credit

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