Components
Text Scramble
Text that scrambles through random characters before revealing the final text.
Text Scramble
The TextScramble component creates text that scrambles through random characters before revealing the final text. It's perfect for creating engaging text transitions and dynamic content displays.
Usage
Text Scrambling
Transform Your Digital Experience
Create stunning interfaces with our collection of animated components that enhance user engagement and drive results.
Scramble Controls
Live Preview
Title Preview
Transform Your Digital Experience
Subtitle Preview
Create stunning interfaces with our collection of animated components that enhance user engagement and drive results.
Example Usage
Feature Highlight
New!
Performance
99.9% Uptime
Get Started Today
Why Choose Our Scramble Effects?
Lightning Fast
Optimized for performance with minimal load times
Beautiful Effects
Stunning animations that captivate your audience
Easy Integration
Simple to implement with clean, well-documented code
<template>
<MTextScramble text="Scramble Text" />
</template>
Props
text
string
Text to scramble.
duration
number
Animation duration in seconds.
speed
number
Speed of character transitions.
characterSet
string
Characters to use for scrambling.
as
string
HTML element to render as.
className
string
CSS classes to apply to the container.
trigger
boolean
Enable/disable the scrambling.
onScrambleComplete
function
Callback when scramble completes.
Examples
Basic Text Scramble
Security Verification
Generating secure token...
Verification Status Secure
Encryption
AES-256
Protocol
TLS 1.3
Token
X9K2-PQ4R-7M8N
<template>
<MTextScramble text="Basic Scramble" />
</template>
Fast Scramble
Fast Scramble
<template>
<MTextScramble text="Fast Scramble" :duration="0.5" :speed="0.02" />
</template>
Symbol Scramble
Symbol Scramble
<template>
<MTextScramble text="Symbol Scramble" character-set="!@#$%^&*()_+-=[]{}|;:,.<>?" />
</template>
As Heading
Heading Scramble
<template>
<MTextScramble text="Heading Scramble" as="h1" class="text-3xl font-bold" />
</template>
Manual Trigger
Text Scrambling
Transform Your Digital Experience
Create stunning interfaces with our collection of animated components that enhance user engagement and drive results.
Scramble Controls
Live Preview
Title Preview
Transform Your Digital Experience
Subtitle Preview
Create stunning interfaces with our collection of animated components that enhance user engagement and drive results.
Example Usage
Feature Highlight
New!
Performance
99.9% Uptime
Get Started Today
Why Choose Our Scramble Effects?
Lightning Fast
Optimized for performance with minimal load times
Beautiful Effects
Stunning animations that captivate your audience
Easy Integration
Simple to implement with clean, well-documented code
<template>
<div class="p-4 space-y-4">
<MTextScramble text="Click to scramble" :trigger="scrambleTrigger" />
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="triggerScramble"
>
Scramble Text
</button>
</div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const scrambleTrigger = ref(true)
const triggerScramble = () => {
// Toggle the trigger to initiate scramble
scrambleTrigger.value = false
nextTick(() => {
scrambleTrigger.value = true
})
}
</script>