Waar dit vandaan komt

De referentieset GPU-shaders, Apache-2.0. Effecten: mesh gradient, liquid metal, dithering, grain gradient, warp, spiral, swirl, waves, neuro noise, perlin, simplex, voronoi, metaballs, smoke ring, god rays, dot orbit, pulsing border, color panels. Beeldfilters: paper texture, fluted glass, water, image dithering, halftone dots, halftone CMYK. Logo-animaties: heatmap, liquid metal, gem smoke.

Dé bron achter onze Shaders-categorie. Kijk hier eerst welk effect bestaat en hoe het heet, schrijf de GLSL daarna zelf of neem het pakket over.

Ruim 400 shader-componenten voor React en Tailwind: fluid gradients, warping meshes, animated noise, dithered color fields. Paper Shaders staat er als registry in (121 componenten).

Als je een shader kant-en-klaar als React-component wilt in plaats van zelf GLSL te schrijven.

Twintig jaar aan fragment shaders met de bron erbij, van plasma tot volledige raymarchte scènes.

Voor het idee en de wiskunde. Bijna nooit rechtstreeks bruikbaar: de meeste shaders daar zijn te zwaar voor een klantsite en de licenties zijn onduidelijk.

Animatie-engine van 24,5 kB modulair. Primitieven: timeline met relatieve posities, stagger (op tijd, waarde én rasterpositie), spring-fysica, draggable met release-physics, scroll observer met sync/scrubbing, SVG-morph, drawable strokes en motion path, text splitting en scramble, scope met media queries, WAAPI-integratie.

Onze Motion-categorie draait hierop. Pak hem zodra CSS-keyframes tekortschieten: rastervertraging, veerfysica, SVG-morph, of scroll-animatie die terug moet kunnen lopen.

De opvolger van Framer Motion, voor React en vanilla JS. Sterk in layout-animaties (elementen die van plek wisselen), gesture-afhandeling, springs en exit-animaties via AnimatePresence.

Als je React-componenten wilt die in- en uitfaden bij mount en unmount, of layout-animaties tussen states. Anime.js is beter in tijdlijnen en SVG; Motion is beter in React-lifecycle.

De industriestandaard voor scroll-gedreven werk. ScrollTrigger doet pinning, scrubbing en reveal-effecten; SplitText hakt tekst in regels, woorden en letters; matchMedia geeft aparte logica per breakpoint.

Bijna elke Awwwards-winnaar draait hierop, meestal in combinatie met Lenis en Three.js. Zwaarder dan anime.js; alleen inzetten als het hele project om scroll draait.

Smooth scrolling die de standaard is geworden waar Locomotive Scroll ooit stond. Koppelt aan ScrollTrigger en aan requestAnimationFrame-loops.

Het verschil tussen 'scrollt lekker' en 'scrollt als een gewone site'. Let op: het breekt scroll-anchoring en toegankelijkheidstools als je het verkeerd instelt.

De abstractie over WebGL waar vrijwel al het 3D-webwerk op draait: scènes, camera's, licht, materialen, postprocessing.

Pas nodig als er echte 3D-geometrie in het spel is. Voor een gekleurde bewegende achtergrond is één fragment shader (zie onze Shader.tsx) tientallen kilobytes goedkoper.

Three.js als declaratieve React-componenten, met drei als hulpbibliotheek voor camera's, controls en shaders.

De route voor 3D binnen een Next.js klantsite. Denk aan een productconfigurator, niet aan een marketingpagina.

Data-visualisatiecomponenten met design-engineering-inslag: charts, blocks, showcase en een studio. Chromatic-glitch filter op de logo-rij, ⌘K-zoek in de header, onderstrepingstekens als typografisch accent in koppen.

Voor dashboards en rapportagepagina's. De charts zijn het interessantst; de rest van de site is vooral een les in rustige, strak getypografeerde presentatie.

Registry van ruim 12.000 React-componenten en marketingblokken, shadcn-conventies. Categorieën: animated heroes, shaders, liquid & metal, backgrounds, gradients, footers, buttons, cards & grids, galleries & 3D, navigation, sign-in.

Eerste plek om te zoeken als je een specifiek effect met naam kent. Installeert direct via de shadcn-CLI.

150+ componenten in heldere groepen: special effects (animated beam, border beam, shine border, meteors, particles), text animations (typing, aurora, number ticker, morphing, hyper text), buttons (rainbow, shimmer, ripple), backgrounds (flickering grid, retro grid, ripple, dot pattern, light rays, noise).

De schoonste naamgeving van alle bibliotheken. Onze categorie-indeling leunt hierop.

Ruim 200 componenten, ambitieuzer en zwaarder: macbook scroll, 3D card effect, hero parallax, canvas reveal, sticky scroll reveal, tracing beam, world map, evervault card, vortex, wavy background, multi-step loader.

Voor de spectaculaire momenten. Let op de bundelgrootte: meerdere van deze componenten op één pagina kost je Lighthouse-score.

Geanimeerde, interactieve en volledig aanpasbare React-componenten, met veel aandacht voor tekst- en cursoreffecten.

Goede tweede bron als Magic UI net niet de juiste variant heeft.

Ruim 30 componenten bovenop Motion (voorheen Framer Motion): tekst-effecten, interactieve elementen, UI-animaties.

Als je toch al Motion in het project hebt. Kleinere, beter leesbare bouwstenen dan de grote bibliotheken.

Geanimeerde componenten en templates voor React en Tailwind, sterk in hover- en cursoreffecten.

Specifiek voor knop- en kaart-hovers.

shadcn-stijl marketingcomponenten met een eigen, wat rustiger handschrift.

Als Aceternity te luid is en Magic UI net te generiek.

150+ componenten en blokken met Tailwind en Motion, inclusief een reeks tekst-animaties en hover-effecten voor cards en buttons.

Vooral de tekst-animaties zijn de moeite waard.

Verzameling animaties, effecten en interacties om te kopiëren en plakken.

Bladeren als je nog niet weet wat je zoekt.

Kant-en-klare landingspagina's en geanimeerde backgrounds, gesorteerd op branche: agency, fashion, wellness, finance, cybersecurity, travel, ecommerce, SaaS, sports.

Branche-gerichte richting kiezen. De indeling per sector sluit aan op onze archetype-classificatie.

4.000+ website-secties uit levende sites, gefilterd op hero, feature, CTA, footer, testimonial, blog, logo, navbar, pricing, FAQ, team, contact, portfolio, product listing.

De beste bron als je één specifieke sectie moet ontwerpen. Filter op type, niet op merk.

5.000+ sectievoorbeelden uit de hoogste laag van het webdesign, dagelijks bijgewerkt.

Voor het bepalen van het ambitieniveau. Vaak WebGL-zwaar; wees eerlijk over wat we in de begroting kunnen bouwen.

2.500+ SaaS-landingspagina's, sorteerbaar op verdienmodel, paginatype, kleurpalet en hero-stijl. Losse secties: 135 hero-voorbeelden, 121 features-voorbeelden.

Voor bouwbot-achtige producten en alles wat een abonnement verkoopt.

Landingspagina's gecategoriseerd op branche, kleurpalet en layout, met een aparte sectie-index per type.

Vertrekpunt voor kleurpalet en toon bij een nieuw archetype.

Ruim 1.000 hero-secties uit levende sites, per merk gearchiveerd (Better Stack, Zed, Lando Norris en zo verder). Geen categorie-indeling, geen code: een platte, doorlopende stroom eerste schermen. Inmiddels onderdeel van screensdesign.com.

De diepste hero-bak die er is. Doorbladeren wanneer je vastzit op het eerste scherm; onze eigen Heroes-categorie geeft de patronen, Supahero geeft de hoeveelheid.

AI-productsite met prompt-gestuurde hero (Create slides, Build website, Design, Create games) en een strak opgebouwde enterprise-footer.

Referentie voor hoe je een AI-product presenteert zonder in het generieke paars-blauwe SaaS-sjabloon te vallen. De hero-met-invoerveld is een patroon dat we kunnen lenen voor offerte-aanvragen.

288 landingspagina's uit negen schilderijen, negen motieven maal 32 stijlvariaties. Bayer-dithering in de browser, met cursor-reagerende verplaatsing.

Bewijs dat één systeem met een paar variabelen enorm veel verschillende looks oplevert. Het model achter onze stijlkiezer-module.

Onze eigen 25 sites, van raymarched nebulae tot variabele-font choreografie. Code staat lokaal in c:\Projects\fable-showcase.

Referentie voor hoever je kunt gaan zonder externe libraries. Bij twijfel over haalbaarheid: hier kijken.

Doorlopend bijgewerkte selectie van recent gelanceerde sites, veelal via Godly aangedragen.

Wekelijks doorbladeren om te zien wat er nú gebeurt. Blokkeert geautomatiseerd ophalen, dus met de hand kijken.

Dagelijkse jurering op design, usability, creativiteit en content.

Volume en breedte. Filter op branche om te zien wat de concurrentie van een klant doet.

Strengere selectie dan Awwwards: enkele sites per week, sterk in animatie en scroll-effecten.

Kwaliteit boven kwantiteit. Wat hier staat, staat er om een reden.

Handmatig samengesteld sinds 2010, consistent hoog niveau, minder gericht op spektakel.

Voor rustige, zakelijke klanten waar Awwwards te schreeuwerig is.

Wekelijks bijgewerkte selectie, met een aparte WebGL-categorie. Kleiner en scherper gefilterd dan Awwwards.

De snelste manier om te zien wat er op dit moment met shaders en 3D op echte sites gebeurt.

Gallery gefilterd op site-feature, waaronder WebGL, parallax en typografie.

Filteren op techniek in plaats van op branche. Handig als je een specifiek effect zoekt in het wild.

De collecties per technologie: WebGL, GSAP, Three.js, parallax.

Ambitieniveau bepalen en de techniek herkennen. Wees eerlijk over het budget: wat hier staat kost weken, niet dagen.

Index van webdesign-galerijen: de meta-laag boven Awwwards, Godly, Land-book en de rest.

Als je niet meer weet welke gallery je nog niet hebt gezien.

Ruwer en minder gepolijst dan Awwwards; veel kleinere studio's en persoonlijke projecten.

Voor ideeën die nog niet door iedereen gekopieerd zijn.

Brede stroom aan design-inspiratie, breder dan alleen web: branding, product, illustratie.

Voor kleur- en beeldrichting in Fase 1, niet voor componenten.

Lijst van honderd inspiratiebronnen, gecategoriseerd en onderhouden.

Vertrekpunt als deze index niet genoeg is.

Richt zich op de details: page transitions, preloaders, section transitions, cursor interactions, card hovers, scroll animations, text reveals. Plus alle klassieke sectietypes en 21 branches.

Als de layout al staat en de site nog vlak aanvoelt. Dit is de bron voor de laatste tien procent.

Echte, uitgeleverde app- en web-interfaces per flow: onboarding, checkout, instellingen, lege staten.

Voor productschermen en beheerpanelen, niet voor marketingpagina's.

Fontcombinaties uit echte sites, met de gebruikte families en groottes erbij.

Het snelste antwoord op 'welk font past hierbij'. Onmisbaar in Fase 1 Design-DNA.

Dagelijkse UI-inspiratie per element: formulieren, prijstabellen, 404's, instellingen.

Als je één specifiek schermtype moet ontwerpen en even vastzit.

Groot Figma- en React-systeem met een uitgebreide set header- en app-navigaties.

Voor de saaie maar noodzakelijke varianten: application headers, breadcrumbs, tabbladen. Niet voor spektakel.

Uitgeschreven tutorials met broncode: scroll-onthulde WebGL-galerijen met GSAP en Three.js, page transitions met Barba, tekst-effecten, de architectuur achter award-winnende sites.

Als je een effect ziet en wilt weten hoe het werkelijk in elkaar zit. Vrijwel elke techniek in dit lab is hier ergens uitgelegd.

Wekelijkse verzameling van nieuwe demo's, libraries en experimenten.

Eén link per week doorlopen houdt je bij zonder dat je twintig galerijen hoeft af te struinen.