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.
Fullscreen video-hero voor een premium sanitairmerk naar de hotbath-blauwdruk: minimal glass-nav (menu links, gecentreerd wordmark, dealer + zoeken rechts), watertextuur-video met één rustige claim, het signatuur-pijlknopje dat 45° draait bij hover, en een finishes-regel met PVD-dots.
Persoonlijke, media-rijke tandartshero in zachte blush-tinten: zwevende beeldcollage met mouse-parallax, cursieve welkomstregel, geruststellende copy ('Eerst op je gemak, dan pas de stoel'), reviewregel en bereikbaar-strook.
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.
Kalme video-carrousel hero naar de Overlake-blauwdruk: drie natuurvideo's met wisselende serif-statements en tekst-overlay, twee-laags navigatie (utility + hoofdnav), voortgangs-dots, open-lesdag-regel en een traag overglijdende lijnvogel.
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.
Full-bleed serverhal-hero waarin de kop zichzelf decodeert — letters cyclen door willekeurige tekens en klikken links naar rechts vast — met live status-chip, glazen meterkaartje en rasteroverlay.
Lichte split-hero voor een outdoor-evenementenbureau met links de content en rechts een strandbuggy-video in een afgerond kader met live-hoekchip; de video krijgt na de intro-timeline een subtiele scroll-parallax binnen zijn venster.
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.
Warme lichte hero voor een platenzaak met een draaitafel als hoofdbeeld: druk op play en de vinylplaat gaat draaien, de toonarm zakt en een now-playing-kaart wisselt door de bak met platen.
Full-bleed torenkraan-hero tegen de avondlucht met kinetische kop: de kop staat per woord in maskers en de woorden driften bij scroll met verschillende snelheden uiteen, met glass beschikbaarheids-kaartje, hijslast-chip en schuine waarschuwingsstreep.
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).
Donkere, warme hero met een op canvas flakkerende kaarsvlam die een meebewegende gloed over de mask-reveal-titel werpt en op de aanwijzer reageert als op tocht.
Maritieme hero met full-bleed werffoto waarover de reuzenkop half over een detailkader valt: buiten het kader wit, binnen het kader signaal-geel, pixel-perfect uitgelijnd via een dubbele clip-techniek met tegengestelde parallax.
Lichte kust-hero met een canvas-windveld dat op de aanwijzer reageert, een windvaan en een live windrichting-suggestie op basis van dag en uur, met een mask-reveal-titel.
Luxe autolease-hero die mensen vóór auto's zet: donker antraciet met champagne, groot adviseursportret met naamregel, de auto slechts als klein overlappend tip-kaartje, overlappende teamkoppen en een beloftenstrook. De site zelf is licht — de demo-vervolgsectie toont de overgang.
Hero waarin het merkwoord ink op papier staat, half achter de fauteuil verdwijnt en er onder crème weer voor komt, met een subtiele scroll-scrub die de lagen uit elkaar drijft.
Cinematische donkere sterrenkunde-hero met een full-bleed nachtvideo van een spiegelend bergmeer die via IntersectionObserver alleen in beeld afspeelt, serif mask-line-reveals, scroll-cue en een orb-play/pauzeknop.
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.
Full-bleed hero voor een volkssterrenwacht waarvan de hemel meeloopt met de echte klok: kleurverloop, zon- of maanstand in de boog en een canvas vol twinkelende sterren die feller worden naarmate het buiten donkerder is.
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.
Editorial hero met het DLM-jaartaleffect: een gigantisch serif-jaartal valt half over de foto — crème bínnen het beeld, ink erbuiten — en bij de scroll-parallax wandelt de kleurgrens door de cijfers (pixel-perfect gesynchroniseerde dubbele tekstlaag).
E-commerce hero voor een duurzaam tassenmerk: shop-nav met cart-badge, product-podium op een ronde sokkel met zwevende idle-animatie, kleur-swatches die het beeld wisselen, hangend prijskaartje en een USP-marquee.
Full-bleed hero met kartonproductie-foto en warme wash; de kop start als outline-tekst en vult woord voor woord met crème, met FSC-chip en een sample-doos-kaartje dat over de rand in de na-sectie valt.
Industriële hero voor een machinefabriek/plaatbewerker: licht koelgrijs met vonk-oranje, split met lasbeeld in kader (parallax + certificaat-chip), en een doorlopende capaciteiten-ticker met ruit-dots onderin.
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 brede lage strip met de claim 'Zien is voelen.' en een dealer-zoeker: een postcodeveld dat naar 1234 AB formatteert en bij verzenden een glass-resultaatkaart onthult met showroom, afstand en route-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.
Brede, lage donkere warm-plum CTA-strip tussen lichte demo-content: een zacht pulserende chip met resterende kennismakingsplekken, de uitnodiging voor een gratis kennismaking met koffie, en twee knoppen (roze pill plus ghost 'liever eerst appen').
Lage donkere espresso-bannerstrip met een weegschaal die zichtbaar doorslaat naar 'vers gebrand': hover de knop en er valt een boon in de schaal terwijl de balans verder tipt.
Slotbanner met een full-width foto onder een donkergroene overlay, één rustige serif-regel en drie knoppen naast elkaar: kennismaken, open lesdag en aanmelden.
Lage donkere bannerstrip met een klassiek split-flap vertrekbord dat door de letters ritselt en omslaat naar wisselende reisbestemmingen, met vertrektijd en status.
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.
Brede donkere lage CTA-strip met een datum-picker-lite van de drie eerstvolgende donderdagen (berekend via new Date), een orb-knop en een langzaam scannende lichtlijn over de strip.
Brede lage CTA-strip waarin de actiezin over de rand van het koffiebeeld valt via duale clip, en op hover schuift het beeldvlak zodat de kleurgrens voelbaar over de letters verspringt.
Brede donkere lage CTA-strip met een traag ronddraaiende zwaailicht-gloed op de achtergrond: kies een hijsdag in het datumveld en de strip geeft demo-gewijs haalbaar of krap terug, naast een oranje orb-belknop.
Donkere lage full-width strip waar een druk op de knop de lichtmasten in sequentie ontsteekt, het ijsvlak oplicht met glans en vonken, en daarna de openingstijden en het baanuur-tarief verschijnen.
Brede donkere spoed-CTA met traag roterende radar-sweep op de achtergrond, een marifoon/telefoon-knop en een 'Stuur je positie'-ghost voor stilliggende schepen.
Brede donkere lage terugbel-strip tussen lichte demo-content: belofte om binnen één uur terug te bellen, naam- en telefoonveld met champagne orb-knop en een demo-succes die de beltijd berekent (nu + één uur).
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.
Brede, lage donkere CTA-strip voor zeiljachtverhuur met een top-down oceaan-drone-video als achtergrond onder een teal wash, een boxed reservering-regel met orb-knop en losse play/pauze-orb, ingeklemd tussen lichte demo-content.
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.
Brede lage donkergroene strip met 10% welkomstkorting, e-mailveld met orb-verstuurknop en demo-succes, en rechts een langzaam roterend zegel met tekst op een cirkelpad (pauzeert bij reduced-motion).
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.
Brede lage donkere CTA-strip voor aanbestedingen met een deadline-datumveld dat direct laat zien of de inleverdatum haalbaar of krap is, met bijpassende call-to-action.
Brede, lage donkere CTA-strip 'Eerst voelen? Logisch.' met een traag roterend 3D-kartondoosje, een inline aanvraagformulier (bedrijfsnaam + e-mail) en demo-succesmelding, ingebed tussen lichte demo-content.
Brede, lage donkere CTA-strip met een bestand-drop-knop (sleep je STEP/DXF hierheen of klik) die een bevestiging met bestandsnaam toont, plus een bel-link; lichte demo-content erboven en eronder.
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.
Lichte lage full-width strip met een zachte canvas van opstijgende zeepbellen die de muis volgen; bij een geldige aanmelding barst er een bellenwolk open en bevestigt de strip dat het proefblok onderweg is.
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.
Rustige over-sectie met twee korte alinea's en een 2x2 fotogrid waarvan één beeld subtiel oversteekt, plus een lees-ons-verhaal-link.
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).
Over-ons voor een slagerij sinds 1953: groot beeld met kleiner gedraaid overlappend beeld en jaartal-zegel, naast roterende founder-quotes (auto-wissel met mask-slide, klikbare dots, pauze op hover).
Drie materiaal-rijen met percentagebalken die op scroll meevullen en optellende getallen, een parallax-sfeerbeeld en een repareerbaarheids-belofte met een naald-en-draad-lijn die zichzelf tekent (SVG stroke-draw).
Over-ons-sectie voor een verhuizer met een 3D-verhuisdoos die vanzelf ronddraait; sleep hem rond of kies een kant en elk kartonnen vlak toont een schakel in de verhuizing.
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.
Materiaaltransparantie met drie vullende balken (92% gerecycled karton, oplosmiddelvrije waterbasis-inkt en snijafval dat eierdozen wordt), tellers met in-beeld-vangnet, een parallax-sfeerbeeld en een zichzelf-tekenend kringloop-lijntje.
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.
Over-ons-sectie voor een zeilmakerij met een gelaagd grootzeil dat in 3D meekantelt met je muis of de gyroscoop van je telefoon — alsof het net de wind pakt, met parallax op telltales en label.
Rustige gecentreerde slottekst met een klein messing eyebrow-woord, één Clash Grotesk-regel, één alinea en de signatuur-pijlknop die 45° draait bij hover.
Maximaal rustige waardensectie met één serif-intro en vijf grote woorden; per waarde verschijnt de toelichtende zin bij hover of focus, en op mobiel staat die gewoon in beeld.
Verticaal quote-wiel voor een interieurstyliste; de actieve klantquote staat groot en scherp, de rest vervaagt erboven en eronder.
Lichte editorial tekstsectie waarin een sleutelwoord in de kop als door elkaar gehusselde lettertegels binnenkomt en zich bij het inscrollen tot de oplossing herschikt; tikken schudt het woord opnieuw en lost het weer op.
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.
Warme video+verhaal-sectie voor een kustfotograaf: een grote gouden-uur-video naast een editorial verhaalblok, met als uniek detail een dunne voortgangsring om de play/pauze-orb die de video-progress live meeloopt via timeupdate.
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.
Tekstsectie waarin een kassabon zich al scrollend uit de printer print: een geïtemiseerde bon laat tot op de cent zien waar je aankoop bij een kringloopwarenhuis naartoe gaat, met barcode en scheurrand.
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.
Lichte editorial leescolumn over het stemmen van een vleugel met een sticky stemvork in de marge die één keer resoneert wanneer de kernpassage in beeld komt: de vorkkop trilt gedempt, een sinusgolf tekent zich op de notenbalk en tikken slaat de kamertoon opnieuw aan met geluid.
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.
Geschiedenis-sectie met het DLM-jaartaleffect, twee keer gespiegeld toegepast: verhaal naast een foto waar het serif-jaartal half overheen valt (crème binnen het beeld, ink erbuiten), met parallax die de kleurgrens door de cijfers laat wandelen.
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.
Tekstsectie voor een wijnimporteur met een 'wijn van de maand'-kaart waarvan de proefnotities onder een gouden folielaag zitten: kras ze met muis of vinger vrij, of toon ze met één klik.
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.
Donkere collectie-spotlight met groot parallax-sfeerbeeld rechts, een rustige Clash Grotesk-kop links, één alinea en een glass-knop, afgezet met een messing hairline-kader.
Interactief pronkstuk waarin één ARC-kraanbeeld crossfadet tussen vier PVD-afwerkingen via grote swatch-knoppen (messing, gunmetal, chroom, mat zwart), met per afwerking een karakterzin en een PVD-regel.
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.
Vier behandelrijen (controle, vullingen, kronen, angst) met per rij een pill-toggle 'Wat we doen' | 'Hoe het voelt' waarbij de tekst met een mask-slide wisselt naar een geruststellende, concrete beschrijving, afgesloten met een NZa-tariefregel.
Sticky lijst met verticale lijn en meelopende amber ring-dot links; rechts scrollen vijf grote beelden voorbij met een overstekend wit infokaartje (terracotta-serif kop, tekst en outline-knop).
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.
Vier redundantie-tegels (stroom 2N, koeling N+1, security 24/7, carrier-neutrale connectiviteit) met mono-spec-labels en een schemalijntje dat per tegel bij hover oplicht en stroomt.
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.
Drie scheepsreparatie-diensten als brede rijen, elk met een mini-getijdenboog (SVG) die het vaarvenster tekent en bij hover oplicht met een gele kadelijn.
Lichte featuressectie met een rustig draaiend raderwerk van in elkaar grijpende tandwielen; een dienst kiezen geeft het raderwerk een escapement-impuls en licht het bijbehorende wiel op in messing.
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.
Technische specificatietabel voor twee pompseries met sticky tabelkop, zebra-hairlines, rij-highlight on hover, een metrisch/imperiaal-toggle die alle waarden live omrekent en een ISO-voetnoot.
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.
Donkere featuressectie waarin de diensten sterrenbeelden zijn op een draaibare sterrenkaart die op de stand van de echte datum en tijd staat; een dienst kiezen draait het bijbehorende sterrenbeeld onder de meridiaan en licht het op.
Feature voor een geluidsstudio waarbij elke dienst een eigen klank heeft; druk op afspelen en een WebAudio-analyser tekent de golf live op een canvas-meter, met een rustige rustgolf als het stil is.
B2B-downloadsectie met zoekveld en type-filterchips (Brochure, Handleiding, Certificaat, CAD) die acht documentrijen met bestandstype-chip, grootte en datum live filteren, inclusief lege staat en demo-downloadknop met bevestiging.
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.
Machinepark als spec-rijen (lasersnijden, kantbanken, robotlassen, poedercoaten) met capaciteit-chips; rechts een sticky beeldvenster dat per rij crossfade't op hover, focus en scroll.
Feature voor een wadloopgids met een live getijkromme en maanfase op de echte datum; sleep over de kromme om het waterpeil per uur te lezen en zie het veilige droogval-venster van vandaag.
Twee grote sieradenbeelden waarover een ronde vergrootglas-lens de cursor volgt en het hi-res bronbeeld op 2,6x uitvergroot; op touch netjes verborgen.
Drie grote sfeerpanelen (Warm minimalisme, Betongrijs industrieel, Zacht klassiek) die bij hover of klik uitklappen met sfeerbeeld, collectienaam en een pijlknop met 45°-draaidetail; op mobiel gestapeld.
Instagram-stijl wall van acht vierkante tegels waarvan één volg-ons-CTA-tegel: hover onthult een overlay met caption en hartje-teller, met de handle als pill naast de kop.
Twee tegengesteld lopende beeld-marquees met warme bakkerijbeelden die on hover pauzeren, met een centrale serif-tekstregel ertussen; marquees stoppen bij prefers-reduced-motion.
Ruimte-tabs die je door de praktijk laten kijken: een groot 16/9-beeld met trage Ken Burns per ruimte, crossfade bij tabwissel en een persoonlijk caption-kaartje, met thumbnails als tab-knoppen die actief een roze ring krijgen.
Ongelijke fotostrip van vijf beelden met afwisselende hoogtes, horizontaal sleepbaar met momentum en een zachte edge-fade — puur sfeer, zonder onderschriften.
Landgoed-sectie met drie kaart-tabs (het landgoed, de regio, de wereld) als eigen SVG-kaarten met gemarkeerde plekken en uitwisselingssteden, gewisseld met een zachte crossfade.
Een galerij als bonbondoos: kies een lekkernij en die licht uit zijn vakje omhoog terwijl de proefkaart ernaast met een dekseltje-flip de naam, herkomst en smaaknotities onthult.
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.
Gallery als analoog contactvel: filmframes met perforaties op fotopapier, die je met een rood vetpotlood omcirkelt; elke select tekent een wiebelig potloodovaal en toont rechts de grote afdruk met EXIF.
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.
Een galerij als opvouwbaar kamerscherm: het actieve paneel klapt breed open met beeld en bijschrift terwijl de andere tot smalle vouwen met een verticaal label samenvouwen.
Eén extra breed interieurbeeld in een venster dat je met de pointer horizontaal pant, met uitrollend momentum en een dun voortgangsbalkje dat meebeweegt.
Gallery als platte ladekast van een lijstenmaker: elke lade schuift open met een ingelijste prent op een passe-partout die naar buiten glijdt, met montage-details; één lade tegelijk open.
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.
Projectgrid met een klikbare jaartallen-rail (2019-2026) die zes projectkaarten filtert; niet-passende kaarten faden weg en de rest herschikt soepel via een handmatige FLIP-animatie.
Donker videogrid voor een natuurdocumentaire-studio met drie tegels (zeehond, VR-natuurles, gouden-uur-kust) die hun poster tonen en pas afspelen bij hover of focus; mouseleave pauzeert en spoelt terug naar het posterframe, op touch is een tik play/pauze.
Lookbook met twee tabs (De zomerkamer en Het atelier): per look een groot sfeerbeeld met drie klikbare hotspot-dots die een product-popover openen met thumb, naam, prijs en link, gewisseld via een gestaggerde crossfade.
Twee tegengestelde reuze-marquees met vakwoorden schuiven in mix-blend-mode difference over een fotostrip die met de scroll parallaxt, zodat de letters live over het werk inverteren.
Serif-page-header voor een advocatenkantoor met kruimelpad en titel links, en rechts een compact specialist-kaartje dat licht over de introsectie eronder heen valt.
Zachte pastel-page-header met kruimelpad-pills en een serif-italic titelaccent, waarvan de onderrand een golvende SVG-curve is die soepel doorloopt in het behandelmenu eronder.
Page-header voor een boomkwekerij met kruimelpad, titel en een seizoensschijf waarvan de wijzer op de echte datum staat; hover een seizoen en het assortiment eronder wisselt mee.
Dienstenpagina-titelbalk voor een adviesbureau met donkere overlay en onderin een rij anker-tabs die naar de demo-secties eronder smooth-scrollen en actief meelichten via ScrollTrigger; de foto scrubt subtiel mee.
Gecentreerde titelbalk voor een advocatenkantoor met donkere overlay op een kantoorfoto, kruimelpad boven de titel en een dunne gouden accentlijn eronder; de foto scrubt licht mee bij het scrollen.
Split-titelbalk voor een dakdekker met donkere overlay: links kruimelpad, titel en korte zin, rechts een prominente offerte-CTA (pill met orb) plus telefoonnummer; op mobiel stapelt de kolom en de foto scrubt subtiel mee.
Subpagina-header met kruimelpad, productbeeld in kader en een sticky anker-subnav waarvan de pills bij scrollen en klikken meelichten naar de demo-secties eronder.
Functionele categorie-header voor een sneakerwebshop met kruimelpad, live resultaat-teller, klikbare filterchips voor merk, maat en kleur, en een sorteer-select die het productgrid eronder direct aanpast.
Structurele bouw-page-header met kruimelpad en projecttitel, gevolgd door een sticky leesvoortgang-balk die met scrub meevult en de paginatitel klein infadet zodra je voorbij de header scrollt.
Gecentreerde helpcentrum-titelbalk voor een energieleverancier met donkere overlay en een werkend demo-zoekveld: focus opent een suggestielijst met vier veelgestelde vragen die live meefiltert terwijl je typt.
Links uitgelijnde titelbalk voor een kennisartikel van een installatiebedrijf, met donkere overlay, kruimelpad, categorie en meta-chips (bijgewerkt-datum, leestijd, type) onder de kop; de foto scrubt subtiel mee.
Page-header voor een weverij met kruimelpad en titel, en een weefstaal dat zich voor je ogen weeft: inslagdraden schieten als een spoel tussen de kettingdraden door, opnieuw te starten.
Drie minimale luxe sieradenkaarten met veel wit: het beeld zoomt subtiel bij hover, prijs en 'bekijk'-link faden pas dan naar boven in, en een 'ook in witgoud'-stapeltje met twee mini-thumbs piept uit de hoek.
Lichte horizontale drag-rij met momentum en scroll-snap van zes ARC-accessoirekaarten, elk met artikelnummer, prijs en vier PVD-finish-dots; pijlknoppen met 45°-draaidetail naast de kop.
Vier vloot-kaarten (torenkraan, mobiele kraan, rupskraan, minikraan) die aan een bovenrail hangen met een grote tonnage-chip, giek-lengte en inzet-labels; bij hover hijst de kaart zichtbaar op aan een inkortend haak-lijntje.
Drie kaas-productkaarten met een rijpingsschuif: sleep van jong naar overjarig en de CSS-kaaswig verkleurt, de korst wordt donkerder, kristallen verschijnen en de leeftijd en prijs per kilo lopen mee.
Drie auto-adviescards met een persoonlijk matching-label prominent bovenaan (boven de merknaam) en maandprijs; bij hover schuift een tweede beeld en Roberts one-liner over de auto in beeld.
Drie fauteuilkaarten met kleur-swatches die het productbeeld live laten crossfaden naar een andere stof; hover onthult een tweede aanzicht, met prijs en 'in 3 kleuren'-badge.
Drie abonnementskaarten (Licht, Medium, Donker) met intensiteit-dots, maalgraad-chips en een frequentie-select; de maandprijs telt live mee met elke keuze en de middelste kaart draagt een 'Meest gekozen'-lint.
Technische onderdelensectie met vier voorraadkaarten: artikelnummer in mono, groene/oranje voorraad-dot, merk-chip, netto prijs excl. btw en bestel- of offerteknop; hover licht de kaart op en crossfade't naar een tweede detailfoto.
Vier sneakerkaarten met een quick view die in een modal een groter beeld, maten-pills (uitverkochte maten doorgestreept), aantal-stepper en add-to-cart toont; toevoegen laat de winkeltas-badge in de sectiekop meetellen en bouncen.
Drie thee-productkaarten met een trek-timer: druk op zetten en het CSS-kopje kleurt naar de theesoort terwijl een ring aftelt; als de trektijd om is verschijnt het smaakprofiel.
Drie productkaarten met hover-tweede-beeld en een quick-add knop waarbij een dot in een boog naar de winkelmand-teller in de sectiekop vliegt en de teller ophoogt.
Vier doostype-kaarten (verzend-, presentatie-, display- en maatwerkdoos) met stansmes-look: gestippelde ril-lijnen, formaat-chips en een MOQ-regel; op hover klapt de kartonkleurige deksel-flap open (rotateX).
Vink modules aan (Btw-aangifte / Loonadministratie / Jaarrekening / Persoonlijk kwartaalgesprek) en de maandprijs bouwt live op, met een breakdown-lijstje dat per module in- en uitklapt via grid-rows en een bundelkorting die vanaf drie modules automatisch meerekent.
Een prijsmatrix met abonnementen (Basis / Onbeperkt / Duo) als rijen en tijdvak (Daluren / Altijd) als kolommen; klik op een cel en die combinatie licht op terwijl een samenvattingsbalk onderaan de keuze, de meetellende prijs en de inschrijf-CTA toont. De daluren-kolom heeft een 'slimme keuze'-accent.
Drie pakketkaarten die van inhoud wisselen via context-chips (Bruiloft / Zakelijk / Familie): per context andere pakketnamen, prijzen en inbegrepen punten, met een gestaggerde mask-slide en meetellende prijzen; de 'meest gekozen'-markering verspringt per context.
Drie onderhoudscontracten (Basis / Plus / Non-stop, middelste uitgelicht met rode rand en 'meest gekozen') met vinkjes-vergelijking; een machines-schuif boven de kaarten laat alle drie de prijzen live meeschalen en toont vanaf vier machines een staffelkorting-chip.
Een fysiek ogende strippenkaart met perforatierand waarbij drie knoppen (5, 10 of 20 lessen) de kaart met een stagger-stempelanimatie vol stempelen; de prijs per les daalt per formaat (€39 → €35 → €31) en de meetellende kaartprijs plus 'geldig 6 maanden' updaten mee.
Een m²-schuif (20 tot 500 m²) met live prijsindicatie per m² die per staffel daalt; een horizontale staffelbalk kleurt mee en licht de actieve staffel uit ('100–250 m² — € 34/m²'), met onderaan een meetellende totaalindicatie en offerte-CTA.
Een SVG-veilingklok voor Hollandse afslag die na 'Start de klok' met een roterende wijzer de prijs per 250 gram live laat dalen van €24,00 naar €12,00 met een zachte WebAudio-tik per stap; 'Afmijnen!' legt de huidige prijs vast, toont de succes-state en laat de voorraad zakken.
Donkergroene quote-slider met een forse witte serif-quote, gestippelde divider, auteur met portret en klas plus outline-knop, dots en pijlen, en een groen getinte sfeerfoto rechts die per quote meewisselt.
Een wand van certificerings-stempels (ISO 27001, NEN 7510, PCI-DSS en meer) die bij het in beeld komen schuin instempelen met een back-out, plus twee klantquotes van CTO's met mono-functietitels.
Drie platform-tegels (Slaapwijzer, Reisstem, Kustgids) die bij hover in 3D omklappen naar een korte toelichting, met daaronder een brede uitgelichte quote van de week.
Drie reviews als kraslootjes: veeg met muis of vinger de matte deklaag van een canvas weg (destination-out) en bij 55% weggekrast onthult de kaart automatisch de klantquote met een 5,0-rating in ijsbolletjes.
Reviews als ingesproken voicemails op een vintage antwoordapparaat: klik een bericht en de LED-teller loopt, 24 waveform-staafjes flikkeren en het bedankje typt zich letter-voor-letter uit onder de speler.
Twee brede klantverhalen (portret-thumb, naam, beroep en een servicegerichte quote) met de auto als kleine voetnoot; een 'meer verhalen'-knop toont twee extra verhalen met stagger.
Licht rommelige collage van zes klantenfoto's met wisselende maten en kleine rotaties, elk met een sterren-badge en een één-zin-caption die bij hover omhoog schuift, afgesloten met een 'deel jouw foto'-tegel.
Referentieblok met één uitgelichte maritieme review naast twee compacte kaarten en een sterren-rij, plus een scoreregel '9,2 uit 148 beoordelingen' met een dun voortgangsbalkje dat op scroll naar 92% vult.
Reviews als binnenkomende meldingen: een verticale ticker waar elke 3,5s een nieuwe compacte kaart bovenop schuift (max 4 zichtbaar, oudste fadet weg) met verlopende tijd-labels en pauze-op-hover.
Drie klikbare klantquotes als tabs links; rechts wisselt een voor/na-beeldpaar en de projectnaam mee met de gekozen quote via een gestaggerde crossfade.
Drie klantquotes met een voorlees-knop die de quote via SpeechSynthesis in het Nederlands uitspreekt, met stop-knop, een voortgangsring op geschatte duur en een nette lees-mee-fallback als spraak niet beschikbaar is.
Drie reviewkaarten met monogram-avatar, sterren en geverifieerde-koper-vink en quotes over trein, regen en reparatieservice, met bovenaan een score-balk 4,8 / 5 op basis van 1.240 reviews die op scroll vult.
Het IT-team als donker terminalvenster in een lichte sectie: regels typen zichzelf met knipperende cursor en per regel verschijnt een mini-avatar; een run-again-knop hertypt alles.
Drie teamkaarten met portret, naam en rol waarbij een handgeschreven-stijl notitie (Boska italic op blush) omhoog schuift over de onderkant bij hover, focus of tap, met een bloesem-dot per kaart.
Architectenteam op papieren kaarten: portretten staan als grijze schets en worden bij hover ingekleurd terwijl een SVG-kaderlijn zich rond de kaart tekent.
Familiewijngaard als stamboom met oprichter bovenaan; SVG-verbindingslijnen naar generatie twee tekenen zich uit via stroke-dashoffset bij scroll, en een klik op een ouder-knoop klapt zijn tak open waarbij de kleinkinderen inschalen en hun lijnen zich tekenen.
Zeshoekige honingraat-cellen als teamleden waarbij bij hover, focus of tap een amberkleurige honing-vulling van onder naar boven de cel in loopt en naam, rol en een persoonlijke regel over de idle-monogram heen verschijnt.
Vijf fysiotherapeuten waarvan degenen die volgens het rooster vandaag werken een aanwezig-badge en kleuraccent krijgen (live via de echte weekdag), met een weeklegenda die de huidige dag markeert.
People-first adviseurssectie: drie adviseurs met portret, specialiteit en één persoonlijke zin, plus een 'wie past bij mij?'-rij van vraag-chips die de best passende adviseur oplicht.
Vier monteurskaarten met portret, specialisme-chip en een live status-dot (in de werkplaats of onderweg, random per lading), naast een donkere plannerkaart met belknop.
Teamwand van polaroids met punaise, willekeurige rotaties per lading en handgeschreven bijschriften; een schud-knop herschikt de wand met GSAP en hover trekt een foto recht naar voren.
Contactformulier vormgegeven als ansichtkaart: je bericht verschijnt in kalligrafische italic op ruitlijnen, bij versturen landt een poststempel met de datum, kantelt de kaart de brievenbusgleuf in en klapt het vlaggetje omhoog.
Terugbel-contact met dag-chips (vandaag, morgen, overmorgen met echte datums via new Date) en een tijd-slider in kwartierstappen van 09:00 tot 17:30; de keuzes vullen live de zin 'Bel mij morgen om 14:15' en de bevestiging toont de afspraak.
Contact-wizard met drie chip-vragen (type project, budget en startmoment) die live een briefingzin opbouwen ('Een project voor een website, rond de € 10k, te starten in Q4'); bij een volledige keuze opent de knop een mailto met onderwerp en body vol ingevulde keuzes.
Split-contact met storingsmelder: type-select, merkveld en omschrijving links, urgentie-pills die de verstuurknop van kleur en tekst wisselen (rood 'Direct doorbellen' bij productiestilstand), rechts een directkaart met planner-portret, groot telefoonnummer en werkplaatstijden.
Reserveer-contact met interactieve CSS-plattegrond: acht tafels als klikbare stipjes in zones raam, zaal en terras (bezette tafels uitgeschakeld); een keuze vult live de samenvatting 'tafel 6, op het terras', met personen-stepper, tijd-pills en een demo-bevestiging.
Catering-aanvraagformulier waarbij bij verzenden een thermisch offertebonnetje in monospace uit een CSS-printer omlaag rolt, met de ingevulde naam, datum, aantal personen en gerechtkeuze, een streepjescode en gekartelde afscheurrand.
Bezoek-blok met tabs Auto, OV en Fiets die met een mask-slide de route-instructies, reistijd en één passende tip wisselen; rechts een luchtfoto-kaart met pulserende locatie-dot en een 'Route plannen'-knop naar Google Maps.
Blogkaarten met een scheurkalender-datumblok (grote dag, kleine maand, geperforeerde rand); de nieuwste kaart draagt een vers-lint en bij hover kantelt het datumblok alsof je het afscheurt.
Agenda-sectie met drie rustige agenda-regels (datum en activiteit) en daaronder drie nieuwskaarten met thumbnail, datum en kop, plus een alle-berichten-link.
Drie receptkaarten met kooktijd en moeilijkheid als drie pannetjes-dots, plus een bewaar-hartknop die telt en via localStorage onthoudt; een bewaard-filterchip toont alleen de bewaarde kaarten.
Kennisbank met één uitgelicht artikel plus drie compacte artikelrijen met categorie-chip en leestijd; bij hover schuift de rij in en kleurt de pijl-orb rood.
Het blog als krantenkiosk: onder een zware Fraunces-masthead ligt een rek met vier edities van huisblad De Brouwbode; klik een editie en die rug komt omhoog naar de leespositie terwijl de voorpagina eronder wisselt naar een kolomlayout met drop-cap-lead en twee kleinere artikelen.
Een verticale blog-index waar een boekenlegger-lint zich met de scroll van boven naar beneden tekent (stroke-dashoffset) terwijl een 'nu lezen'-tab meezakt en steeds het artikel op leeshoogte oplicht met accentkleur.
Strakke insights-lijst met vier hairline-rijen (grote serif-titel, datum, rechtsgebied-chip); bij hover schuift van rechts een preview-thumbnail met de eerste zin in, volledig transform-based zonder layout shift.
Reisartikelen als pins op een dot-grid kaart met vier pulserende spelden; hover over een verhaal laat zijn pin opspringen met ring en hover over een pin licht het bijbehorende artikel op — tweerichtings gesynchroniseerd.
Verticaal hijsplan in vier stappen (schouw & hijsplan, vergunningen, de hijsdag, rapportage) langs een giek-lijn waar een haak-icoon progress-gebaseerd langs daalt en elke stap oppakt: de knoop pulseert, een grijp-kabel schiet uit en de kaart licht op.
Vier werkwijze-stappen langs een horizontale kade-lijn waarlangs een schip-silhouet progress-gebaseerd van bolder naar bolder schuift terwijl de stappen cumulatief oplichten.
Interactieve fase-slider: sleep de knop of tik op een weeknummer over een tijdlijn van 8 weken, waarna weektitel, uitleg en een mini-illustratiechip met een mask-slide meewisselen.
Rustige werkwijze-tijdlijn met vier gespreksstappen; een verticale champagne-lijn tekent zich progress-gebaseerd terwijl je scrolt en licht per stap een knoop en een klein italic bijschrift op.
De vier molenwieken werken als een rotatie-selector: elke kwartslag draait een nieuwe fase van graan tot brood naar boven onder de vaste vang, met een windrichting-suggestie op basis van de datum.
Vijf staande kaarten die bij het scrollen als domino's één voor één van 8° naar rechtop kantelen, aangestuurd door één progress-gebaseerde scrub-timeline; elke kaart draagt een stap van het passeren van een woning.
Horizontale pijplijn van vier stappen (melden, diagnose, reparatie of ruil, testbank), verbonden door een gestippelde leiding waar een rode 'stroom' doorheen loopt; de knooppunten en kaarten lichten progress-gebaseerd één voor één op met scroll.
Een sticky koperen destilleerkolom waarin het stookfront en het vloeistofpeil progress-gebaseerd omhoog kruipen door de vijf stookfasen — de fase naast de scrollpositie licht op en de opvang vult zich onderin.
Verticale klok-tijdlijn van de verhuisdag (07:00 tot 17:00): het tijdstip dichtst bij de scrollpositie licht progress-gebaseerd op, terwijl een sticky klokwijzer over de wijzerplaat meesweept met de voortgang.
Sobere vier-staps werkwijze: naast een platte SVG-stansvorm waarvan de contour zich snijdt en de rillijnen verschijnen, lichten de stappen (ontwerp, rillen, vouwen, bedrukken) één voor één op bij binnenkomst.
Werkwijze op een horizontale lijn: een STEP-bestandchip schuift met de scroll langs vier stations (bestand & check, nesting & planning, productie, transport) en licht ze onderweg op.
Cyclisch proces als SVG-cirkel met vijf punten (ontdekken, ontwerpen, bouwen, testen, leren) waarlangs een highlight-boog automatisch rondgaat; klikken op een punt pauzeert de cyclus en wisselt de fasetekst in het midden met een mask-slide.
Odometer-teller waarin elk cijfer van 'Vannacht gebakken: 1.284 broden' als een verticale 0-9 rol naar zijn eindstand draait, gestaggerd van rechts naar links, met twee kleinere opteltellers eronder.
Een boomschijf waarvan de jaarringen zich van de kern naar de bast toe tekenen terwijl vier kerncijfers meetellen — elke ring een groeiseizoen aan ervaring.
Kalme cijfersectie met vier grote getallen als lijst, elk met een mini lijn-icoontje en één zin, plus een dunne tak-en-vogel-illustratie.
Uptime-cijfers waarbij 99,999% cijfer voor cijfer omhoog in een masker klikt en latency-balken naar Amsterdam, Frankfurt en Londen bij het in beeld komen vullen, met meetellende tellers en vangnet.
Vier kerncijfers (700 ton, 48 uur, 0 incidenten, 14 kranen) op een waarschuwingsbord met schuin gestreepte oranje/gele hazard-rand en bevestigingsbouten; de tellers lopen op zodra het bord in beeld komt, met in-beeld-vangnet.
Vier kerncijfers als peilschaal-posten met bolder-koppen op een kadelijn, die bij het in beeld scrollen vollopen met geel tot hun eigen peil terwijl de tellers meelopen — met vangnet.
Brede lichte cijferstrip in hero-opvolgstijl: vier kerncijfers die optellen zodra de strip in beeld komt, gescheiden door hairlines, met een dunne rode voortgangslijn die meevult.
Live bezettingsteller 'Nu aan het trainen: 43' die zachtjes fluctueert met een pulserende live-dot, naast een mini-staafgrafiek van de drukte per dagdeel waarin het huidige dagdeel oplicht.
Kerncijfers op een wit bouwbord met subtiele wegafzetting-strepenrand en vier progress-gebaseerd tellende getallen, elk met een droge toelichting.
Eén gigantisch outline-jaartal '75' dat met scroll-parallax over de sectie schuift, met daaroverheen drie overlappende kaartjes met korte feiten waarvan de kerncijfers optellen zodra de sectie in beeld komt.
Grote kraft-cijfers als blikvanger: een reusachtig outline-getal (2,4 mln dozen per jaar) boven een rij van drie kerncijfers (92% gerecycled, 5 werkdagen levertijd, 1 boom per 10.000 dozen); optellende tellers met setTimeout-vangnet zodat ze nooit op nul blijven.
Kerncijfers op een horizontale liniaal met maatstreepjes: de meetlat vult van links naar rechts en elke marker popt met zijn tellend cijfer (840 ton, 12 CNC-machines, 1 werkdag offerte, 98,6% op tijd).
Drie SVG-boogmeters die op scroll vullen via stroke-dashoffset met optellende percentages, plus een omreken-toggle die '12.400 kg CO₂ bespaard' met een mask-slide wisselt naar '62 retourtjes Parijs'.
Vier kerncijfers die bij het in beeld scrollen van onderaf vollopen met water tot hun eigen peil, compleet met een deinende waterlijn en een meetellende teller.
Klassieke premium productpagina met thumbs-kolom en crossfadend hoofdbeeld, PVD-finish-swatches die het beeld en artikelnummer wisselen, aantal-stepper met winkelmand-badge en een specificatie-accordion op grid-rows.
Drie uitvoeringen (Stad, Tour, Sport) naast elkaar met acht spec-rijen, een 'toon alleen verschillen'-toggle die identieke rijen soepel laat inklappen en een sticky samenvattingsbalk die de gekozen fiets met prijs toont.
Shop-the-look met vier pulserende hotspots op een woonkamersfeerbeeld, product-popovers die naast de dots openklappen en een product-rail eronder die meescrollt naar het aangeklikte item en het highlight.
Drie-staps maatwerkconfigurator met breedte-slider, front-keuze met textuurwissel en extra's, een CSS-kastpreview die live meeschaalt met maatlijn, en een totaalprijs die via een proxy-tween meetelt naar de offerte-CTA.
Technisch productblad voor een 18V-accuboormachine met een zelfgetekende SVG-maatvoering die zichzelf intekent, een spec-tabel met sticky kop en live mm/inch-omrekening, en downloadchips voor handleiding, onderdelenlijst en 3D-model.
Sollicitatieformulier voor een architectenbureau met drag&drop-upload (oplichtend sleepvlak, bestanden als chips met naam, grootte en verwijderkruisje, max 2), motivatieveld met karakterteller tot 600 tekens en een portfolio-link als alternatief voor bestanden.
Deluxe contactformulier voor een fysiopraktijk met floating labels, een onderwerp-select die via grid-rows een datumvoorkeur-blok laat verschijnen bij afspraken, live NL-telefoonformattering (06 12 34 56 78) en een meegroeiend berichtveld.
Aanvraagformulier voor een aannemersbedrijf met conditionele logica: per projecttype (nieuwbouw, verbouwing, onderhoud) klappen andere vervolgvelden soepel open, met oppervlakteveld met m²-eenheid, budget-range-select, dynamische startkwartaal-chips en een live samenvattingsregel in de donkere balk onderin.
Conversational form voor een ontwerpstudio: vijf vragen verschijnen één voor één in chat-stijl met typ-indicator van drie dotjes, antwoorden worden bubbels (met chips voor de hulpvraag), een terug-pijltje laat je antwoorden wijzigen en een samenvattingskaart sluit af met een verstuur-demo.
Multi-step offerteformulier voor een zonnepanelenbedrijf: drie stappen (woning, verbruik, gegevens) met voortgangsbalk en stapnummers, mask-slide tussen stappen, vriendelijke validatie per stap, samenvattingskaart in stap 3 en een succes-state met binnen-1-werkdag-belofte.
Drie collega's vertellen hun groeipad als mini-tijdlijn met jaartallen en pijlen; de pijlnavigatie wisselt de verhalen met een mask-slide.
Werken-bij-sectie met vijf eerlijke benefits als hairline-rijen, één regel cultuurcopy en een fotostrip waarvan elk beeld met eigen snelheid meescrollt.
Werken-bij-CTA met een teamfoto waarin één plek als uitgesneden silhouet is opengelaten: gestippelde contour, vraagteken en een arm die bij hover zachtjes wuift.
Filterbare vacaturelijst waarin rijen soepel dichtklappen via grid-rows, met onderaan een open-sollicitatie-rij die bewust uit de toon valt.
Vacature-detail met een uurtjelijn van een echte ochtenddienst die zich al scrollend intekent, naast een sticky solliciteerkaart met de recruiter.
Cmd+K-zoekoverlay voor een kennisplatform: de zoekknop én de echte sneltoets (Cmd/Ctrl+K) openen een glass-overlay met groot zoekveld, live filterende suggestielijst met categorielabels, pijltjes-en-Enter-navigatie en Escape om te sluiten.
Nieuwsbrief-popup voor een woonwinkel met beeld links en 10% welkomstkorting: verschijnt standalone na vier seconden of bij exit-intent (maximaal één keer, onthouden in localStorage met resetknop), met e-mailveld en een succes-state die de kortingscode toont.
Lead-magnet slide-in voor een notariskantoor: een bescheiden paneel schuift rechtsonder in (standalone na 40% scroll) met brochure-thumb, gratis checklist voor het kopen van een woning en e-mailveld — te minimaliseren naar een klein heropenbaar tabje in plaats van wegklikken.
Cookie-consent voor een energieleverancier: onderbalk met drie keuzes (alles, alleen noodzakelijk of voorkeuren) plus een voorkeuren-modal met per-categorie toggles in mensentaal — noodzakelijk staat vast, de keuze wordt onthouden in localStorage en is te wissen via de resetknop.
Aankondigings-modal voor de seizoensopening van een theater: sfeerbeeld bovenin, datum en korte tekst, een live mini-countdown in dagen en uren en één reserveerknop — opent standalone na twee seconden bij het eerste bezoek (localStorage met resetknop).
Help-landing van een verzekeringskantoor met een groot live-filterend zoekveld, vier categorie-tegels, vijf uitklapbare veelgestelde vragen en een bel-regel waarvan de openingstijden-status live wordt berekend.
Zoekresultaten-pagina van een woonwebshop met zichtbare query, resultaat-teller, zes kaarten met gemarkeerde zoekterm en een demo-toggle die de vriendelijke lege staat met suggesties en populaire categorieën toont.
Bedankt-pagina van een installatiebedrijf met een zelf-tekenend SVG-vinkje, een drie-staps tijdlijn met verwachte momenten, agenda-knop en een rustige FAQ-regel.
Onderhoudspagina van een ontwerpstudio met een traag draaiend werk-in-uitvoering-motief in SVG, een pulserende status-dot, dynamisch berekende terug-tijd en een demo-mailveld.
Warme 404-pagina voor een reisorganisatie met een eigen SVG-kompas waarvan de naald zachtjes zoekt, een zoekveld met speelse demo-reactie en vier populaire pagina's als vertrekbord-rijen.
Showroom-blok voor een badkamerstudio: een sleepbare fotostrip van drie beelden met snap, praktische bezoekinfo, een teamregel met twee monogrammen, een afspraak-knop en een klein gestileerd buurtkaartje met pulserende pin.
Werkgebied-blok voor een hoveniersbedrijf: een gestileerde SVG-kaart met vier regiovlakken rond Apeldoorn waarbij hover en klik de regio oplichten en de infokaart wisselt met responstijd, onderhoudsroute en recente projectplaatsen, plus een buiten-je-regio-regel.
Dealer-locator voor een keukenmerk: een postcodeveld dat naar 1234 AB formatteert sorteert vijf ateliers op afstand met FLIP-animatie, terwijl een gestileerde dot-grid-kaart van Nederland de pins toont — lijst en pins hoveren twee kanten op gesynct.
Vestigingen-grid voor een fietsenwinkelketen: drie winkels met foto, live open/gesloten-status berekend uit het openingstijdenschema, drukte-indicatie per dagdeel met het huidige dagdeel gemarkeerd, en route- plus belknoppen.
Rijtijden-blok voor een koeriersdienst: drie zone-ringen rond de vestiging in Utrecht tekenen zich met stroke-dashoffset, plaatsnamen liggen op de ringen en ring-hover of de legenda wisselt de leverbelofte met tarief per zone, afgesloten met één CTA.
Gepinde horizontale sectie waarin een rij kledingstukken als hangers aan een rail voorbijschuift op de scroll, elk zacht wiegend terwijl het passeert.
Gepinde deck-transitie waarin drie fullscreen kleurpanelen met statements over elkaar heen omhoog schuiven, terwijl het onderliggende paneel trager meebeweegt.
Gepinde scroll-sectie waarin een netwerkpad van klant via de glasvezelring naar het rack zich met de scroll tekent en een groen glowend datapakketje de tekentip volgt, terwijl de mono-knooppuntlabels een voor een oplichten.
Een vastgepinde top-down kaart van een zonnepark waarover het drone-vluchtpad zich tekent naarmate je scrollt; de drone volgt de kop, inspectiepunten lichten op en de HUD telt hoogte en accu mee.
Gepinde sectie waarin een foto door het reuzenwoord LICHT schijnt, tijdens het scrollen inzoomt tot bijna abstract en dan oplost naar de volgende sectie.
Donkere sectie met gedimde tekst waar een cirkelvormig lichtmasker de cursor volgt en daarbinnen de tekst in vol wit plus een verborgen kamer onthult.
Gepinde sectie waarin een dakelement met de scroll van straatniveau naar de dakrand wordt gehesen: de hijslijn groeit mee, een grote hoogtemeter telt live in meters, en bovenaan klikt de last met een subtiele bounce vast ("Geland. Millimeterwerk."), met lichte wolk- en skyline-parallax.
Gepinde scroll-sectie waarin je met de scroll langs een scheepsromp afzinkt: het water wordt dieper en donkerder, een inspectielamp-bundel glijdt mee en drie inspectiepunten (huidplaten, anodes, schroef) lichten één voor één op.
Eén gepind woord blijft staan terwijl drie landschappen erachterlangs schuiven; in mix-blend-mode difference inverteren de letters live over elk beeld.
Gepinde systeemdoorsnede waarin een rode oliestroom zich met de scroll door pomp, regelklep en cilinder tekent en elke component om beurten oplicht.
Gepinde WOW-variant van het jaartal-clipeffect: al scrollend bladert het reuzenjaartal door vier tijdvakken (1962→2026) terwijl de foto crossfadet en het clip-effect (crème binnen beeld, ink erbuiten) constant actief blijft.
Een vastgepinde strijkstok zakt met de scroll over de vier snaren; elke snaar die hij aanstrijkt gaat resoneren en onthult een fase uit het bouwen van een viool.
Gepinde scroll-wow: een plat kartonvel (CSS 3D — basis plus vier losse wandvlakken) vult eerst zijn rillijnen en vouwt zich dan segment voor segment overeind tot een doos, met een fasen-indicator (rillen, vouwen, lijmen) die meeloopt.
Een reuzenkop staat half over de wijngaard; buiten het beeld donker, erbinnen wit, en tijdens het scrollen wandelt de kleurgrens door de letters.
Gepinde beeldsequentie waarin een wijds landschap inzoomt en oplost naar een detail en daarna naar een close-up, elk met één regel reistekst.