Scanline

Stable

Atmospheric CRT and HUD overlay layer: phosphor raster lines, traveling laser sweep beam, digital grid scanner, and CRT phosphor flicker.

Installation

$pnpm add @siberui/react

Import

tsx

import { Scanline } from '@siberui/react';

Basic CRT Raster Usage

Non-intrusive, pointer-safe (pointer-events-none) CRT screen texture overlay for retro-futuristic displays.

CRT PHOSPHOR LAYER

Tactile retro-futuristic CRT screen raster overlay.

tsx

<div className="relative p-8 rounded-2xl bg-[#040812] border border-white/[0.08] overflow-hidden max-w-md w-full">
  <Scanline variant="crt" density="medium" intensity="medium" />
  <div className="relative z-10 space-y-2">
    <span className="text-xs font-mono text-cyan-400 font-bold">CRT PHOSPHOR LAYER</span>
    <p className="text-xs text-slate-300">Tactile retro-futuristic CRT screen raster overlay.</p>
  </div>
</div>

Visual Modes (CRT, Laser Sweep, Grid Scan, Glitch)

Configure visual modes via variant: static raster lines (crt), laser beam (sweep), or digital matrix (grid).

MODE: CRT

MODE: LASER SWEEP

MODE: GRID SCAN

tsx

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full">
  <div className="relative p-6 rounded-xl bg-[#050914] border border-white/[0.08] overflow-hidden">
    <Scanline variant="crt" signal="cyan" intensity="medium" />
    <span className="relative z-10 text-xs font-mono text-cyan-400 font-bold">MODE: CRT</span>
  </div>

  <div className="relative p-6 rounded-xl bg-[#050914] border border-white/[0.08] overflow-hidden">
    <Scanline variant="sweep" signal="violet" speed="normal" intensity="high" />
    <span className="relative z-10 text-xs font-mono text-violet-400 font-bold">MODE: LASER SWEEP</span>
  </div>

  <div className="relative p-6 rounded-xl bg-[#050914] border border-white/[0.08] overflow-hidden">
    <Scanline variant="grid" signal="emerald" speed="normal" intensity="high" />
    <span className="relative z-10 text-xs font-mono text-emerald-400 font-bold">MODE: GRID SCAN</span>
  </div>
</div>

Speed & Raster Density Calibration

Calibrate grid frequency using density ("fine" | "medium" | "coarse") and animation rate via speed ("slow" | "normal" | "fast").

FAST SWEEP (1.2s)

SLOW SWEEP (5.0s)

tsx

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">
  <div className="relative p-6 rounded-xl bg-[#050914] border border-white/[0.08] overflow-hidden">
    <Scanline variant="sweep" speed="fast" signal="cyan" intensity="high" />
    <span className="relative z-10 text-xs font-mono text-cyan-400 font-bold">FAST SWEEP (1.2s)</span>
  </div>

  <div className="relative p-6 rounded-xl bg-[#050914] border border-white/[0.08] overflow-hidden">
    <Scanline variant="sweep" speed="slow" signal="amber" intensity="high" />
    <span className="relative z-10 text-xs font-mono text-amber-400 font-bold">SLOW SWEEP (5.0s)</span>
  </div>
</div>

Retro CRT Terminal Emulation

Composite CRT mainframe panel combining phosphor flicker (flicker) and grid scanlines.

// MAINFRAME_UPLINK

LIVE_FEED

> SEC_NODE: ESTABLISHED

> ENCRYPTION: 4096-BIT QUANTUM LATTICE

> STATUS: ALL VECTORS NOMINAL

tsx

<Card className="relative overflow-hidden border-emerald-500/40 bg-[#03060a] max-w-lg mx-auto shadow-2xl">
  <Scanline variant="grid" signal="green" speed="normal" intensity="high" flicker />
  <CardHeader className="relative z-10 border-b border-emerald-500/20">
    <div className="flex items-center justify-between">
      <CardTitle className="text-emerald-400 text-xs font-mono">// MAINFRAME_UPLINK</CardTitle>
      <Badge variant="glass" dot dotColor="green">LIVE_FEED</Badge>
    </div>
  </CardHeader>
  <CardContent className="relative z-10 p-6 font-mono text-xs text-emerald-300/90 space-y-1">
    <p>&gt; SEC_NODE: ESTABLISHED</p>
    <p>&gt; ENCRYPTION: 4096-BIT QUANTUM LATTICE</p>
    <p>&gt; STATUS: ALL VECTORS NOMINAL</p>
  </CardContent>
</Card>

API Reference

PROPERTIES (7)← swipe to inspect →

Property	Description	Type	Default
variant	Visual texture and scan animation mode.	"crt" \| "sweep" \| "grid" \| "glitch"	"crt"
signal	Laser beam and grid accent color.	"cyan" \| "violet" \| "green" \| "amber" \| "rose" \| "white"	"cyan"
speed	Laser sweep speed multiplier.	"slow" \| "normal" \| "fast"	"normal"
density	Pixel frequency and raster density of scanlines.	"fine" \| "medium" \| "coarse"	"medium"
intensity	Overall visual opacity and prominence.	"subtle" \| "medium" \| "high"	"medium"
direction	Laser sweep axis.	"vertical" \| "horizontal"	"vertical"
flicker	Enables CRT phosphor luminance shimmer.	boolean	false

Accessibility

Decorative Element: Scanline has aria-hidden="true" and pointer-events-none, completely ignoring pointer events.
Reduced Motion: Sweep and flicker animations automatically halt when prefers-reduced-motion: reduce is enabled.