CRT Effect

Component 1

About

A wrapper that overlays retro CRT monitor scanlines, vignette, flicker, and an animated scan-sweep line onto any content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds CRT Effect to your project and fits it to your theme.

Code

How CRT Effect is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CRTEffect } from "@/components/ui/crt-effect";

export default function Default() {
  return (
    <div
      className="flex min-h-[420px] w-full items-center justify-center p-8"
      style={{ background: "oklch(0.06 0.02 250)" }}
    >
      <CRTEffect
        colored
        intensity="medium"
        className="w-full max-w-md rounded-lg border p-8 font-mono shadow-2xl"
        style={{
          background: "oklch(0.1 0.02 250)",
          borderColor: "oklch(0.32 0.1 195)",
          color: "oklch(0.92 0.02 220)",
        }}
      >
        <div className="space-y-4">
          <div className="flex items-center gap-2">
            <span
              className="inline-block h-2 w-2 rounded-full"
              style={{
                background: "hsl(var(--primary))",
                boxShadow: "0 0 8px hsl(var(--primary))",
              }}
            />
            <span
              className="text-xs uppercase tracking-[0.2em]"
              style={{ color: "oklch(0.7 0.09 200)" }}
            >
              System Online
            </span>
          </div>
          <h3
            className="text-2xl font-bold uppercase tracking-widest"
            style={{ color: "oklch(0.96 0.02 220)" }}
          >
            The Grid
          </h3>
          <div
            className="space-y-1 text-sm"
            style={{ color: "oklch(0.68 0.04 200)" }}
          >
            <p>&gt; Initializing uplink...</p>
            <p>&gt; Rendering scanlines...</p>
            <p>&gt; CRT monitor effect engaged.</p>
          </div>
          <div
            className="text-xs uppercase tracking-widest"
            style={{ color: "hsl(var(--primary))" }}
          >
            ▍ Ready
          </div>
        </div>
      </CRTEffect>
    </div>
  );
}