Naar inhoud
FFrosthaven Lab

07 — 18 varianten

Backgrounds

Mesh gradients, aurora, grids, meteors, beams, noise en scanlines. De laag die sfeer maakt zonder de content te storen.

Mesh gradient

css

mesh gradient

Meerdere radiale kleurvlekken over elkaar. De veiligste sfeermaker: geen JS, geen beeld, en hij schaalt naar elk formaat.

Aurora blobs

cssanimatie

aurora

Zelfde idee, maar de vlekken draaien traag. Achttien seconden per omwenteling is het minimum, anders wordt het onrustig.

Dot grid

css

dot grid

Puntenraster met fade naar onder. Het rustigste patroon dat er is; gebruik het onder tekstsecties waar een gradient te veel zou zijn.

Retro grid

css3d

retro grid

Perspectivisch raster dat naar de horizon loopt. Synthwave; past bij nachtclubs en gaming, verder bijna nergens.

Flickering grid

css

flickering grid

Cellen die willekeurig aan en uit gaan. Technisch en levendig; houd de opacity laag, anders leidt het af van de content.

Interactive grid

jshover

beweeg over het raster

Cel licht direct op en dooft langzaam uit. Het verschil zit in de asymmetrische timing: duration-0 bij binnenkomst, 500ms bij vertrek.

Meteors

css

meteors

Schuine lichtstrepen die overtrekken. Mooi achter een donkere hero; posities vast in de code zetten, niet random renderen (hydration).

Particles

css

particles

Zwevende stipjes met verschillende snelheden. Goedkoper dan een canvas-oplossing en op mobiel merkbaar zuiniger.

Noise / film grain

csstextuur

noise overlay

SVG-turbulence als data-URI over de hele sectie. Verbergt banding in gradients en geeft een tastbaar, gedrukt gevoel. Kost nul netwerkverkeer.

Light beams

css

light beams

Verticale lichtbundels van boven. Theatraal; werkt goed achter een productfoto of een enkele CTA in het midden.

Spotlight cone

css

spotlight

Eén schuine lichtkegel vanuit de hoek. Het meest gebruikte hero-effect van de afgelopen jaren, en nog steeds goed omdat het niets afleidt.

Wavy divider

svg

wavy divider

Golvende scheiding tussen twee secties. Gebruik een SVG-pad met preserveAspectRatio none, dan schaalt hij mee zonder te vervormen.

Ripple rings

css

Concentrische ringen die uitdijen. Voor een locatie-marker, een live-indicator of een 'we zijn bereikbaar'-blok.

Light rays

css

light rays

Waaier van stralen vanuit één punt. Zonlicht-gevoel; goed voor wellness, tuin en alles wat met buiten te maken heeft.

Warp / vortex

cssconic

warp

Draaiend stralenpatroon via conic-gradient. Krachtig achter een enkel woord; boven de 8 seconden per omwenteling blijft het draaglijk.

Zwevende orbs

css

floating orbs

Grote vervaagde bollen die op en neer drijven. Rustiger dan aurora omdat de vorm herkenbaar blijft; goed voor wellness en zorg.

Scanlines / CRT

cssretro

scanlines

Horizontale lijnen plus een lopende scanbalk. Nichesfeer: retro gaming, arcade, techno. Bij twijfel niet doen.

Topografische lijnen

svg

topografie

Hoogtelijnen als achtergrondpatroon. Past bij vastgoed, wandelroutes, architectuur en alles met terrein.