Lab

Personal builds, experiments, and micro-interactions. Some shipped, some still cooking — all built to learn something or scratch an itch.

Builds

Experiments

Micro-interactions and UI techniques — things built to understand how something works.

Magnetic Button

An element that drifts toward the cursor using spring physics. Hover the button.

Framer Motion
SCRAMBLE

Text Scramble

Text that cycles through random characters before resolving to the original.

React

Morphing Blob

An ambient shape that continuously morphs using an 8-value CSS border-radius animation.

CSS

Typewriter

Text that types out, pauses, then backspaces before cycling to the next phrase.

React

Hamburger → Close

Three lines morph into an X on click. A staple nav interaction built with pure CSS transitions.

CSS

Heart Like

A like button with a fill animation and particle burst on activation.

React
listening…

Mic Audio Indicator

A microphone with live audio bars animating inside the capsule. Built with SVG clip-path and CSS keyframes.

CSS / SVG
+

Cart Fill

Items stack into a cart with a bounce on each add. The cart jiggles and a badge increments.

CSS / SVG

SVG Draw — Connection

Two circles draw simultaneously in opposite directions using stroke-dashoffset.

CSS / SVG

SVG Shift — Dot Grid

A 4×4 dot grid where filled quadrants cycle through phases using staggered CSS keyframe animations.

CSS / SVG

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.

Framer Motion