Scanner

Calm interference bands sweeping across the screen like an oscilloscope.

Default

Every prop is wired to the controls underneath. The bands are drawn in a WebGL fragment shader and brighten near the cursor.

Demo Content

FeaturesAbout Sign up

New Creative Components

A calm scanning signal field.

Get started Learn more

Customize

Color 1

Color 2

Color 3

Speed0.5

Sweep Speed0.25

Sweep Width1.6

Sweep Falloff6

Scan Direction

Scale1.5

Frequency2

Ripple0.22

Band Density11

Line Sharpness5.5

Glow0.22

Color Spread0.7

Brightness1

Contrast1.15

Softness1.4

Vignette0.45

ScanlineGrain

Grain Intensity0.05

Opacity1

Cursor Focus

Cursor Radius0.5

Cursor Strength0.5

API Reference

Scanner

Prop	Type	Default	Description
`color1`	`string`	`'#5227FF'`	Deep violet base color of the scanning field.
`color2`	`string`	`'#FF9FFC'`	Pink color of the interference bands.
`color3`	`string`	`'#FFFFFF'`	White color used for the brightest signal peaks.
`speed`	`number`	`0.5`	Overall animation speed of the signal.
`sweepSpeed`	`number`	`0.25`	Rate of the scan band travelling across the field.
`sweepWidth`	`number`	`1.6`	Spacing between successive scan bands.
`sweepFalloff`	`number`	`6`	How tightly the sweep concentrates; higher values give a narrower band.
`scale`	`number`	`1.5`	Zoom level of the signal field.
`frequency`	`number`	`2`	Spatial frequency of the underlying signal that bends the scan lines.
`ripple`	`number`	`0.22`	How strongly the signal bends the scan lines out of straight.
`bandDensity`	`number`	`11`	Number of scan lines packed across the field.
`lineSharpness`	`number`	`5.5`	Thins the scan lines into a crisp trace; lower values give a soft glow.
`glow`	`number`	`0.22`	Soft fill between the lines, giving the band volume.
`scanDirection`	`string`	`'vertical'`	Direction of the scan: 'vertical', 'horizontal', or 'diagonal'.
`colorSpread`	`number`	`0.7`	Amount of chromatic separation between the violet and pink channels.
`brightness`	`number`	`1.0`	Overall brightness of the field.
`contrast`	`number`	`1.15`	Contrast between the base tone and the bright peaks.
`softness`	`number`	`1.4`	Anti-alias rolloff; higher values calm high-frequency shimmer.
`vignette`	`number`	`0.45`	Strength of the edge fade around the field.
`scanline`	`boolean`	`true`	Overlays fine CRT raster lines across the field.
`grain`	`boolean`	`true`	Adds a subtle animated grain.
`grainIntensity`	`number`	`0.05`	Amplitude of the grain overlay. 0 disables it entirely.
`opacity`	`number`	`1.0`	Overall opacity of the effect.
`mouseInteraction`	`boolean`	`true`	Enables the soft scan focus that follows the pointer.
`mouseRadius`	`number`	`0.5`	Radius of the pointer focus region.
`mouseStrength`	`number`	`0.5`	Strength of the pointer focus brightening.

Accessibility

Keyboard shortcuts and ARIA behavior.

Purely decorative canvas. Place it behind content with enough contrast.

Ripple Grid Shape Grid