Naar inhoud
FFrosthaven Lab

02 — 15 varianten

Heroes

Het eerste scherm. Vijftien opzetten, van shader-hero tot full-bleed video die elk een ander soort bedrijf passen, van rustig-zakelijk tot volledig cinematisch.

Shader-hero

webglkleur
digital studio

Kleur die niet uit een foto komt

Vier kleurpunten op de GPU, zestig frames per seconde, nul kilobytes aan beeld.

Volledige kleur op de GPU in plaats van een foto of CSS-gradient. Dit is het antwoord als een klant geen bruikbaar beeldmateriaal heeft maar de site wel moet knallen. Zet de tekst op een donkere sluier of een glasplaat, anders wint de achtergrond het van je boodschap.

Shader achter glas

webglglass

Glas over kleur

De backdrop-blur maakt een drukke shader leesbaar zonder dat je de kleur verliest.

Iridescente shader met een glasplaat erover. De blur maakt van een druk kleurenveld een rustige achtergrond, zodat je er wél tekst op kwijt kunt. De combinatie die de meeste award-sites gebruiken.

Gecentreerd met gradient-glow

klassiekveilig
sinds 2011 · Marina Alta

Onderhoud dat u niet hoeft te onthouden

Tuin, zwembad en woning het hele jaar door verzorgd, ook als u er niet bent.

De standaardkeuze als je nog niets over de klant weet. Werkt voor elk archetype, is snel, en de tekst is altijd leesbaar.

Split met beeldkolom

conversieb2b
4,9 · 87 reviews

Uw woning verkopen in Dénia

Gratis waardebepaling binnen 48 uur, in het Nederlands.

pand

Gelijkwaardig aan full-bleed, en voor makelaars, vakbedrijven en klinieken vaak sterker: de CTA staat direct naast het bewijs. Zes eisen, en je moet ze alle zes halen. Beeldkolom bloedt naar de viewportrand (geen marge, geen rounded, geen shadow). Verdeling asymmetrisch, nooit 50/50. Kolom loopt over de volle hero-hoogte. Kop blijft groot. Rating of keurmerk in de tekstkolom, anders is er geen reden voor dit patroon. Onder lg stapelt hij full-bleed. Haal je er één niet, neem dan full-bleed.

Full-bleed beeld met overlay

sfeerhoreca

cucina italiana · valència

L'Alquimista

Beeld vult het scherm, donkere gradient houdt de tekst leesbaar. Restaurants, hotels, spa's. Verplicht: een echte gradient-overlay, geen losse opacity op de foto.

Aurora

csssfeer

Rust in beweging

Kleurvelden die langzaam over elkaar heen schuiven.

Traag draaiende kleurvelden achter een blur. Geeft diepte zonder foto, dus ideaal als de klant geen bruikbaar beeldmateriaal heeft.

Cursor spotlight

jsdesktop

Beweeg je muis over dit vlak

De lichtbron volgt de cursor en licht het raster eronder op.

Radiale lichtvlek volgt de muis over een raster. Technisch en modern; op mobiel valt het weg, dus zorg dat de statische versie ook staat.

Parallax lagen

scrolljs

Costa Blanca

scroll de pagina · lagen bewegen mee

Achtergrond, titel en bijschrift bewegen op verschillende snelheid mee met de scroll. Scroll de pagina om het te zien. Houd de factor laag (max 60px) anders wordt het misselijkmakend.

Raster met noise

csstech

elektrotechniek

Installaties die het gewoon doen

24/7 storingsdienstNEN 1010Marina Alta

Technisch raster plus filmische korrel. Past bij software, installatietechniek en industrie. De noise-laag verbergt banding in gradients.

Kinetische big type

typografiebold
UTOPIA

Boetiek in Dénia. Merken die je hier niet verwacht.

De naam van het bedrijf als beeld, in viewport-schaal. Alleen voor merken met een korte, sterke naam. Test op 320px breed: lange namen breken lelijk.

Bento hero

layoutmodern

Zwembadonderhoud, jaarcontract

werk
210baden in beheer

Titel, beeld, cijfer en review in één rastervlak. Vertelt in één scherm meer dan een klassieke hero, maar vraagt om echte content: met placeholders valt hij door de mand.

Hero met logo-marquee

social proof

Vertrouwd door bouwers in heel Alicante

Van eenmanszaak tot aannemer met veertig man.

VerhoevenCasa NovaMarina AltaDelgadoNordwerkVega BauVerhoevenCasa NovaMarina AltaDelgadoNordwerkVega Bau

Klantlogo's schuiven direct onder de fold door. Zet ze pas neer als je er minstens vijf hebt, anders benadrukt het juist de leegte.

Tekst als beeldmasker

cssbold

DÉNIA

De letters zijn een venster op de foto of video erachter. Spectaculair, maar controleer altijd de fallback-kleur voor browsers zonder background-clip.

Scroll-shrink product

scrollsaas

Scroll voor het effect

app preview

Het scherm kantelt rechtop terwijl je scrollt. Bedacht voor SaaS-dashboards; bij een dienstverlener zonder product is er niets om te tonen.

Video-hero met poster

videohoreca

poster verplicht · muted + playsInline

Autoplay, muted, playsInline en altijd een poster-afbeelding. Zonder poster ziet de bezoeker op trage verbindingen een zwart vlak; dat kost je de LCP.