Cyber Scanline
Digital CRT scanline effect with signal noise and green terminal aesthetic.
Main Features of Cyber Scanline
How to Use Cyber Scanline in Next.js
Installation Guide for Cyber Scanline
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #000000 | Background color |
overlayColor | string | #051a05 | Overlay color |
scanlineColor | string | rgba(74, 222, 128, 0.2) | Scanline color |
scanlineHeight | string | 10px | Scanline height |
scanlineBlur | string | md | Scanline blur |
scanlineOpacity | number | 1 | Scanline opacity |
scanlineDuration | number | 6 | Scanline animation duration |
noiseOpacity | number | 0.1 | Noise overlay opacity |
noiseBaseFrequency | string | 1.2 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
text | string | System | Text label |
className | string | Additional CSS classes |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QCan I change the terminal color?
Yes, you can customize the background overlay (`overlayColor`) and the scanline color (`scanlineColor`) to create amber or white CRT effects.
QHow large are the scanlines?
You can adjust the `scanlineHeight` and `scanlineSpacing` to range from subtle fine lines to thick, retro-style bars.
QIs the signal noise animated?
Yes, there is a subtle layer of digital noise that moves independently of the scanlines to simulate authentic electronic interference.