Encrypted Text

Characters shuffle through gibberish before locking into the final string — a futuristic cyber decoding reveal for hero headings, buttons, badges, and nav links.

Motion Effectshoverscrollanimationtextcyberrevealtypewriterhackerdecode

Encrypted Text

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

text

The final string that gets revealed.

trigger

What event starts the animation.

speed

Milliseconds between each character locking in.

shuffleSpeed

Milliseconds between gibberish shuffle ticks.

iterations

Shuffle cycles that run before the first character locks.

revealDelay

Milliseconds before the animation begins.

characters

Character set used for the gibberish phase.

loop

Replay the animation after completion.

Generated JSX

Copy this into your page.

<EncryptedText
  text=""
  trigger="load"
  speed={50}
  shuffleSpeed={35}
  iterations={8}
  revealDelay={0}
  characters=""
  loop={false}
/>

Animation effects

hoverscroll

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

Installation

Encrypted Text

Shape the component before you copy it.

Animation effects