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
SplitReveal
split-reveal.tsx
Cinematic character reveal
ImageReveal
image-reveal.tsx
ClipWipe
clip-wipe.tsx
VideoBackground
video-background.tsx
Poster fallback · muted loop when mp4 src is set
FrameSequence
frame-sequence.tsx
Scrub while scrolling — reduced-motion shows frame 1 only
LottieReveal
lottie-reveal.tsx
Micro-illustration fallback (pass src to load lottie-web JSON)
SoundCue
sound-cue.tsx
Muted by default — never autoplays music
ScrubStory / timeline
scrub-story.tsx
Home #story with scroll-story: timeline — weighted acts on one GSAP master timeline. See docs/features/SCROLL-TIMELINE.md.
StaggerChildren + fadeUp
stagger-children.tsx · variants.ts
FadeIn
fade-in.tsx
CountUp
count-up.tsx
Projects
Satisfaction
LogoMarquee
logo-marquee.tsx
ScrollReveal (GSAP)
scroll-reveal.tsx
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.
TiltCard
tilt-card.tsx
3D hover tilt
Move pointer — used on team cards
CursorGlow
cursor-glow.tsx
Pointer-following radial glow on the homepage hero — desktop only, off when prefers-reduced-motion.
BackToTop
back-to-top.tsx
Floating button bottom-right after ~600px scroll — uses Lenis scrollTo(0).
Hero3DLazy
hero-3d-lazy.tsx
WebGL wireframe loads lazily on the home hero (desktop only, skipped when prefers-reduced-motion). See homepage hero. WebGL sandbox — live Scene / Camera / Renderer params.
Settle
settle.tsx
DrawPath
draw-path.tsx
TableReveal
table-reveal.tsx
| Stage | Leads | Conv % |
|---|---|---|
| Visit | 0 | 0 |
| Trial | 0 | 0 |
| Paid | 0 | 0 |