Fuzzy Text
Pro
Text drawn on a canvas whose pixel rows jitter sideways, harder on hover or keyboard focus.
This level does not exist yet. Hover or focus the number.
Customize
0.18
0.55
30px
#f4ede3
Installation
Fuzzy Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy fuzzy-text.tsx into components/ui and run npm install motion.
Usage
import { FuzzyText } from "@/components/ui/fuzzy-text";
<FuzzyText text="404" fontSize="clamp(5rem, 16vw, 10rem)" className="font-display" />Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text to draw. It is also the accessible name of the canvas. |
| fontSize | number | string | — | Any CSS font size, such as 96 or a clamp(). Defaults to the inherited size. |
| fontWeight | number | 900 | Weight of the drawn text. |
| color | string | — | Text color. Defaults to the inherited color. |
| baseIntensity | number | 0.18 | Jitter at rest, from 0 to 1. |
| hoverIntensity | number | 0.55 | Jitter while hovered or focused, from 0 to 1. |
| fuzzRange | number | 30 | Largest sideways shift of a pixel row at full intensity, in pixels. |
| className | string | — | Extra classes, such as the font family. |
Dependencies: motion