Skip to main content
Create a captivating decryption effect that reveals text character by character from scrambled glyphs.

​
Usage

<EncryptedText
  text="Your secret message"
  :revealDelayMs="50"
  :flipDelayMs="50"
  charset="A-Za-z0-9!@#$%^&*"
/>

​
Props

​
text
string
required
The text to render and reveal.
​
class
string
default:""
Base class applied to the wrapper element.
​
revealDelayMs
number
default:"50"
Delay (in ms) between revealing each next character.
​
flipDelayMs
number
default:"50"
Delay (in ms) between re-scrambling unrevealed characters.
​
charset
string
default:"A-Z a-z 0-9 !@#$%^&*()_+-={}[];:,.<>/?"
Character set used for the scrambled glyphs.
​
encryptedClass
string
default:""
Class applied to characters while still encrypted/scrambled.
​
revealedClass
string
default:""
Class applied to characters once revealed.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us