Whiplash Letters
A headline whose letters follow the cursor as a spring chain — crisp at the head, loose at the tail.
DOM + CSS0 deps1 file · 5 KB TSX
Props
"use client";
import { useCallback, useRef, useState } from "react";
type Node = { x: number; y: number; vx: number; vy: number };
export function WhiplashLetters({
word = "WHIPLASH",
looseness = 1,
squash = true,
}: {
word?: string;
/** Higher is slacker. Scales the whole chain's stiffness. */
looseness?: number;
squash?: boolean;
}) {
const wrapRef = useRef<HTMLDivElement>(null);
const spanRefs = useRef<(HTMLSpanElement | null)[]>([]);
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this text effect
Most kinetic headlines stagger a shared animation across letters on a delay, which moves every glyph identically a few milliseconds apart. This is a spring chain instead: the first letter targets the pointer and every letter after it targets the current position of the one before, read in the same frame, so a one-frame lag propagates an actual wave down the word. The thing that turns that chain into a whip rather than a rigid ruler is that the spring constants are a gradient — stiffness falling and damping rising toward the tail — so the head arrives crisply while the end is still travelling. Rotation taken from the velocity vector supplies follow-through and a speed-proportional squash supplies weight; without both, the letters read as beads on a string. Everything integrates in one animation-frame loop writing directly to transforms through refs, because a state update per frame would re-render the whole headline sixty times a second, and the loop parks itself only when every letter is both slow and settled — checking velocity alone leaves it running forever a pixel short of its target.
Curator’s note
The gradient of spring constants down the chain is the entire component. Equal springs give a ruler; unequal ones give a whip.
