Scanline Background

Fine lines, a slow refresh bar and curved-glass edges. Where Scanline textures an existing panel, this is the backdrop of a section.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add scanline-background

Usage

Example

import { ScanlineBackground } from "@/components/galactrex/scanline-background";

<section className="relative overflow-hidden">
  <ScanlineBackground />
  <h1 className="relative">Channel 3</h1>
</section>

Source

Installs to components/galactrex/scanline-background.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`spacing`	`number`	`4`	Gap between lines in px.
`opacity`	`number`	`0.14`	Line strength, 0 to 1.
`sweep`	`boolean`	`true`	A refresh bar sweeping down.
`speed`	`number`	`7`	Seconds per sweep.
`vignette`	`boolean`	`true`	Darken the edges like curved glass.
`color`	`string`	`var(--gxui-ink)`	Line colour.
`className`	`string`	—	Extra classes for the outer element.

Variants

Broadcast. Lines, sweep and vignette.
Flat panel. `vignette={false} sweep={false}`.

Accessibility

Decorative only and aria-hidden; never takes pointer events.

Motion and reduced motion

Transform-only sweep.
Stops offscreen.
Reduced motion: no sweep.