Cipher Text
Characters scramble and decode to reveal the final message.
Main Features of Cipher Text
How to Use Cipher Text in Next.js
Installation Guide for Cipher Text
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
targetText | string | ENCRYPTED_DATA | Target text to reveal |
backgroundColor | string | bg-zinc-950 | Background color of the component |
textColor | string | text-green-400 | Color of the text |
textSize | string | text-7xl md:text-9xl | Size of the text |
cyclesPerLetter | number | 2 | Number of cycles per letter |
shuffleTime | number | 50 | Time between shuffles in milliseconds |
chars | string | !@#$%^&*():{};|,.<>/? | Characters to use for scrambling |
autoScramble | boolean | true | Whether to auto-scramble on mount |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for security dashboards, developer portfolios, and tech-themed Next.js landing pages. Use this React component when you want to build a 'hacker' or 'encryption' aesthetic, decoding a message as it enters the view.
Best Practices
Maintain consistent spacing within your design system by choosing a `targetText` that fits your layout. Follow React best practices by avoiding too many `cyclesPerLetter` for longer strings to maintain readability. Optimize for performance by using a lightweight character set for scrambling.
Why This Component Matters in Modern UI Development
Cipher reveals add a layer of interactivity and narrative flair. This production-ready component gives you a robust implementation of text scrambling physics, adding a high-tech feel and semantic authority to your real-world application architecture.
Frequently Asked Questions
QCan I use custom characters for scrambling?
Yes, the `chars` prop lets you define exactly which symbols (e.g., binary, matrix code, or emoji) are used during the shuffle.
QHow long does the reveal take?
The duration is determined by `cyclesPerLetter` and `shuffleTime`. Shorter shuffles feel 'glitchy', while longer ones feel like complex decryption.
QDoes it support auto-reveal on scroll?
Yes, it is designed to trigger automatically when mounted, which can be combined with an Intersection Observer for scroll-timed reveals.