Cyber Terminal
Cyber terminal FAQ with glitch and scanline effects.
Main Features of Cyber Terminal
How to Use Cyber Terminal in Next.js
Installation Guide for Cyber Terminal
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
faqs | Array<{q: string, a: string}> | [] | Array of FAQ items with question (q) and answer (a). |
backgroundColor | string | #050505 | Background color (hex, rgb, or hsl). |
gridColor | string | rgba(0,255,0,0.03) | Grid pattern color. |
containerBgColor | string | rgba(0,0,0,0.8) | Container background color. |
containerBorderColor | string | rgba(0,255,0,0.5) | Container border color. |
containerShadowColor | string | rgba(0,255,0,0.1) | Container shadow color. |
dotColor1 | string | #ef4444 | First dot color (red). |
dotColor2 | string | #eab308 | Second dot color (yellow). |
dotColor3 | string | #22c55e | Third dot color (green). |
versionText | string | System_FAQ_v2.0 | Version text displayed in header. |
versionTextColor | string | rgba(0,255,0,0.7) | Version text color. |
questionTextColor | string | rgba(0,255,0,0.7) | Question text color. |
activeQuestionTextColor | string | #4ade80 | Active question text color. |
activeBgColor | string | rgba(0,255,0,0.1) | Active item background color. |
activeBorderColor | string | rgba(0,255,0,0.5) | Active item border color. |
answerTextColor | string | rgba(0,255,0,0.8) | Answer text color. |
answerPrefixColor | string | rgba(0,255,0,0.5) | Answer prefix color (>). |
hoverBorderColor | string | rgba(0,255,0,0.3) | Hover border color. |
Related Components
When to Use
Ideal for terminal-style dashboards, cyberpunk landing pages, and Next.js sites that want a digital 'CRT' aesthetic. Use this React component for a scanline effect with integrated digital signal noise and a glowing terminal green color palette.
Best Practices
Follow React best practices by pairing this with monospaced typography. Maintain scalable component architecture by keeping the scanline opacity low enough to ensure content readability. Optimize for performance by managing the glitch animation durations.
Why This Component Matters in Modern UI Development
Cyber terminal visuals evoke a sense of technical authority and secure infrastructure. This customizable UI component givesคุณ a hardware-accelerated version of this aesthetic, reinforcing a technical feel for your project.
Frequently Asked Questions
QCan I change the terminal color?
Yes, you can customize the border, text, and active colors to create amber, cyan, or white CRT effects.
QHow intensive is the glitch?
The glitch is subtle by default to ensure it doesn't distract from the actual content while still providing a techy vibe.
QDoes it support custom fonts?
Yes, while it defaults to monospaced, you can pass any system or Google Font via your CSS to enhance the terminal look.