Encrypted Text — React Component

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

About Encrypted Text

The Encrypted Text component scrambles characters randomly before revealing the final text, cycling through alphanumeric characters at configurable speed before settling. It triggers on mount by default but can also be bound to hover or scroll events. Use it for data-like reveals, loading state placeholders where real data is incoming, or as a stylistic animation for developer-focused products that want to communicate a coded, technical aesthetic.

Common use cases

Data value loading reveals
Developer tool interface text
Cyberpunk and tech aesthetic animations
Hero heading entrance effects