Displacement Smear Type

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.