Character Wobble Hover Text — Per-Letter Animation Snippet

This effect gives each letter of a heading its own physical reaction to the cursor: as the pointer sweeps across the text, individual characters lift, rotate at a slightly random angle, and briefly tint a new color before springing back — not a text-scramble effect that swaps characters, and not one shared @keyframes animation applied identically to the whole string. Every letter's wobble is independent, so several letters can be mid-motion at once while the rest sit still.

Splitting text into per-character spans

The script reads heading.textContent, clears the element, then rebuilds it by wrapping every character (including spaces, which get a non-breaking space and a fixed width class so word gaps don't collapse) in its own <span class="cw-char">. This is the same "split into spans" foundation used by scramble and stagger-reveal text effects, but here each span keeps its own hover listener instead of being driven by a single shared timeline.

Randomizing the wobble per letter

The wobble(span) function picks fresh random values every time it runs: rot between -16° and 16°, rise (an upward translateY) between 6px and 14px, and scale between 1.08 and 1.22. Because Math.random() runs independently for every character on every hover, no two letters — and no two hovers of the same letter — wobble identically, which is what keeps the effect feeling organic rather than mechanically repeated.

The color pulse

Alongside the transform, each wobbling letter briefly switches to hsl(hue, 90%, 72%) with a randomized hue in the 200-280 range (blues through purples), then reverts to the heading's normal color. This is a cheap way to add visual energy without needing a gradient text mask or an extra layer.

Independent settle timers

Each span tracks its own _settleTimer directly on the DOM node. wobble() clears any existing timer for that specific span before setting a new one — so re-hovering the same letter quickly restarts its own wobble-and-settle cycle without interfering with any other letter's timer. After 260ms, that letter's transform and color reset to neutral, independent of what every other letter is doing.

Why CSS transition instead of @keyframes

Rather than authoring a fixed keyframe sequence, the JS simply sets a target transform and lets the CSS transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) interpolate to it — and back again when the timer resets it. That cubic-bezier includes a controlled overshoot (values above 1), giving the spring-back a small bounce rather than a flat ease.