Line to Signature

It looks like a plain line. It’s actually my signature, pulled tight like a piece of string. Rub it with a cursor or a finger and the stretch underneath goes slack and falls back into its letters. Stop, and after a moment it sinks back into a line.

You never see the whole thing at once unless you work for it. Rub the full length and there’s my name. Leave it alone and every so often the line twitches, or a loop peeks up and ducks back down, just to remind you something’s in there.

Reach sets how wide a patch your cursor wakes up. Linger sets how long the letters wait before sinking. There are two versions, all lowercase and title case.

What I’d like to hear: did you rub out the whole name, or stop once you knew whose it was?

Where this comes from

People sometimes ask whose technique this is. Mostly, it’s mine. I built it with Claude, writing the code from scratch rather than starting from someone else’s project. The signature is my own handwriting, traced by hand in Illustrator.

It does lean on some very old ideas. The wobble is a spring, the same physics Robert Hooke worked out in the 1670s and the same math behind nearly every bouncy animation on the web. And the springy feel started with a jelly-like button in a GIF from a uxdesign.cc article, “Design in the material you ship,” which set off this whole run of experiments.

The part we worked out ourselves is the trick of letting every pen stroke rest on the stretch of line directly beneath it, with the loops folded up as slack, so the line can stand back up into handwriting. I don’t know of anyone who’s done exactly this. Reveal-on-hover effects and moving type are everywhere, though, so I wouldn’t swear nobody has.