Scan beam

Glowing interference lines on a curved screen, swept by a bright scan beam; the pointer bulges them like a lens and a click sends a ping.

element
scanner
crt
lines
beam
shader
since 0.2

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Scan beam example

Code

It follows the controls above: change an option and the code changes with it.

<script src="https://search.axi0.io/axi0/motion/motion.js" defer></script>

<axi0-scan-beam cover></axi0-scan-beam>

import { ScanBeam } from "./motion/react/ScanBeam";

<ScanBeam />

<script setup lang="ts">
import ScanBeam from "./motion/vue/ScanBeam.vue";
</script>

<template>
  <ScanBeam />
</template>

const fx = document.createElement("axi0-scan-beam");
document.querySelector("#hero").append(fx);

The wrappers: ScanBeam.tsx (React, TypeScript) and ScanBeam.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`lines`	`22`	How many lines run across the screen
`sweep`	`1`	How fast the beam sweeps (0 stops it)
`lens`	`1`	How strongly the pointer bulges the lines
`colors`	auto	Colors, comma separated (empty: the palette for the page's theme)
`background`	auto	Background color (empty: the theme's)
`speed`	`1`	How fast it moves
`theme`	`auto`	Light or dark palette (auto: from the page behind it)
`cover`	`false`	Fill the nearest positioned parent, behind its content

Decorative: the canvas is aria-hidden and takes no focus; with cover it ignores the pointer, so the content above it stays clickable and readable. Under reduced motion the beam and lines stand still; sweep="0" stops the beam for everyone. Drawn by the shared WebGL runner below device resolution (never more than one pixel per CSS pixel, device pixel ratio capped at 2); it starts when it comes within 300 px of the screen, the frame loop stops off screen and in hidden tabs, and reduced motion draws one still frame with no movement. Without WebGL it shows a still gradient in its own colors.

Size

scan-beam.js is 1.0 KB gzip, with gl.js 2.1 KB and backgrounds-kit.js 3.4 KB it needs. A page loads the loader (2.9 KB) and core.js (1.4 KB) once, whatever it uses.