Reference

Motionlab

Live previews of every primitive in src/components/motion/. Hover CTAs to feel magnetic pull; scroll down for GSAP reveals.

MagneticButton

magnetic-button.tsx

TextReveal

text-reveal.tsx

Wordsblurinonebyoneforheroheadlines

StaggerChildren + fadeUp

stagger-children.tsx · variants.ts

First
Second
Third

FadeIn

fade-in.tsx

Simple opacity + rise on mount

CountUp

count-up.tsx

0+

Projects

0%

Satisfaction

LogoMarquee

logo-marquee.tsx

FramerGSAPLenisR3FConvexStripeFramerGSAPLenisR3FConvexStripe

ScrollReveal (GSAP)

scroll-reveal.tsx

Scroll-triggered block #1 — scrubbed with Lenis + ScrollTrigger
Scroll-triggered block #2 — scrubbed with Lenis + ScrollTrigger
Scroll-triggered block #3 — scrubbed with Lenis + ScrollTrigger

LineReveal

line-reveal.tsx

Line one slides up

Line two follows

ParallaxLayer

parallax-layer.tsx

Scroll this page — blob moves on Y

ScrollProgress

scroll-progress.tsx

Thin primary bar at the very top of every page — mounted in MotionProvider. Scroll this page to see it fill.

Hero3DLazy

hero-3d-lazy.tsx

WebGL wireframe loads lazily on the home hero (desktop only, skipped when prefers-reduced-motion). See homepage hero.