Decrypting Text
A mesmerizing text animation component that simulates the process of decrypting or revealing text character by character. Perfect for creating dramatic reveals, loading states, or adding a cyberpunk aesthetic to your applications.
🎬 Live Demo
Watch the decrypting animation in action:
✨ Features
- 🔐 Scrambling Effect: Characters scramble with random symbols before revealing the final text
- ⚡ Customizable Speed: Control the animation speed to match your design needs
- 🎯 Character-by-Character Reveal: Progressive revelation from left to right
- 🎨 Smooth Transitions: Built with Framer Motion for buttery smooth animations
- 📱 Responsive Design: Adapts beautifully to different screen sizes
- 🔧 TypeScript Support: Fully typed for better development experience
🚀 Quick Start
Basic Usage
Advanced Example
📋 API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
targetText | string | Required | The final text to be revealed after decryption |
speed | number | 8 | Controls animation speed (lower = faster, higher = slower) |
Animation Behavior
- Character Pool: Uses A-Z, a-z, and special symbols (
!@#$%^&*()-+=[]{}|;:,.<>?) - Reveal Pattern: Characters are revealed sequentially from left to right
- Space Handling: Spaces are preserved and not scrambled
- Performance: Uses
requestAnimationFramefor smooth 60fps animations
🎨 Styling Guide
The component uses these default classes:
Custom Styling
🎯 Use Cases
1. Loading States
Perfect for indicating system processes or data loading:
2. Hero Sections
Create dramatic text reveals for landing pages:
3. Gaming Interfaces
Add cyberpunk aesthetics to game UIs:
4. Terminal Simulations
Simulate command-line interfaces:
🔧 Customization Examples
Slow Dramatic Reveal
Fast Hacker-Style
Multi-line Poetry
🎪 Interactive Playground
Try different configurations and see the results instantly:
🔬 Experiment Zone
Modify the component above using the reload button to see different speed settings and text combinations.
- • Speed 1-3: Lightning fast
- • Speed 4-8: Balanced
- • Speed 9-15: Dramatic slow
- • Use monospace fonts
- • Dark backgrounds work best
- • Keep text concise for impact
🚨 Performance Notes
- Uses
requestAnimationFramefor optimal performance - Automatically cleans up animations on unmount
- Minimal re-renders with efficient state management
- Handles edge cases like empty strings and special characters
🎭 Animation Inspiration
This component draws inspiration from:
- Matrix-style digital rain effects
- Cyberpunk terminal interfaces
- Hacker movie decryption sequences
- Retro computer boot screens
Perfect for creating that authentic "digital archaeology" feeling where secrets are gradually unearthed from the digital realm! 🕵️♂️✨