A customizable CRT visual effect component for React
npm install vault66-crt-effect!npm
!npm downloads
!npm total downloads
Give your React app that vintage TV feel with authentic CRT effects - flickering scanlines, sweeping light bars, glowing edges, and all the retro charm you need.
> Originally crafted for Vault 66, a Fallout-themed e-commerce project, this library is now a standalone package so you can effortlessly add authentic retro CRT effects to your own apps.
---
Try the CRT effect live in this interactive CodeSandbox demo
Experiment with scanlines, sweep, glow, flicker, and orientation in real time.
``bash`
npm install vault66-crt-effector
yarn add vault66-crt-effect
Use a preset for instant retro vibes:
`jsx
import React from 'react';
import CRTEffect from 'vault66-crt-effect';
import "vault66-crt-effect/dist/vault66-crt-effect.css";
function App() {
return (
Welcome to the Wasteland!
);
}
export default App;
`
Or customize everything manually:
`jsx`
sweepDuration={10}
sweepThickness={10}
scanlineOpacity={0.3}
theme="blue"
enableScanlines={true}
enableSweep={true}
enableGlow={true}
glowColor="rgba(0, 132, 255, 0.3)"
enableEdgeGlow={true}
edgeGlowColor="rgba(30, 128, 92, 0.9)"
edgeGlowSize={100}
enableFlicker={true}
>
Your content here
| Prop | Type | Default | Purpose |
| --------------------- | ------------------------------------------ | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| preset | "fallout" \| "dos" \| "cyberpunk" \| "arcade" \| "commodore64" \| "apple2" \| "vt100" \| "minimal" | undefined | Apply a complete preset configuration. Individual props can override preset values. See Presets section below. |enabled
| | boolean | true | Enables or disables the entire CRT effect |sweepDuration
| | number | 10 | Duration in seconds for the vertical sweep line animation |sweepThickness
| | number | 10 | Height (thickness in pixels) of the sweep line |sweepStyle
| | "classic" \| "soft" | "classic" | Style of the vertical sweep line: "classic" is a sharp black line, "soft" is a blurred shadow effect |scanlineOpacity
| | number (0 to 1) | 0.2 | Opacity of the scanlines |scanlineThickness
| | number | 2 | Thickness of each scanline in pixels |scanlineGap
| | number | 3 | Gap between scanlines in pixels |scanlineColor
| | string | "rgba(91, 179, 135, 0.2)" | Custom RGBA/RGB scanline color (used only if theme is "custom") |enableScanlines
| | boolean | true | Shows or hides the scanlines overlay |scanlineOrientation
| | "horizontal" \| "vertical" | "horizontal" | Orientation of the scanlines: "horizontal" renders lines from top to bottom, "vertical" renders lines from left to right |enableSweep
| | boolean | true | Shows or hides the vertical sweep line animation |theme
| | "green" \| "amber" \| "blue" \| "custom" | "green" | Predefined scanline color themes (overrides scanlineColor unless custom is used) |enableGlow
| | boolean | false | Enables outer glow effect around the container |glowColor
| | string | "rgba(0, 255, 128, 0.3)" | Color of the outer glow |enableEdgeGlow
| | boolean | false | Enables inset glow effect around edges |edgeGlowColor
| | string | "rgba(0, 255, 128, 0.2)" | Color of the inset edge glow |edgeGlowSize
| | number | 30 | Size in pixels of the inset edge glow (box-shadow inset size) |enableFlicker
| | boolean | false | Enables subtle flicker animation for CRT realism |flickerIntensity
| | "low" \| "medium" \| "high" \| number | 0.08 | Flicker depth: preset string or custom number (0-1) where 0=no flicker, 1=max brightness variance |flickerSpeed
| | "low" \| "medium" \| "high" \| number | 0.8 | Flicker animation speed: preset string or custom number in seconds. Lower values = faster flicker |enableGlitch
| | boolean | false | Enables shaking/interference glitch animation |glitchIntensity
| | "low" \| "medium" \| "high" \| number | 0.6 | Glitch distance: preset string or custom number (0-1) where 0=no movement, 1=max shake amount |glitchSpeed
| | "low" \| "medium" \| "high" \| number | 0.6 | Glitch animation speed: preset string or custom number in seconds. Lower values = faster glitch |enableVignette
| | boolean | false | Enables a subtle edge-darkening vignette overlay |vignetteIntensity
| | number (0 to 1) | 0.4 | Controls vignette darkness at the edges |children
| | React.ReactNode | — | Content to render inside the CRT effect container |
Choose from 8 authentic CRT monitor presets for instant retro aesthetics:
Using Presets:
`jsx
// Use a preset as-is
// Override specific preset values
`
Start with a preset and override specific values, or build from scratch with individual props. See the Props table above for the complete list of available options.
Quick customization patterns:
`jsx
// Start with a preset, tweak a few values
// Custom scanline colors and orientation
// Fine-tune flicker and glitch with numeric precision
flickerIntensity={0.05} // Subtle brightness variance (0-1)
flickerSpeed={2} // Slow flicker (seconds)
enableGlitch
glitchIntensity={0.3} // Gentle shake (0-1)
glitchSpeed={1.5} // Medium speed (seconds)
>
// Or use preset strings for quick adjustments
``
If your system has “Reduce Motion” enabled, the CRT effect will automatically disable animations like sweep, flicker, and glitch to avoid causing discomfort. Static effects like scanlines and glow will remain visible. No extra setup needed.
This project is licensed under the MIT License - see the LICENSE file for details.