Encrypted Text

A text component that reveals the text gradually, gibberish effect.

?OFJUgN @v LHJ DEn-b:1 ,,Q6

Installation

Run the following command

npx shadcn@latest add @aceternity/encrypted-text

Example

Open in

You are not your job, you're not how much money you have in the bank. You are not the car you drive. You're not the contents of your wallet. You are not your fucking khakis. ^#h #^8gY+ut {!v D!-5#VN Da#) aj ^8. U5k<H(

Props

Encrypted Text Props

Prop	Type	Default	Description	Required
`text`	`string`	-	The text to be encrypted and revealed.	Yes
`className`	`string`	-	Additional CSS classes to apply to the component.	No
`revealDelayMs`	`number`	`50`	Time in milliseconds between revealing each subsequent real character.	No
`charset`	`string`	`"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-={}[];:,.<>/?"`	Custom character set to use for the gibberish effect.	No
`flipDelayMs`	`number`	`50`	Time in milliseconds between gibberish flips for unrevealed characters.	No
`encryptedClassName`	`string`	-	CSS class for styling the encrypted/scrambled characters.	No
`revealedClassName`	`string`	-	CSS class for styling the revealed characters.	No

Build websites faster and 10x better than your competitors with
Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

70+ templates and component blocks combined

Ready to copy paste component blocks, save days of development time

Get lifetime access