Decryptor
Matrix-style decryptor FAQ with scrambled text.
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. |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.