Elke sectie hier is een zelfstandig, herbruikbaar startpunt — met eigen typografie, motion en karakter. Previews zijn live: wat je ziet is exact wat je krijgt.
Zeer lichte, kalme fysiohero met een grote zachte gradient-blob die achter de content traag van vorm morpht en rustig ademt via een scale-loop, met een rustige serif-H1 en één duidelijke intake-CTA.
Schemerige berggidsen-hero met drie diepte-lagen (luchtbeeld, bergbeeld met mask-verloop en voorgrond-gradient) die op muisbeweging en scroll met verschillende snelheden parallax bewegen, met de H1 tussen de lagen.
Deep-navy corporate hero voor advisory, finance en professional services: cinematic center met serif-accenten, gapless bento-strip (beeld-parallax, dienst-carrousel, invert-hover CTA-tegel) en brede glasbalk-nav.
Warme lichte koffiebranderij-hero met een zelf-typende regel boven de H1 die de dagelijkse batch typt en wist met knipperende cursor, naast twee overlappende polaroids met rotatie en zachte float.
Ingelijste full-bleed fotohero voor hoveniers, bouw en buitenbedrijven: de foto als groot afgerond canvas met de navigatie erin, content op het beeld, reviewchip in de CTA-rij en een polaroid-kaart die over de framerand valt.
B2B-hero voor een distributeur van Italiaanse ijsmachines: grote full-bleed machinefoto, diagonaal donkerblauw panel met tricolore-bies langs de schuine rand, merkenrij van geïmporteerde fabrikanten en panel-intro vanaf links.
Warme lichte hero voor een bloemenatelier waarin een roterend woord (bruiloften/afscheid/elke week) elke 2,8s via een verticale mask-slide wisselt, naast een verticale beeldstrook met trage crossfade.
Horeca-hero voor een ijssalon: donkerblauwe avondsfeer met subtiele Italiaanse tricolore-accenten, boogvenster met parallax, zwevende scoop-cirkels, smaken-marquee en open-tot-chip. Fraunces serif geeft het een ambachtelijk karakter.
Full-bleed fotohero voor transport, logistiek en industrie: Ken Burns-intro, scroll-parallax op de achtergrond, en drie glass quick-link kaarten die over de sectiegrens heen vallen (het overlake-effect).
Industriële B2B-hero: licht staalpalet met hydrauliek-rood, links de belofte, rechts een 2x2 grid van productcategorie-tegels met hover-lift, en onderin een calamiteitenstrip met radar-puls en direct telefoonnummer.
Full-bleed slider-hero voor schilder-, bouw- en installatiebedrijven: drie sectoren als klikbare tabs met voortgangsbalk, crossfade + Ken Burns per slide, per-slide projectcaption en scroll-parallax.
Chique lichte makelaarshero met een werkende demo-zoekbalk (plaats-invoer, Koop/Huur-pills en een filterende suggestielijst) boven een breed pandbeeld in afgerond kader met scroll-parallax.
Lichte bedrijfshero voor bouw, techniek en industrie (NL copy): editorial split met double-bezel beeldframe, scroll-parallax, roterende projectkaart in glass, klantenstrook en gesplitste pill-nav.
Lichte split-CTA: links de tekst, rechts een belafspraak-kaart met dag- en tijd-pills; de knop vult live 'Bel mij dinsdag om 14:00' en activeert pas na beide keuzes, met wis-link.
Donkere lage full-width fotostrip met nachtelijke camerabeeld, donkere wash en trage Ken Burns: links de 24/7-belofte, rechts een bel-knop en een plan-een-monteur-knop met bevestiging.
Interactieve keuzehulp (leadgen): drie vragen met keuze-pills sturen live een advieskaart aan met machine, foto en offerte-CTA. Afgesloten met een donkere CTA-balk met tricolore-bies. Light mode, sluit aan op hero Cremona Macchine.
Lichte 2-staps mini-offerte in één kaart: kies het type werk via chips, vul dan naam en telefoon; GSAP schuift de stappen met een voortgangsstreepje en demo-bevestiging.
Brede, donkere, lage CTA-bannerstrip (het patroon dat tussen lichte contentsecties door loopt): bg-foto met parallax, radar-puls, directe belknop en online-melden-link.
Donkere lage full-width strip met een echt tikkende aftelklok naar de eerstvolgende zaterdag om 10:00, waarbij elk cijfer met een slide-flip omrolt, plus een inschrijf-CTA.
Licht met één donker vlak: een gigantische lime CTA-knop met magnetische physics (gsap.quickTo volgt de cursor en veert terug) boven een ambient gloed die traag met de muis meebeweegt.
Donkere full-width CTA-banner met werkplaatsfoto, trage Ken Burns-zoom en parallax-scrub, warme amberkop met offerte-knop en directe telefoonlink.
Lichte split-CTA met een rekenkaart: een m²-slider, verdieping-stepper en lift-toggle sturen een richtprijs aan die soepel omhoog telt, met een knop voor een exacte offerte.
Lichte split-CTA met een gele NL-kentekenplaat die zichzelf naar XX-99-XX formatteert; na de check verschijnt een demo-uitslag met APK-datum en een knop om de keuring te plannen.
Donkere lage full-width strip tussen lichte content: links de vraag naar de dakopbrengst, rechts een postcode-veld dat zichzelf formatteert; na een geldige invoer wisselt de strip naar een groene succes-state met dakcheck-CTA.
Blauwdruk-esthetiek op licht ruitjespapier: een inline SVG-lijntekening van een voorgevel die zichzelf tekent via stroke-dashoffset met scroll-scrub, naast een kort manifest en dunne maataccenten.
Gepinde horizontale scroll-geschiedenis: vier tijdvakken (1908, 1962, 1998, vandaag) schuiven met scrub voorbij met een voortgangslijntje onderin; op mobiel een gewone verticale stapel zonder pin.
Een cirkelvormig venster waarin het beeld per processtap wisselt met een roterende sweep, naast vier klikbare stappen (boon, branden, malen, reep) met auto-advance elke vijf seconden en een voortgangsring.
Servicebelofte-sectie: links het verhaal met drie beloftes op tricolore-dots en storings-CTA, rechts twee verticale beeld-rails die traag tegengesteld doorlopen (pauzeert on hover). Light mode, onderdeel van de Cremona-homepage.
Scrollytelling met een sticky verticale dieptemeter die progress-gebaseerd meevult terwijl drie cursusblokken voorbij scrollen en de achtergrond per niveau een tint dieper blauw wordt.
Card-stacking van drie pastelkleurige waarden-kaarten die met sticky positionering en een lichte krimp/offset per kaart op elkaar stapelen terwijl je erdoorheen scrolt; geen beelden.
Diptiek van twee panelen (werkplaats binnen / service op locatie) die uitzetten bij hover of klik, met onthullende detailtekst per paneel en een feitenregel eronder. Light industrieel.
Gepinde scroll-sectie: het statement links blijft staan terwijl drie beloftes met beeld rechts voorbij scrollen (ScrollTrigger pin). Sluit qua stijl naadloos aan op hero Horizon Full-bleed.
Scrollytelling met een sticky portretkader dat cross-fadet terwijl drie teamleden met naam, rol en quote rechts voorbij scrollen; het actieve blok bepaalt de foto (ScrollTrigger).
Een gestileerde wereldkaart uit CSS-stippen (JS-gegenereerd raster) met vijf pulserende vestigings-markers die on hover een tooltip met stad en talen tonen, naast een kort verhaal.
Een seizoens-selector met vier knoppen (lente, zomer, herfst, winter) die beeld, tekst en de accentkleur van de sectie met een crossfade wisselen, elk met twee zinnen over het werk in de wijngaard.
Verticaal quote-wiel voor een interieurstyliste; de actieve klantquote staat groot en scherp, de rest vervaagt erboven en eronder.
Pakketten-vergelijker met drie hairline-kolommen (middelste uitgelicht met accentrand en 'Meest gekozen'-chip); een Maand/Jaar-toggle laat de prijzen met een mask-slide wisselen, waarbij het jaartarief de maandprijs doorstreept en de besparing toont.
Twee grote tabs voor een stoombrouwerij: ingrediëntenlijst en brouwstappen wisselen met een koperen mask-slide.
Editorial leescolumn (max 62ch) met grote dropcap en een pull-quote die tijdens het scrollen woord voor woord van grijs naar accentblauw scrubt; op desktop loopt een zij-notitie sticky mee naast de kolom.
Rustige longform over wachtlijst en eerste gesprek met drie klikbare voetnoot-nummers die inline onder de alinea openklappen.
Werkwijze-tijdlijn waarvan de lijn zich al scrollend tekent (scrub); stappen lichten op zodra de lijn ze passeert. Sluit qua stijl naadloos aan op hero Sector Slider.
Sectoren als grote openklappende rijen (één tegelijk, plus-morph naar kruis) met per sector een thumb, twee zinnen vakkennis en een caselink. Light industrieel.
Juridische begrippenlijst voor een notariskantoor; letter-chips filteren acht termen die soepel weg- en terugschuiven.
Editorial manifest waarvan de woorden één voor één oplichten terwijl je scrolt (SplitType + scrub), op Lenis smooth scroll. Groot serif, licht linnen-palet — voor merkverhalen en over-ons pagina's.
Horizontale strip van twaalf maanden voor een imkerij; de echte huidige maand is bij laden actief met honing-dot en de tekst wisselt met een mask-slide.
FAQ-accordion als hairline-rijen waar het plusje naar een kruisje draait en het antwoord soepel openklapt (grid-template-rows 0fr→1fr); slechts één tegelijk open, met een navy 'bel ons'-blokje naast de kop.
Statuspaneel voor IT-beheer met pulserende status-dots, uptime-balken die bij het in beeld scrollen vullen (scaleX) en een live 'laatste controle'-klok die elke minuut ververst.
Sticky machine-showcase: het beeldvenster links (met tricolore-bies) crossfadet automatisch mee terwijl je rechts langs drie machines met spec-chips scrolt. Light mode, onderdeel van de Cremona-homepage.
Interactieve dak-zelfcheck met vijf aanvinkbare vragen die een halfronde SVG-boogmeter vullen (stroke-dashoffset); vanaf drie vinkjes onthult zich onderaan soepel een advies-CTA-balk.
Interactieve driegangen-menubouwer waarbij keuze-chips per gang live een sticky samenvattingskaart vullen met de gerechten en een prijs per persoon die soepel omhoog en omlaag telt.
Dienstenlijst als vier grote rijen waar een radiale spotlight de muis volgt (--mx/--my via pointermove); de dienstnaam gloeit accentkleurig op waar de spotlight staat en een pijl-orb schuift in bij hover. Op touch gewoon nette rijen.
Vier behandel-tegels die bij hover (desktop) of tik (touch) in 3D omflippen naar een donkere achterkant met vast tarief, duur en plan-knop; strak licht design met één teal-accent.
Sleepbare vitrine-strip met boogvormige smaakkaartjes (scroll-snap + drag), tricolore prijsdots en doorgestreepte 'uitverkocht'-smaken. Sluit qua stijl naadloos aan op hero Gelateria Arco.
Gapless bento-grid (4 kolommen, dense flow) met een grote beeldtegel met hover-zoom, twee diensttegels met pijl, een traag lopende woord-marquee en een donkere CTA-tegel die bij hover met een wipe naar licht inverteert. Wiskundig sluitend, geen lege cellen.
Geen kaartengrid maar grote serif-rijen met een zwevend beeldkaartje dat de cursor volgt (hover-reveal). Sluit qua stijl naadloos aan op hero Boardroom Bento.
Interactieve systeemtour: vier pulserende hotspot-punten op een groot installatiebeeld sturen een infopaneel aan (klik of auto-play) — elke discipline van pomp tot besturing uitgelegd. Light industrieel.
Prijslijst als rijen met links een verticale rail waarop één dot met gsap.quickTo soepel naar de actieve behandeling glijdt, terwijl de prijs van die rij kort vanaf nul optelt.
Horizontale accordion i.p.v. een kaartengrid: drie diensten als verticale panelen die openklappen bij hover/klik, met foto, tekst en link. Sluit qua stijl naadloos aan op hero Structura Split.
Twee grote sieradenbeelden waarover een ronde vergrootglas-lens de cursor volgt en het hi-res bronbeeld op 2,6x uitvergroot; op touch netjes verborgen.
Twee tegengesteld lopende beeld-marquees met warme bakkerijbeelden die on hover pauzeren, met een centrale serif-tekstregel ertussen; marquees stoppen bij prefers-reduced-motion.
Referenties als grote serif-quote met avatar-selector (klikbaar, auto-advance) en daarboven een naam-ticker van klantzaken met tricolore-dots. Light mode, onderdeel van de Cremona-homepage.
Drie verhaal-tabs met bruidsparen die een overlappende collage van drie beelden op verschillende maten plus een citaat wisselen, met gestaggerde GSAP-crossfade.
Telefoon-mockup met notch waarin drie keramiekbeelden verticaal auto-loopen als een reel via CSS-keyframes (pauze on hover), naast kop, tekst en een volg-knop.
Masonry-galerij op CSS-columns (3→2→1) met filterchips die per categorie in- en uitfaden en herschikken via GSAP, plus hover-zoom met opduikende caption-chip.
Interactieve voor/na-vergelijker met sleepbare scheidingslijn (pointer + touch), chips en een subtiele wiebel-affordance bij binnenkomst. Sluit qua stijl naadloos aan op hero Canvas Kader.
Acht zwart-witte flash-tegels verstrooid met bij load bepaalde random rotaties; een knop schudt alles opnieuw met GSAP-stagger en hover trekt een tegel recht en haalt het filter eraf.
Swiper-carrousel met slides op eigen breedte die buiten de container doorlopen, parallax-captions met klantquotes, custom teller, pijlen en voortgangsbalk. Licht editorial palet met Zodiak serif.
Eén extra breed interieurbeeld in een venster dat je met de pointer horizontaal pant, met uitrollend momentum en een dun voortgangsbalkje dat meebeweegt.
Merkenportfolio als 3D-fliptegels: hover of tik draait elk merk om naar de productlijn met link; de rode plus-tegel verwijst naar het volledige overzicht van 25 merken.
Filmstrip van vier liggende beelden die een eigen fullscreen mini-lichtbak openen met GSAP zoom-in, pijlen, teller en toetsenbord- en Escape-bediening.