Vibrating fuzzy text with controllable hover intensity.
Every prop is wired to the controls underneath. Hover the text to raise the fuzz, or turn on Glitch Mode for random bursts.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "" | The text content to display inside the fuzzy text component (the original takes it as children). |
fontSize | number | string | "clamp(2rem, 8vw, 8rem)" | Specifies the font size of the text. Accepts any valid CSS font-size value or a number (interpreted as pixels). |
fontWeight | string | number | 900 | Specifies the font weight of the text. |
fontFamily | string | "inherit" | Specifies the font family of the text. 'inherit' uses the computed style from the parent. |
color | string | "#fff" | Specifies the text color. |
enableHover | boolean | true | Enables the hover effect for the fuzzy text. |
baseIntensity | number | 0.18 | The fuzz intensity when the text is not hovered. |
hoverIntensity | number | 0.5 | The fuzz intensity when the text is hovered. |
fuzzRange | number | 30 | Maximum pixel displacement for the fuzzy effect. |
fps | number | 60 | Frame rate cap for the animation. Lower values reduce CPU usage. |
direction | "horizontal" | "vertical" | "both" | "horizontal" | The axis/axes for the fuzzy displacement effect. |
transitionDuration | number | 0 | Number of frames to ease between intensity states for smooth transitions. |
clickEffect | boolean | false | Enables a momentary burst of maximum intensity on click. |
glitchMode | boolean | false | Enables periodic random intensity spikes for a glitch effect. |
glitchInterval | number | 2000 | Milliseconds between glitch bursts when glitchMode is enabled. |
glitchDuration | number | 200 | Milliseconds duration of each glitch burst. |
gradient | string[] | null | null | Array of colors to create a gradient text effect (e.g. ["#ff0000", "#00ff00"]). |
letterSpacing | number | 0 | Extra pixels between characters. |
Keyboard shortcuts and ARIA behavior.