Encrypted Text
A cyberpunk-style text reveal animation that unscrambles random characters into legible text.
Raya UI Primitives
>Initializing secure connection...
Data encryption in progress. Decrypting payload sector 7G...
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/encrypted-text.jsonOr manually:
Install dependencies:
npm install @vueuse/coreCopy the component code into your project.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | The final text to reveal. |
| revealDelayMs | number | 50 | Speed of the reveal (ms per character). |
| flipDelayMs | number | 50 | Speed of the gibberish character scrambling. |
| encryptedClass | string | - | Class applied to unrevealed (scrambled) characters. |