Browse components
Fuzzy Text
Canvas-drawn lettering whose pixel rows jitter sideways like a weak signal, getting noisier when you hover it.
FUZZY
Signal lost, hover to interfere
Installation
npx shadcn@latest add @glint-ui/fuzzy-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/fuzzy-text.json
Usage
import { FuzzyText } from "@/components/ui/fuzzy-text";
<FuzzyText text="404" baseIntensity={0.2} hoverIntensity={0.6} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "FUZZY" | Text to draw. |
| fontSize | string | "clamp(4rem, 15vw, 10rem)" | Any CSS font-size; resolved to px for the canvas. |
| fontWeight | number | 900 | Font weight. |
| color | string | "#fafafa" | Text color. |
| baseIntensity | number | 0.18 | Jitter at rest. |
| hoverIntensity | number | 0.55 | Jitter while hovered. |
| fuzzRange | number | 30 | Maximum sideways shift of a row, in px. |
| enableHover | boolean | true | Ramp up the jitter on hover. |
| className | string | — | Extra classes for the root element. |