vault66-crt-effect

Live playground and documentation →

A CRT screen effect you wrap around any content: scanlines, sweep line, glow, flicker, glitch, screen curvature, glare, and static. Ships for React, Vue, and as a framework-agnostic Web Component (so it also works in Angular, plain HTML, Astro, Svelte, or anything else that runs in a browser).

Installation

npm install vault66-crt-effect
pnpm add vault66-crt-effect
yarn add vault66-crt-effect
bun add vault66-crt-effect

Use it with your framework

Same effect, same props everywhere — only the import and the syntax change. Presets get you a full look in one line; every individual prop is listed in Props.

React

import CRTEffect from "vault66-crt-effect";
import "vault66-crt-effect/style.css";

export default function App() {
  return (
    <CRTEffect preset="fallout">
      <div style={{ padding: 20, fontSize: 24 }}>Welcome to the Wasteland!</div>
    </CRTEffect>
  );
}

Vue

<script setup>
import CRTEffect from "vault66-crt-effect/vue";
import "vault66-crt-effect/style.css";
</script>

<template>
  <CRTEffect preset="fallout">
    <div style="padding: 20px; font-size: 24px">Welcome to the Wasteland!</div>
  </CRTEffect>
</template>

Web Component

Import once to register the <crt-effect> element, then use it anywhere — no CSS import needed, the component carries its own styles in a shadow root. Props become attributes: booleans are bare (fill), everything else is kebab-case (sweep-duration="5").

<script type="module">
  import "vault66-crt-effect/element";
</script>

<crt-effect preset="fallout">
  <div style="padding: 20px; font-size: 24px">Welcome to the Wasteland!</div>
</crt-effect>

Angular uses the same element — just add CUSTOM_ELEMENTS_SCHEMA to your component/module so the compiler accepts the custom tag (otherwise you'll hit NG8001), and import "vault66-crt-effect/element" once:

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "vault66-crt-effect/element";

@Component({
  selector: "app-root",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<crt-effect preset="fallout">…</crt-effect>`,
})
export class AppComponent {}

Props

Every prop works the same across React, Vue, and the Web Component. Start from a preset and override whatever you want, or set props from scratch.

| 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 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 hex, RGB, or RGBA scanline color (used only if theme is "custom"; alpha is controlled by scanlineOpacity) | | 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 | | enableCurvature | boolean | false | Enables a curved-glass overlay: a soft corner highlight plus darkened, rounded screen edges | | curvatureIntensity | number (0 to 1) | 0.5 | Strength of the curved-glass edge darkening | | enableGlare | boolean | false | Enables a broad, soft diagonal glass-reflection sheen across the screen | | glareIntensity | number (0 to 1) | 0.18 | Brightness of the glare/reflection sheen | | enableNoise | boolean | false | Enables an animated RF static/snow overlay generated from SVG fractal noise | | noiseOpacity | number (0 to 1) | 0.15 | Opacity of the static/snow overlay | | glitchChromatic | boolean | false | Adds animated red/cyan chromatic aberration to the glitch (requires enableGlitch) | | tintText | boolean | false | Recolors the wrapped content to a phosphor tint (derived from theme) with a soft glow. Children with their own explicit color keep it | | textColor | string | undefined | Overrides the phosphor tint color used when tintText is on. Any CSS color | | sweepColor | string | undefined | Gives the sweep line a bright, colored glow instead of the default dark refresh bar. Any CSS color | | fill | boolean | false | Stretches the effect to fill its parent's full width and height instead of sizing to its content. See Full-screen layouts | | children | content | — | Content rendered inside the effect: React children, the Vue default slot, or slotted DOM in the Web Component |

In the Web Component, prop names are kebab-case attributes: enableGlow → enable-glow, sweepDuration → sweep-duration="5", and booleans are set by presence (fill, enable-flicker).

Presets

Eight ready-made monitor looks. Use one as-is, or as a starting point and override individual props.

| Preset | Look | | ------------- | --------------------------------------------------------------------------------------------- | | fallout | Green Vault-Tec phosphor terminal — medium scanlines, sweep, subtle edge glow, gentle flicker | | dos | Amber IBM/Hercules monitor — clean scanlines, no sweep or glow | | cyberpunk | Purple/magenta neon — heavy outer + edge glow, fast sweep, flicker, glitch | | arcade | Bright saturated green — thick scanlines, fast sweep, strong glow | | commodore64 | Periwinkle 8-bit home computer — chunky scanlines, subtle flicker | | apple2 | Green Apple II — tight scanlines, clean (no sweep or glow) | | vt100 | Pale green DEC terminal — minimal scanlines, no sweep or glow | | minimal | Barely-there — subtle scanlines + light vignette only |

// Use a preset as-is
<CRTEffect preset="arcade">
  <YourContent />
</CRTEffect>

// Override specific preset values
<CRTEffect preset="fallout" sweepDuration={5} enableFlicker={false}>
  <YourContent />
</CRTEffect>

Customization

Start from a preset and change a few values, or build the whole look from individual props. A few common patterns (React syntax; the props are identical in Vue and the Web Component):

// Custom scanline color and orientation
<CRTEffect theme="custom" scanlineColor="#ff6400" scanlineOpacity={0.3} scanlineOrientation="vertical">
  <YourContent />
</CRTEffect>

// Fine-tune flicker and glitch with numbers
<CRTEffect
  enableFlicker
  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)
>
  <YourContent />
</CRTEffect>

// Or use the "low" / "medium" / "high" shortcuts
<CRTEffect enableFlicker flickerIntensity="low" enableGlitch glitchIntensity="high">
  <YourContent />
</CRTEffect>

Full-screen layouts

By default the wrapper sizes to its content — good for cards, panels, and inline blocks. When you want the effect to cover a whole region or the full viewport, add fill so the wrapper stretches to its parent (and the content stretches with it):

// The parent needs a real height — here, the full viewport
<div style={{ width: "100vw", height: "100vh" }}>
  <CRTEffect preset="fallout" fill>
    <YourApp />
  </CRTEffect>
</div>

fill fills the parent, so the parent must have a resolved height (100vh, a fixed px, or 100% inherited down the chain).

Building your own integration

If your framework isn't React or Vue and you'd rather not use the Web Component, the core is exported separately. computeCrt(options) takes the same props and hands back everything needed to render the effect onto your own markup — no framework attached. It's exactly what the React and Vue wrappers are built on.

It returns four things:

const { enabled, wrapper, inner, overlays } = computeCrt({ preset: "fallout" });

• enabled — false when the effect is turned off; render your content untouched.
• wrapper — { className, style } for the outer element.
• inner — { className, style } for the element that holds your content.
• overlays — an array of class names, one per overlay layer.

The markup contract is: a wrapper element containing an inner element (your content goes in there), followed by one empty overlay div per entry in overlays:

<div class="{wrapper.className}" style="{wrapper.style}">
  <div class="{inner.className}" style="{inner.style}">…your content…</div>
  <!-- one sibling div per overlay class -->
  <div class="crt-vignette"></div>
</div>

One catch when applying the styles by hand: the style bag contains both normal CSS properties (filter, flexDirection) and CSS custom properties (--scanline-color-rgb). Custom properties have to be set with setProperty, not by assigning to el.style. Here's a complete vanilla-DOM renderer that handles it:

import { computeCrt } from "vault66-crt-effect/core";
import "vault66-crt-effect/style.css";

function applyStyle(el, style) {
  for (const [key, value] of Object.entries(style)) {
    if (key.startsWith("--")) el.style.setProperty(key, String(value));
    else el.style[key] = value;
  }
}

// Wrap any element in the CRT effect and return the new root element.
function crt(content, options) {
  const { enabled, wrapper, inner, overlays } = computeCrt(options);
  if (!enabled) return content; // effect off — hand content back as-is

  const root = document.createElement("div");
  root.className = wrapper.className;
  applyStyle(root, wrapper.style);

  const innerEl = document.createElement("div");
  innerEl.className = inner.className;
  if (inner.style) applyStyle(innerEl, inner.style);
  innerEl.append(content);
  root.append(innerEl);

  for (const cls of overlays) {
    const layer = document.createElement("div");
    layer.className = cls;
    root.append(layer);
  }
  return root;
}

const screen = crt(myContent, { preset: "fallout" });
document.body.append(screen);

Reduced motion

If the system has "Reduce Motion" enabled, animated layers (sweep, flicker, glitch, static) turn themselves off automatically, while layers like scanlines and glow stay visible. Nothing to configure.

License

MIT — see LICENSE for details.