Cyber Terminal
Cyber terminal FAQ with glitch and scanline effects.
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. |
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
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.
FAQ
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.
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.