Naar inhoud
FFrosthaven Lab

15 — 17 varianten

Shaders

GPU-shaders in WebGL2: mesh gradient, liquid metal, dithering, warp, metaballs, god rays, voronoi, halftone, plasma, iridescent. Waar CSS ophoudt en echte kleur begint.

Mesh gradient

webglhero
mesh gradient

Vier kleurpunten die om elkaar heen bewegen, gewogen per pixel. Dit is de shader die je in negen van de tien gevallen wilt: kleurrijk, traag genoeg om niet af te leiden, en er is geen foto voor nodig. Vervangt de CSS-mesh uit Backgrounds zodra je echt kleur wilt.

Liquid metal

webglpremium
liquid metal

Domain warping (fbm in fbm in fbm) met een harde band-functie erover, wat vloeibaar metaal geeft. Het duurste effect uit de hele catalogus. Achter een logo of één woord; nooit onder leestekst.

Dithering (Bayer 4×4)

webglretro
bayer dithering

Kleurverloop teruggebracht tot vijf niveaus met een geordende Bayer-matrix. Dit is de techniek achter Clairvo: het puntenveld is het ontwerp, niet een filter eroverheen. Sterke signatuur, werkt op elk formaat, kost bijna niets.

Warp

webglkleur
warp

Iteratieve sinus-verplaatsing van het coördinatenstelsel. Vier rondes is genoeg; meer en het wordt soep. Kleurrijk en organisch, past bij creatieve merken en festivals.

Metaballs

webglspeels
metaballs

Zes bollen die versmelten zodra ze elkaar naderen. Speels en tactiel; goed voor ijssalons, kinderopvang en alles wat vriendelijk moet ogen.

God rays

webglsfeer
god rays

Lichtbundels uit één punt buiten beeld, met ruis over de hoek zodat ze niet als een taartdiagram ogen. Wellness, retreats, kerken, alles met licht als thema.

Voronoi

webgllicht
voronoi

Cellen met bewegende zaadpunten. Een van de weinige shaders die óók op een lichte achtergrond werkt, dus bruikbaar als de klant geen dark mode wil. Past bij labs, techniek en biotech.

Neuro noise

webgltech
neuro noise

Acht keer roteren, schalen en optellen van een sinusveld. Levert vezelachtige, hersen-achtige structuren. AI, data, security.

Swirl

webglkleur
swirl

Poolcoördinaten met een hoek die meedraait met de straal. Fel en draaierig; als achtergrond achter één woord, niet achter een menu.

Waves

webglrustig
waves

Zes gekleurde lijnen met eigen frequentie en fase. De rustigste shader hier: genoeg beweging om te leven, niet genoeg om af te leiden. Bruikbaar achter een sectiekop.

Grain gradient

webglprint
grain gradient

Kleurverloop met echte per-frame korrel in de shader, niet een SVG-overlay. Het gedrukte, tastbare gevoel uit de trendlijst, maar dan zonder de banding die CSS-gradients geven.

Halftone CMYK

webglprint
halftone cmyk

Vier dot-rasters onder de klassieke drukhoeken (15°, 75°, 0°, 45°) die samen een kleurbeeld vormen. Redactioneel en grafisch; past bij drukkerijen, magazines en galerieën.

Smoke ring

webgllogo
smoke ring

Ring waarvan de straal per hoek door ruis wordt verstoord. Bedoeld om een logo of icoon in het midden te zetten; de ring doet het werk, het merk blijft leesbaar.

Plasma

webglretro
plasma

Vier opgetelde sinussen door een cosinus-palet. De oudste demoscene-truc die er is en nog steeds de goedkoopste manier om vol kleur te vullen. Vier regels code.

Iridescent / oil slick

webglpremium
iridescent

Dunne-film-interferentie: de kleur volgt uit de laagdikte, precies zoals bij olie op water of een zeepbel. Luxe en parelmoer; cosmetica, sieraden, mode.

Cursor fluid

webglinteractief
beweeg je muis

De lichtbron in de shader volgt je muis, met ruis eroverheen zodat het vloeistof lijkt in plaats van een lamp. Beweeg je muis over dit vlak. De uniform u_mouse is alles wat je nodig hebt om een shader interactief te maken.

De regels bij shaders

performanceverplicht

rAF stopt buiten beeld

IntersectionObserver, rootMargin 120px

DPR afgekapt op 1.5

4K rendert 4× pixels voor nul winst

reduced-motion

u_time vastzetten op één frame

Fallback zonder WebGL2

CSS-gradient, nooit zwart vlak

Een shader is een GPU-programma dat elke frame elke pixel opnieuw berekent. Vier maatregelen zijn niet optioneel: stop de render-loop buiten beeld, kap de pixel-ratio af op 1.5, respecteer prefers-reduced-motion met een stilstaand frame, en lever een CSS-fallback voor apparaten zonder WebGL2. Zonder die vier levert een shader-hero een warme laptop en een slechte Lighthouse-score op.