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
Buttons
18Van rustige primaire knop tot magnetische cursor-volger. De hover-state is het goedkoopste plekje om een site duur te laten voelen.
openenHeroes
13Het eerste scherm. Dertien opzetten die elk een ander soort bedrijf passen, van rustig-zakelijk tot volledig cinematisch.
openenNavigatie
12Headers, floating pills, mega menus, docks en mobiele drawers. Inclusief de scroll-gedragingen die erbij horen.
openenCards
16Tilt, spotlight, glare, border beam, glass en bento. De card is het werkpaard van elke dienstensectie.
openenCarousels
10Marquees, drag-snap sliders, coverflow, testimonials en logo-rijen. Alles zonder externe slider-library.
openenTekst-effecten
20Typografie in beweging: typewriter, scramble, split-reveal, scroll velocity, tickers en gemaskeerde tekst.
openenBackgrounds
18Mesh gradients, aurora, grids, meteors, beams, noise en scanlines. De laag die sfeer maakt zonder de content te storen.
openenFeature-secties
10Manieren om te vertellen wat je doet: bento, alternerend, sticky scroll, tabs, timeline en before/after.
openenPaginasecties
15Pricing, testimonials, stats, FAQ, CTA, logo cloud, team, contact en blog. De standaardbouwstenen van elke klantsite.
openenBanners & overlays
9Announcement bars, sticky CTA's, cookiemelding, toasts, countdown en de zwevende WhatsApp-knop.
openenFooters
8Van één regel tot een volledig sitemap-blok met big type. Inclusief de reveal-footer die onder de pagina vandaan komt.
openenFormulieren
12Floating labels, vanishing placeholder, multi-step, dropzone, OTP en validatie-states die niet lelijk zijn.
openenLoaders & transities
10Preloaders, curtain-transities, skeletons, progress bars en blur-up images. De momenten waarop de site niets te tonen heeft.
openenMicro-interacties
14Cursors, tooltips, magnetics, scroll progress, confetti, theme toggle, accordions en modals.
openenHoe 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.
- 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.
- 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.
- 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.
- 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.