Displacement Smear Type
A headline that smears along the pointer's direction of travel with a real accumulation blur.
DOM + CSS0 deps1 file · 6 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
/**
* Type that smears along the direction the pointer is travelling.
*
* The blur is an ACCUMULATION, not a Gaussian: several copies of the line,
* offset along the velocity vector with falling opacity. That is how motion
* blur is actually produced in real-time rendering, and it is the difference
* between type that looks fast and type that looks out of focus.
*/
export function DisplacementSmearType({
text = "MOMENTUM",
ghosts = 4,
strength = 0.9,
falloff = 180,
smoothing = 0.22,
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this text effect
A CSS blur cannot make type look fast. Gaussian blur is symmetric, so it always reads as out of focus; motion is directional, and the way real-time rendering fakes it is accumulation — the same frame drawn several times, each offset further along the velocity vector, each fainter than the last. That is what this does, and the details around it are what make it convincing. The copies trail behind the motion rather than straddling it, because a straddled stack reads as a double image. The opacity ramp falls toward zero so the stack sums to roughly the original density instead of blowing the type out into a slab. The displacement is weighted by a Gaussian on each glyph's distance from the pointer, so the line bends around the cursor rather than sliding as a block. And the velocity is run through an exponential moving average inside a rAF loop rather than being set from pointer events — which is the detail almost everyone misses, because a stationary pointer emits no events at all, so an event-driven smear freezes at full stretch the instant you stop moving. Feeding the average a per-frame delta that becomes zero when nothing moves is what lets it relax back to rest. Glyph centres are measured once at rest and again after webfonts resolve, since measuring during the animation would read the transformed position and feed the displacement back into itself.
Curator’s note
The decay is the part people miss — drive the smear only from pointermove and it freezes at full stretch the moment the cursor stops.
