Whiplash Letters
A headline whose letters follow the cursor as a spring chain — crisp at the head, loose at the tail.
- Category
- Text Effects
- Added
- 2026-09-21
- Deps
- none
- Updated
- 2026-09-21
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Magnetic Button
componentsA button whose label leans toward the cursor with a springy pull.
Cursor Label Follower
componentsA contextual chip that trails the pointer and names whatever it is over.
Snapping Cursor
componentsA cursor dot that latches onto interactive elements and takes their exact shape.