Scanlines

Scanlines lays fine horizontal CRT lines over its content. Use it to give a readout, a metric or a media tile the look of a HUD display.

import { Scanlines } from 'jarvis-react-ui';

Basic

Scanlines wraps its children in a relative, overflow-hidden <div> and draws the lines on top with a screen blend, so the content stays readable. Style the wrapper with className.

import { Scanlines } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <Scanlines className="w-[260px] border border-border bg-surface px-6 py-4">
            <div className="text-[10px] uppercase tracking-[1px] text-text-secondary">
                NET · 12.3 Mb/s
            </div>
        </Scanlines>
    );
}

Sweep

sweep adds a light band that moves across the content in a loop, e.g. while data is loading or streaming in.

import { Scanlines } from 'jarvis-react-ui';

export default function Sweep() {
    return (
        <Scanlines sweep className="w-[260px] border border-border bg-surface px-6 py-4">
            <div className="text-[10px] uppercase tracking-[1px] text-accent">Receiving data…</div>
        </Scanlines>
    );
}

For a full-screen scanline layer use Scene, which includes one.

Accessibility

• The scanline overlay and the sweep band are aria-hidden and ignore pointer events; the children stay fully accessible and clickable.
• With prefers-reduced-motion: reduce both the scanlines and the sweep band are hidden (motion-reduce:hidden), and only the content remains.

API