Naar inhoud
FFrosthaven Lab

lab.frosthaven.co

Alles wat een klantwebsite
kan zijn.

232 werkende varianten over 17 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.

232
varianten
17
categorieën
46
bronsites
0
animatie-libs

De catalogus

01

Buttons

19

Van shader-gevulde CTA tot magnetische cursor-volger. De hover-state is het goedkoopste plekje om een site duur te laten voelen.

openen
02

Heroes

15

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.

openen
03

Navigatie

16

Video-headers, mega menus met clip-preview, fullscreen video-menu, floating pills, docks en mobiele drawers.

openen
04

Cards

18

Shader-cards, 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
15

Shaders

17

GPU-shaders in WebGL2: mesh gradient, liquid metal, dithering, warp, metaballs, god rays, voronoi, halftone, plasma, iridescent. Waar CSS ophoudt en echte kleur begint.

openen
16

Video

10

Bewegend beeld als bouwsteen: video-heroes, tekstmaskers, scroll-scrub, hover-cards, lightbox en duotone. Inclusief het performance-budget.

openen
17

Motion

11

Wat CSS niet kan: timelines met relatieve posities, grid stagger, veerfysica, SVG-morph, motion path en scroll-scrubbing. Op anime.js v4.

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.