Fuzzy Text
Text Effects
Canvas-powered text distortion effect with hover-reactive intensity, glitch mode, and directional fuzzing.
Loading preview...
Customize
Direction:
Text
Base Intensity0.18
Hover Intensity0.5
Fuzz Range30
Font Size
Font Weight900
Enable Hover
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | required | Text content rendered into the canvas. |
fontSize | number | string | 'clamp(2rem, 8vw, 8rem)' | Canvas text size. |
fontWeight | number | string | 900 | Text weight used in canvas drawing. |
fontFamily | string | 'inherit' | Font family for rendered text. |
color | string | '#fff' | Text fill color when no gradient is set. |
enableHover | boolean | true | Enable hover reactivity on the text area. |
baseIntensity | number | 0.18 | Base fuzz intensity. |
hoverIntensity | number | 0.5 | Hover fuzz intensity. |
fuzzRange | number | 30 | Maximum displacement range in pixels. |
fps | number | 60 | Target draw FPS. |
direction | 'horizontal' | 'vertical' | 'both' | 'horizontal' | Distortion axis. |
transitionDuration | number | 0 | Smoothing time for intensity changes (ms). |
clickEffect | boolean | false | Temporarily spikes intensity on click. |
glitchMode | boolean | false | Auto glitch spikes over time. |
glitchInterval | number | 2000 | Interval between glitch spikes (ms). |
glitchDuration | number | 200 | Glitch spike duration (ms). |
gradient | string[] | null | null | Optional horizontal gradient colors. |
letterSpacing | number | 0 | Additional letter spacing in pixels. |
className | string | '' | Additional classes for the canvas element. |