Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Text

Pro

Fuzzy Text for React

Text that fuzzes like a bad analogue signal, its rows of pixels shaking sideways, harder or clear on hover. For React with Base UI, when a headline should feel tuned in from static.

Framework

Fuzzy Text shakes a line like a weak analogue signal: its rows of pixels jitter sideways, a new pattern every few frames, so the letters shimmer with static. It fuzzes harder while the pointer is over it, or, the other way round, comes into focus.

Use it for an atmospheric headline, a retro or horror theme, or a label that should resolve when someone reaches for it. For noise that settles into the text once, use Decrypted Text; for tears in bursts, Glitch Text. The text stays real text: an SVG filter of noise displaces it, four seeds of noise stepped through by a CSS keyframe animation the install adds to your stylesheet, at about twelve frames a second, with no canvas and no frame loop. With reduced motion the fuzz holds still.

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { FuzzyText } from "@/components/ui/fuzzy-text";
<h1>
  <FuzzyText text="No signal" />
</h1>

Demos

Focus

hoverIntensity is how it fuzzes under the pointer, strong by default; none turns it around, so a strongly fuzzed label comes into focus when the pointer reaches it.

Preview width

Intensity

intensity is how far the rows shake at rest: subtle, medium (the default) or strong; none leaves the text clear until it's hovered.

Preview width

Accessibility

The text is real text, read once by screen readers and selectable; the filter only changes how it's drawn. The fuzz never flashes: it shakes the letters' edges without changing their brightness. With reduced motion it holds still, and in forced-colors mode the filter is dropped. Keep strong for short, large text: it costs legibility.

FAQ

How is the fuzz made?

An SVG filter in the component: horizontal bands of noise (feTurbulence) push each row of the text's pixels sideways (feDisplacementMap). Four filters with different seeds are stepped through by a CSS animation, so the static changes about twelve times a second.

Does it work in every browser?

SVG filters on HTML text work in current Chrome, Edge, Firefox and Safari. Safari may draw the filtered text a touch softer; check your headline there if it's small.

Can I use several on one page?

Yes. Each one names its filters with an id of its own, so instances never share or override each other's filters.

Does the fuzz scale with the text?

No: it shakes the rows by a number of pixels, the same at any size, so it reads stronger on small text. Use subtle on smaller text and save strong for headlines.

Is it expensive?

The filter runs each time the frame changes, about twelve times a second, over the text's area only. Keep it to a headline or a label rather than a paragraph.

What happens with reduced motion?

The static holds still: the text keeps its fuzz, or its focus on hover, without changing.

API Reference

FuzzyText

<span> data-slot="fuzzy-text"

PropType
textstring

The text.

hoverIntensity?Intensity

How hard it fuzzes while the pointer is over it; none brings it into focus.

Default
"strong"
intensity?Intensity

How hard it fuzzes: how far its rows of pixels shake sideways. @default "medium".

Default
"medium"
render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string

Merged with the part's classes.

CSS variableType
--fuzzy-text-0string

The first frame's filter (--fuzzy-text-1 to -3 the others; -hover- while hovered).

--fuzzy-text-hover-0string
All 97 text effects