Updated: CRT Warp
By Steven Van ·
The React Bits background now has scanlines, a phosphor mask and cursor-driven distortion, plus amber, green and arcade presets.
React Bits has rebuilt its CRT Warp background as a CRT that warms up into view. The updated component renders a blocky plasma on a curved screen, with true scanlines, a phosphor mask, afterglow and bloom.
Interaction
The cursor bends the picture like a magnet, and clicks flip the channel. The power-on intro plays when the component first appears.
Presets and install
Presets add amber, green and arcade looks. The component is available in JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/CRTWarp-TS-TW.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →