Flytende shader i heroen
Bakgrunnen på forsiden er ikke et bilde eller en video. Det er et lite program som kjører på grafikkortet ditt, 60 ganger i sekundet.
Heroen tegnes av en fragment-shader skrevet i GLSL, uten Three.js eller andre rammeverk. Den legger flere lag med «domain warping» oppå hverandre: støy som forskyver støy, som igjen forskyver koordinatene. Resultatet er en masse som flyter som smeltet metall.
Fargene hentes live fra designsystemets OKLCH-tokens. Når du bytter tema i docken, leser shaderen aksentfargene på nytt og blander dem inn uten å laste siden.
Shaderen pauser når heroen er utenfor skjermen, tegner med redusert oppløsning på svake enheter og står helt stille hvis du har slått på «redusert bevegelse».
vec2 q = vec2(fbm(p + t*.12), fbm(p + 5.2));
vec2 r = vec2(fbm(p + 4.*q + 1.7), fbm(p + 4.*q + 9.2));
float f = fbm(p + 4.*r);I koden: components/fx/ShaderHero.tsx