Scrambled Text⁽⁰²¹⁾

Proximity-based character scrambler dynamically distorting glyphs near the cursor.

Hover

Hover near this text to scramble individual characters in real time.

Loading…

Installation

$npx kibo add scrambled-text

Usage

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

Props Reference

Prop	Type	Default	Description
`radius`	`number`	100	Effect calculation radius in pixels from cursor position.
`duration`	`number`	1.2	Duration of the animation in seconds or milliseconds.
`speed`	`number`	0.5	Speed multiplier for the motion playback.
`scrambleChars`	`string`	'.:!#@$%^&*()_+~\|}{[]'	Controls the scramble chars for the component animation.
`className`	`string`	''	Additional CSS classes for styling and layout.
`style`	`React.CSSProperties`	{}	Controls the style for the component animation.
`children`	`string`	-	Child elements or content to render inside the component.