Lab
Experiments
Eight standalone animation demos. Each card is a live component — hover it, click it, scroll past it. They're meant to be poked at, not just looked at.
Path Drawing
SVGSVG stroke-dashoffset animation that draws a house outline piece by piece.
Tap or hover to attract
Magnetic Trail
InteractionMultiple orbs follow the cursor with different GSAP ease values. The lag between them creates the trail.
Elastic Button
InteractionClick it. GSAP elastic.out(1, 0.3) handles the bounce. That's one line of config.
Text Scramble
TextHover to trigger. Each character cycles through random glyphs at 30ms intervals before landing on the real one.
Tilt Card
3DMaps mouse position to rotateX/rotateY via CSS perspective. No library needed, just mousemove and math.
Wave Text
TextEach character gets an animation-delay offset. Pure CSS @keyframes, no JS at all.
Pulse Ring
SVGConcentric SVG circles with staggered scale + opacity keyframes. Looks like sonar, runs on CSS alone.
Flip Counter
InteractionIntersectionObserver triggers a GSAP tween from 0 to target. snap: { val: 1 } keeps it on whole numbers.
New experiments get added when something interesting comes up. Got an idea? Open an issue.