Decryptor
Matrix-style decryptor FAQ with scrambled text.
Main Features of Decryptor
How to Use Decryptor in Next.js
Installation Guide for Decryptor
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
faqs | Array<{id: number, q: string, a: string}> | [] | Array of FAQ items with id, question (q) and answer (a). |
backgroundColor | string | #001000 | Background color (hex, rgb, or hsl). |
backgroundImage | string | https://media.giphy.com/media/U3qYN8S0j3bpK/giphy.gif | Background image URL for matrix effect. |
borderColor | string | #00ff00 | Border color. |
questionTextColor | string | #00ff00 | Question text color. |
answerTextColor | string | #00dd00 | Answer text color. |
activeBgColor | string | #003300 | Active item background color. |
hoverBgColor | string | #001100 | Hover background color. |
iconColor | string | #00ff00 | Terminal icon color. |
scrambleChars | string | XYZ010101<>?// | Characters used for scrambling effect. |
Related Components
When to Use
Perfect for security-themed sites, developer portfolios, and Next.js sites that want a digital 'hacker' or Matrix aesthetic. Use this React component for a high-fidelity 'decrypting' effect where text scrambles and solves as the user hovers over it.
Best Practices
Follow React best practices by using monospaced typography and high-contrast colors (e.g., matrix green on black). Maintain scalable component architecture by adjusting `scrambleChars` for different thematic intensities. Optimize for performance by managed the scramble frequency.
Why This Component Matters in Modern UI Development
Decryption visuals communicate technical depth and security. This production-ready component helpsคุณ build an interface that feels advanced and encrypted, reinforcing a technical brand identity.
Frequently Asked Questions
QHow does the scramble work?
The component replaces the original text with random characters (`scrambleChars`) and progressively 'solves' them back to the original text over a short duration.
QCan I use it as a background?
Yes, it includes an optional background GIF or image layer (like the classic Matrix code) to reinforce the technical aesthetic.
QDoes it support custom characters?
Absolutely, you can pass any string of characters to the `scrambleChars` prop to create different types of 'encrypted' looks.