Zo is Eau gebouwd

Een parfumhuis dat geur in kleur denkt. De hele site is één vloeiend kleurveld dat per compositie van wereld verandert: lila onthaal, amber, vetiver-groen, iris-violet. De tekst zweeft er op wolkwitte kaarten boven.

Het kleurveld

• Eén fullscreen fragment-shader in rauw WebGL, zonder frameworks. Honderd regels JavaScript, één driehoek die het scherm bedekt.
• De vloeistof is domain warping: fbm-ruis die zichzelf tweemaal vervormt (fbm(p + 2.4 · fbm(p + 2.6 · fbm(p)))), het klassieke Inigo Quilez-recept. Traag geanimeerd oogt het als parfum dat in water valt.
• Elke geurwereld is een palet van drie kleuren als uniforms. Een IntersectionObserver bepaalt welke sectie in beeld is en de kleuren lerpen er in ruim een halve seconde naartoe.
• De muis duwt zachtjes in het warp-veld: aanraken beweegt de geur.

Het ontwerp

• Type: Cormorant licht en cursief als parfum-taal, Jost voor de rest. Extreem dunne contrasten, veel wit.
• De notenpiramides (kop, hart, basis) staan op blur-kaarten zodat de leesbaarheid nooit afhangt van het veld erachter.
• Bij prefers-reduced-motion staat het veld stil op een mooi moment; de kleurwissel per sectie blijft, want die volgt de scroll van de gebruiker.

Credit

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