Magic Underline

Micro-interactionVanilla JS · zero dependenciestwo edges, chasing at different speeds

-- fps

prefers-reduced-motion detected — the underline jumps, no travel

X-ray · layers

Slidethe underline travels (off = it jumps instantly)

Stretchit stretches like gum mid-travel, then settles

Glowa soft accent glow under the bar

Parameters

Speed0.18

Thickness4 px

Stretch0.70

Roundness3 px

your version · updates as you tinker

How this effect works

The underline is not one box that slides — it's tracked as two independent edges, a left and a right. Each frame both edges chase the target link's left and right, but the edge leading the move (the right edge when you go right) chases faster than the trailing one. For the moment in between, the two edges are far apart, so the bar is wide — that's the gum stretch. As the trailing edge catches up, it snaps back to the link's real width and settles.

Speed is how quickly the edges chase (a simple edge += (target - edge) * SPEED); stretch is how much extra the leading edge leads by, so 0 gives a rigid slide and 1.5 gives a long rubbery smear. Turn slide off and the edges teleport to the target — the classic instant highlight. Hover the links (or watch it cycle) to drive it.

Production notes: respects prefers-reduced-motion (jumps, no travel) · pure geometry, no layout thrash — the bar is one transformed element · cheap on any device · the copied snippet is self-contained HTML + CSS + JS.