Blurr Motion · Lab catalogus v1 · 172 blocks live

Motion Lab · WebVast

Een patternbook voor Awwwards-tier sites.

Drie lagen per block: mechaniek (kopieer 1-op-1), skeleton (mag herschikken), styling-template (verplicht eigen invulling per merk). 45 technieken, 12 categorieën.

172 blocks 100 tier 1 · GSAP-native 39 tier 2 · specialized libs 33 tier 3 · bleeding edge

Foundations

4 blocks
foundation-cursor-system T1 foundation-lenis-smooth-scroll T1 foundation-theme-shift-on-scroll T1 foundation-view-transitions T3

Heroes

24 blocks
hero-char-reveal-brutalist T1 hero-char-reveal-editorial T1 hero-char-reveal-playful T1 hero-clip-wipe-gallery T1 hero-clip-wipe-kinetic T1 hero-clip-wipe-minimal T1 hero-parallax-layers-brutalist T1 hero-parallax-layers-editorial T1 hero-parallax-layers-quiet T1 hero-shader-fullscreen-brutalist T3 hero-shader-fullscreen-gallery T3 hero-shader-fullscreen-quiet T3 hero-three-scene-editorial T2 hero-three-scene-minimal T2 hero-three-scene-playful T2 hero-video-shader-editorial T3 hero-video-shader-kinetic T3 hero-video-shader-minimal T3 hero-webgl-displacement-gallery T2 hero-webgl-displacement-kinetic T2 hero-webgl-displacement-minimal T2 hero-word-reveal-kinetic T1 hero-word-reveal-quiet T1 hero-word-reveal-specimen T1

Navigation

10 blocks
nav-magnetic-links-minimal T1 nav-magnetic-links-playful T1 nav-mega-menu-reveal-editorial T1 nav-mega-menu-reveal-kinetic T1 nav-overlay-fullscreen-brutalist T1 nav-overlay-fullscreen-quiet T1 nav-scroll-progress-editorial T1 nav-scroll-progress-minimal T1 nav-sticky-pill-minimal T1 nav-sticky-pill-playful T1

Content blocks

33 blocks
content-batch-reveal-kinetic T1 content-batch-reveal-quiet T1 content-batch-reveal-specimen T1 content-houdini-paint-brutalist T3 content-houdini-paint-editorial T3 content-houdini-paint-kinetic T3 content-houdini-paint-minimal T3 content-houdini-paint-playful T3 content-houdini-paint-quiet T3 content-line-reveal-editorial T1 content-line-reveal-minimal T1 content-line-reveal-specimen T1 content-lottie-icons-brutalist T2 content-lottie-icons-minimal T2 content-lottie-icons-playful T2 content-physics-cards-brutalist T2 content-physics-cards-minimal T2 content-physics-cards-playful T2 content-pinned-horizontal-brutalist T1 content-pinned-horizontal-editorial T1 content-pinned-horizontal-gallery T1 content-scrub-tied-statement-kinetic T1 content-scrub-tied-statement-minimal T1 content-scrub-tied-statement-specimen T1 content-sticky-stacking-brutalist T1 content-sticky-stacking-editorial T1 content-sticky-stacking-quiet T1 content-svg-morph-editorial T2 content-svg-morph-minimal T2 content-svg-morph-playful T2 content-theme-section-kinetic T1 content-theme-section-playful T1 content-theme-section-quiet T1

Galleries

26 blocks
gallery-clip-wipe-grid-brutalist T1 gallery-clip-wipe-grid-editorial T1 gallery-clip-wipe-grid-minimal T1 gallery-drag-carousel-gallery T1 gallery-drag-carousel-minimal T1 gallery-drag-carousel-playful T1 gallery-hover-shift-editorial T1 gallery-hover-shift-minimal T1 gallery-hover-shift-playful T1 gallery-marquee-scrub-brutalist T1 gallery-marquee-scrub-gallery T1 gallery-marquee-scrub-quiet T1 gallery-pinned-horizontal-editorial T1 gallery-pinned-horizontal-gallery T1 gallery-pinned-horizontal-kinetic T1 gallery-r3f-island-editorial T3 gallery-r3f-island-gallery T3 gallery-r3f-island-minimal T3 gallery-r3f-island-playful T3 gallery-spline-embedded-editorial T3 gallery-spline-embedded-gallery T3 gallery-spline-embedded-minimal T3 gallery-spline-embedded-playful T3 gallery-webgl-mesh-transition-gallery T2 gallery-webgl-mesh-transition-kinetic T2 gallery-webgl-mesh-transition-minimal T2

Process

10 blocks
process-horizontal-timeline-editorial T1 process-horizontal-timeline-gallery T1 process-lottie-step-icons-minimal T2 process-lottie-step-icons-playful T2 process-numbered-reveal-brutalist T1 process-numbered-reveal-editorial T1 process-pinned-progress-kinetic T1 process-pinned-progress-minimal T1 process-rive-interactive-brutalist T2 process-rive-interactive-playful T2

Pricing

11 blocks
pricing-hover-tilt-brutalist T1 pricing-hover-tilt-playful T1 pricing-magnetic-cta-editorial T1 pricing-magnetic-cta-kinetic T1 pricing-magnetic-cta-minimal T1 pricing-physics-flip-brutalist T2 pricing-physics-flip-minimal T2 pricing-physics-flip-playful T2 pricing-scrub-comparison-brutalist T1 pricing-scrub-comparison-editorial T1 pricing-scrub-comparison-minimal T1

Testimonials

8 blocks
testimonial-drag-cards-minimal T1 testimonial-drag-cards-playful T1 testimonial-marquee-brutalist T1 testimonial-marquee-editorial T1 testimonial-shader-bg-kinetic T2 testimonial-shader-bg-quiet T2 testimonial-stacking-quotes-quiet T1 testimonial-stacking-quotes-specimen T1

FAQ

7 blocks
faq-accordion-reveal-editorial T1 faq-accordion-reveal-minimal T1 faq-popover-anchor-brutalist T3 faq-popover-anchor-editorial T3 faq-popover-anchor-minimal T3 faq-svg-morph-toggle-minimal T2 faq-svg-morph-toggle-playful T2

CTA bands

21 blocks
cta-audio-cue-brutalist T2 cta-audio-cue-kinetic T2 cta-audio-cue-minimal T2 cta-audio-cue-playful T2 cta-hold-to-confirm-brutalist T1 cta-hold-to-confirm-minimal T1 cta-hold-to-confirm-playful T1 cta-magnetic-button-brutalist T1 cta-magnetic-button-minimal T1 cta-magnetic-button-playful T1 cta-marquee-velocity-brutalist T1 cta-marquee-velocity-gallery T1 cta-marquee-velocity-kinetic T1 cta-scrub-banner-brutalist T1 cta-scrub-banner-editorial T1 cta-scrub-banner-kinetic T1 cta-shader-orb-brutalist T3 cta-shader-orb-editorial T3 cta-shader-orb-kinetic T3 cta-shader-orb-minimal T3 cta-shader-orb-playful T3

Forms

8 blocks
form-microinteractions-minimal T1 form-microinteractions-playful T1 form-physics-feedback-brutalist T2 form-physics-feedback-playful T2 form-shader-success-minimal T3 form-shader-success-playful T3 form-success-burst-minimal T1 form-success-burst-playful T1

Footers

10 blocks
footer-css-scroll-driven-editorial T3 footer-css-scroll-driven-minimal T3 footer-manifest-reveal-brutalist T1 footer-manifest-reveal-specimen T1 footer-marquee-mega-brutalist T1 footer-marquee-mega-editorial T1 footer-noise-bg-brutalist T2 footer-noise-bg-editorial T2 footer-noise-bg-minimal T2 footer-noise-bg-quiet T2