Text with a flickering noise displacement, like a worn signal, that grows rougher while hovered or focused.
npx shadcn@latest add https://hyperblur.dev/r/text-fuzzy.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-fuzzy.tsx.
import { TextFuzzy } from "@/components/hyperblur/text-fuzzy"
<TextFuzzy text="Static Bloom" className="font-grotesk text-5xl font-bold" tabIndex={0} />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Text to render. |
| baseIntensity | number | 2 | Displacement in pixels while idle. |
| hoverIntensity | number | 14 | Displacement in pixels while hovered or focused. |
| frequency | number | 0.7 | Vertical noise frequency. Higher values give finer scanline tearing. |
| fps | number | 14 | How many times per second the noise pattern changes. |
| glow | boolean | true | Soft halo behind the letters. |