Naar inhoud
FFrosthaven Lab

lab.frosthaven.co

Alles wat een klantwebsite
kan zijn.

185 werkende varianten over 14 categorieën. Elk stuk is hier echt gerenderd, niet als screenshot: je hovert, klikt en sleept erdoorheen. Onder elke variant staat wanneer je hem inzet, plus het recept om hem over te nemen.

185
varianten
14
categorieën
23
bronsites
0
animatie-libs

De catalogus

01

Buttons

18

Van rustige primaire knop tot magnetische cursor-volger. De hover-state is het goedkoopste plekje om een site duur te laten voelen.

openen
02

Heroes

13

Het eerste scherm. Dertien opzetten die elk een ander soort bedrijf passen, van rustig-zakelijk tot volledig cinematisch.

openen
03

Navigatie

12

Headers, floating pills, mega menus, docks en mobiele drawers. Inclusief de scroll-gedragingen die erbij horen.

openen
04

Cards

16

Tilt, spotlight, glare, border beam, glass en bento. De card is het werkpaard van elke dienstensectie.

openen
05

Carousels

10

Marquees, drag-snap sliders, coverflow, testimonials en logo-rijen. Alles zonder externe slider-library.

openen
06

Tekst-effecten

20

Typografie in beweging: typewriter, scramble, split-reveal, scroll velocity, tickers en gemaskeerde tekst.

openen
07

Backgrounds

18

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

openen
08

Feature-secties

10

Manieren om te vertellen wat je doet: bento, alternerend, sticky scroll, tabs, timeline en before/after.

openen
09

Paginasecties

15

Pricing, testimonials, stats, FAQ, CTA, logo cloud, team, contact en blog. De standaardbouwstenen van elke klantsite.

openen
10

Banners & overlays

9

Announcement bars, sticky CTA's, cookiemelding, toasts, countdown en de zwevende WhatsApp-knop.

openen
11

Footers

8

Van één regel tot een volledig sitemap-blok met big type. Inclusief de reveal-footer die onder de pagina vandaan komt.

openen
12

Formulieren

12

Floating labels, vanishing placeholder, multi-step, dropzone, OTP en validatie-states die niet lelijk zijn.

openen
13

Loaders & transities

10

Preloaders, curtain-transities, skeletons, progress bars en blur-up images. De momenten waarop de site niets te tonen heeft.

openen
14

Micro-interacties

14

Cursors, tooltips, magnetics, scroll progress, confetti, theme toggle, accordions en modals.

openen

Hoe je dit gebruikt

Dit lab is bedoeld als gedeelde woordenschat tussen jou en de klantwebsite-skill. In plaats van “maak de hero wat spannender” wijs je een variant aan.

  1. 01

    Kies per sectie een variant

    Loop de categorieën langs en noteer de namen: hero 'Split met beeldkolom', cards 'Spotlight', footer 'Big type'. Dat is je designbrief.

  2. 02

    Geef de namen door

    De skill kent deze catalogus. Noem de variantnaam en het archetype, en de opbouw ligt vast voordat er één regel code is geschreven.

  3. 03

    Toets tegen het archetype

    Een advocatenkantoor krijgt geen rainbow conic. Bij elke variant staat waar hij wel en niet past; die notitie is belangrijker dan het effect zelf.

  4. 04

    Neem het recept over

    Klik op 'recept' voor de kern van de techniek. Alles draait op Tailwind en CSS-keyframes, zonder externe animatie-libraries.