CRT Warp

Full-canvas CRT plasma with curved distortion, scanlines, bloom and pointer interaction.

Default

Every parameter is wired to the controls underneath. Move the pointer over the screen to bend the signal.

Demo Content

FeaturesAbout Sign up

New Creative Components

Get started Learn more

Phosphor Color

Background

Speed0.5

Curvature0.25

Wave Amount0.3

Wave Density2.5

Scanline Strength0.25

Scanline Density200

Bloom1.5

Bloom Radius1

Noise0.1

Vignette0

Brightness1.25

RGB Shift0.015

Pixel Size

Render Quality

Frame Rate

Pointer Warp

Pointer Strength0.5

Pause

Prop	Type	Default	Description
`color`	`string`	`'#c755f7'`	Main phosphor color.
`backgroundColor`	`string`	`'#05010a'`	Canvas background color.
`speed`	`number`	`0.5`	Animation speed.
`curvature`	`number`	`0.25`	Strength of the CRT barrel distortion.
`scanlineStrength`	`number`	`0.25`	Visibility of the horizontal scanlines.
`scanlineFrequency`	`number`	`200`	Number of scanline bands across the canvas.
`waveAmplitude`	`number`	`0.3`	Amount of fluid displacement.
`waveFrequency`	`number`	`2.5`	Density of the plasma waves.
`bloom`	`number`	`1.5`	Intensity of the soft phosphor glow.
`bloomRadius`	`number`	`1`	Spread of the glow sampling.
`noise`	`number`	`0.1`	Fine analog grain amount.
`vignette`	`number`	`0`	Edge darkening strength.
`brightness`	`number`	`1.25`	Overall output brightness.
`pixelation`	`number`	`1`	Pixel block size; 1 keeps the image smooth.
`rgbShift`	`number`	`0.015`	Horizontal phosphor-channel separation.
`mouseReact`	`boolean`	`true`	Lets the pointer bend the signal.
`mouseStrength`	`number`	`0.5`	Strength of the pointer distortion.
`dpr`	`number`	`1`	Maximum device pixel ratio used by the renderer.
`fps`	`number`	`30`	Maximum render frame rate.
`paused`	`boolean`	`false`	Freezes the animation when true.

Keyboard shortcuts and ARIA behavior.