Grab my name and pull.

A logo is stamped on things. A name is something people say. I wanted mine to feel like a person: warm, a little playful, and always itself.

So on my homepage you can take hold of my name. A letter stretches toward your hand, argues back, and the moment you let go it springs home with one small wobble, the way good rubber does.

A spring, not an animation

Nothing here is a recording. Every letter hangs on a spring, and every frame the page asks it one question: given where the letter is, how fast it's moving and where your hand is, where should it be now? The further you pull, the harder it pulls back, and a little friction keeps it from wobbling forever.

That's why it never moves the same way twice. Pull slowly and it follows like taffy. Flick it and it snaps back with a bounce. It answers you, not a timeline.

You hold a letter, and the word follows

You never pull the whole name. You pull one letter, and it follows your hand exactly. Its neighbours come along at 18%, the next ones at 5%, each a beat behind, so the word ripples instead of moving as one stiff block.

How much should it give?

These are the real springs, side by side. Pull one, or watch all three take the same pull. The stiff one is safe and forgettable; the soft one is fun for a second and then it's just mess. The one I chose overshoots once, by about 8%, and settles in half a second: enough life to feel, never enough to get in the way of reading my name.

It stretches, it never breaks

Two rules keep it a name and not a toy:

• The further you go, the more it resists. The pull fades out, so however far you drag, a letter gives at most about two-thirds of its own height, and never more than 210 pixels. It can't tear or fly away.
• It keeps its volume. Pulled sideways it gets longer and thinner and leans up to 8° into your hand, then fills out again on the way back. Animators call it squash and stretch; it's why the rubber reads as rubber.

On a phone

On a touchscreen a drag is usually a scroll, so the page waits a moment to read your intent. If your finger moves mostly up or down, you're scrolling and the name stays put. If it moves mostly sideways, you've taken hold of it. Eight pixels is enough to tell.

When motion should rest

If your device asks for less motion, the name stays still and simply reads. A detail like this should be a gift, never a cost.

For developers How it’s builtelastic-type-physics.js

Each letter has a spring on each axis. Every step: velocity += (target − position) × 190 − velocity × 17, then position += velocity, in steps of 1/120 s. The stretch, the lean and the slight turn are worked out from the displacement each frame. The whole thing is 22 lines, no library.