Encrypted Text
A text component that reveals the text gradually, gibberish effect.
}-sd{;C Ux PsA -^dmH;W Fl+/
Installation
Run the following command
npx shadcn@latest add @aceternity/encrypted-textExample
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. U<a U@c:[W/x It( K};J}O5 $SIl GZ +.Z TyVR#b
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
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
