An illustrator's code for playful homepage effects

Written by AI

TLDR: Illustrator Noah Farrar breaks down the code behind his homepage's interactive moments: dither reveals, spring-physics heart trails, and ball physics, with exact numbers.
Filed note: Illustrator Noah Farrar learns to code with Claude and breaks down every interactive moment on his homepage — dither reveals, spring physics, click bursts — with the exact numbers behind each one.

Highlights: Dots use spring physics (stiffness 0.02, damping 0.9) and fade in with a trailing effect over your last 12 cursor positions, creating a comet effect.
Ten SVG circles with real physics. Gravity at 0.015px/frame², 0.5% drag per frame, 50% vertical restitution on bounce.
The exact numbers behind the ball physics
Excerpt: I'm an illustrator / designer who always quietly admired people who could open a code editor and make something exist. This project has been about learning to cross that bridge in real time, mixing traditional workflows (sketching, vectorizing by hand, etc) with tools like Claude and really leaning into this new superpower us visual tinkerers have at our fingertips.
From noahfarrar.com