Installation
Examples
Hover Intensified
Purple text with subtle base fuzz that intensifies dramatically on hover — great for interactive hero elements.
Always Fuzzy (No Hover)
Static fuzzy effect with hover disabled. Fixed pixel font size for consistent rendering.
Usage
import FuzzyText from "@/components/motionx/fuzzy-text";Basic usage
<FuzzyText fontSize="clamp(2rem, 8vw, 5rem)" fontWeight={900} color="#fff">
Hello World
</FuzzyText>Custom hover intensity
<FuzzyText
fontSize={64}
fontWeight={800}
color="#a855f7"
baseIntensity={0.1}
hoverIntensity={0.8}
>
Hover Me
</FuzzyText>No hover interaction
<FuzzyText
fontSize={48}
color="#38bdf8"
enableHover={false}
baseIntensity={0.3}
>
Always Fuzzy
</FuzzyText>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Text content to render (required) |
fontSize | number | string | "clamp(2rem, 8vw, 8rem)" | Font size — accepts px number or CSS clamp/string |
fontWeight | string | number | 900 | Font weight value |
fontFamily | string | "inherit" | Font family — "inherit" uses parent's font |
color | string | "#fff" | Text fill color (any valid CSS color) |
enableHover | boolean | true | Enable hover-to-intensify interaction |
baseIntensity | number | 0.18 | Base fuzz distortion intensity (0 = none, 1 = max) |
hoverIntensity | number | 0.5 | Fuzz intensity when hovering over text |