Lab
Projects I build for my own work, practice, and ideas. Not client work — but real projects, shipped and in use.
Builds
Experiments
Micro-interactions and UI techniques — things built to understand how something works. Click any card to view full demo.
15 of 20 experiments
Text Scramble
Text that cycles through random characters before resolving to the original.
Morphing Blob
An ambient shape that continuously morphs using an 8-value CSS border-radius animation.
Animated Mesh Gradient
Soft color blobs drift across a surface using animated background-position. Semi-transparent rgba stops let the card background show through — used as the card hover effect across the site.
Typewriter
Text that types out, pauses, then backspaces before cycling to the next phrase.
Hamburger → Close
Three lines morph into an X on click. A staple nav interaction built with pure CSS transitions.
Heart Like
A like button with a fill animation and particle burst on activation.
Mic Audio Indicator
A microphone with live audio bars animating inside the capsule. Built with SVG clip-path and CSS keyframes.
Cart Fill
Items stack into a cart with a bounce on each add. The cart jiggles and a badge increments.
SVG Draw — Connection
Two circles draw simultaneously in opposite directions using stroke-dashoffset.
SVG Shift — Dot Grid
A 4×4 dot grid where filled quadrants cycle through phases using staggered CSS keyframe animations.
Pill → Arrow Button
Full-radius pill button with a vertical capsule icon. Hover to spin it 405° and watch the pill morph into an arrow.
Sticky Figure Scrollytelling
A pinned visual transforms as narrative text scrolls past. Classic NYT-style storytelling pattern.
Morphing Header on Scroll
A sticky header that shrinks, gains opacity, and drops its tagline as you scroll. Reclaims vertical space.
Scroll-Driven SVG Path
An SVG path draws in as you scroll, with a leading dot tracing along its tangent via offset-path.