Fuzzy Text⁽⁰¹⁵⁾

Canvas-driven CRT static fuzz and particulate distortion that scatters on interaction.

Hover

Installation

$npx kibo add fuzzy-text

Usage

1import { FuzzyText } from "@/components/kibo/fuzzy-text/component";
2 
3export default function Example() {
4  return (
5    <FuzzyText />
6  );
7}

Props Reference

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Child elements or content to render inside the component.
`fontSize`	`number \| string`	'clamp(2rem, 8vw, 8rem)'	Font size in pixels, rems, or fluid clamp notation.
`fontWeight`	`string \| number`	900	Font weight (e.g., 400, 700, 900, 'bold').
`fontFamily`	`string`	'inherit'	Custom font family to apply to the rendered typography.
`color`	`string`	'#fff'	Text or primary fill color.
`enableHover`	`boolean`	true	Whether hovering over the element triggers or alters the animation.
`baseIntensity`	`number`	0.18	Resting distortion or animation intensity (0 to 1).
`hoverIntensity`	`number`	0.5	Peak animation intensity when hovered (0 to 1).
`fuzzRange`	`number`	30	Controls the fuzz range for the component animation.
`fps`	`number`	60	Controls the fps for the component animation.
`direction`	`'horizontal' \| 'vertical' \| 'both'`	'horizontal'	Direction of movement (e.g., 'top', 'bottom', 'left', 'right').
`transitionDuration`	`number`	0	Controls the transition duration for the component animation.
`clickEffect`	`boolean`	false	Controls the click effect for the component animation.
`glitchMode`	`boolean`	false	Controls the glitch mode for the component animation.
`glitchInterval`	`number`	2000	Controls the glitch interval for the component animation.
`glitchDuration`	`number`	200	Controls the glitch duration for the component animation.
`gradient`	`string[] \| null`	null	Controls the gradient for the component animation.
`letterSpacing`	`number`	0	Controls the letter spacing for the component animation.
`className`	`string`	''	Additional CSS classes for styling and layout.