Blur and clipping

Motion blur that follows each glyph's progress, and a clip that keeps rolling glyphs inside the line.

Blur

With blur on, which is the default, each glyph blurs in proportion to how far through its own transition it is: sharp when it's settled, softest halfway. A glyph that's leaving blurs harder than one that's arriving, so the new value always reads first.

blur={false}
blur={true}

Intensity

blurIntensity scales the blur, from 0 to 8, with 1 as the default. The radii come from the line height, so the same intensity looks the same at any size. 0 is the same as blur={false}.

blurIntensity={0.5}
blurIntensity={1}
blurIntensity={3}

A ceiling

maxBlurRadius caps the blur radius in density-independent pixels. It lets you push blurIntensity for small text without large text turning to soup, and it caps what a single transition can cost.

<NumericText value={value} fontSize={96} blurIntensity={3} maxBlurRadius={12} />

Clipping

clip, on by default, gives each glyph a window the height of the measured line, so a glyph rolling in or out is cut off at the edge of the line instead of overlapping whatever sits above or below it. The clip is applied after the blur, so the softness is kept right up to the edge.

clip={true}
clip={false}

With a large travel, turning the clip off lets glyphs sweep through the space around the text. Leave room above and below if you do.

On Android and the web the edge is feathered rather than cut: a glyph rolling past the line box fades out over a short band just outside it, so blurred glyphs never end on a hard line.

Props

PropTypeDefault
blurbooleantrue
blurIntensitynumber1
maxBlurRadiusnumberunbounded
clipbooleantrue