Encrypted Text
A cyberpunk-style text reveal animation that unscrambles random characters into legible text.
Installation
npx raya-ui@latest add encrypted-textFile Structure
your-project
components
ui
encrypted-text
EncryptedText.vue
API Reference
Props
textstringThe final legible text to reveal.
revealDelayMsnumber50Speed of the reveal process (milliseconds per character).
flipDelayMsnumber50Speed of the gibberish character scrambling effect.
encryptedClassstringundefinedOptional Tailwind classes applied strictly to the unrevealed (scrambled) characters for styling contrast.
Raya UI Primitives
Settings
50ms
50ms
source-code.vue
<script setup lang="ts">
import { EncryptedText } from '@/components/ui/encrypted-text'
</script>
<template>
<EncryptedText
text="Raya UI Primitives"
/>
</template>