Decrypted Text⁽⁰¹⁰⁾

Cyberpunk-inspired text decryption effect scrambling through random glyphs before resolving.

HoverClick

Requires:motion

Loading…

Installation

$npx kibo add decrypted-text

Usage

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

Props Reference

Prop	Type	Default	Description
`text`	`string`	-	The text content to display and animate.
`speed`	`number`	50	Speed multiplier for the motion playback.
`maxIterations`	`number`	10	Controls the max iterations for the component animation.
`sequential`	`boolean`	false	Controls the sequential for the component animation.
`revealDirection`	`'start' \| 'end' \| 'center'`	'start'	Controls the reveal direction for the component animation.
`useOriginalCharsOnly`	`boolean`	false	Controls the use original chars only for the component animation.
`characters`	`string`	'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+'	Controls the characters for the component animation.
`className`	`string`	''	Additional CSS classes for styling and layout.
`encryptedClassName`	`string`	''	Controls the encrypted class name for the component animation.
`parentClassName`	`string`	''	Controls the parent class name for the component animation.
`animateOn`	`'view' \| 'hover' \| 'inViewHover' \| 'click'`	'hover'	Controls the animate on for the component animation.
`clickMode`	`'once' \| 'toggle'`	'once'	Controls the click mode for the component animation.