Crt Effect

1"use client";
2 
3import type * as React from "react";
4import { cn } from "@/lib/utils";
5 
6interface CRTEffectProps extends React.HTMLAttributes<HTMLDivElement> {
7  /** Enable animated scan sweep line */
8  animated?: boolean;
9  /** Use theme primary color for lines (gives cyan/colored tint) */
10  colored?: boolean;
11  /** Intensity of the scanlines effect */
12  intensity?: "light" | "medium" | "heavy";
13  /** Line spacing in pixels */
14  spacing?: number;
15}
16 
17/**
18 * CRT monitor effect with scanlines, vignette, flicker, and scan sweep animation.
19 * Wrap any content to give it a retro CRT monitor appearance.
20 */
21export function CRTEffect({
22  children,
23  className,
24  intensity = "medium",
25  animated = true,
26  spacing = 3,
27  colored = false,
28  ...props
29}: CRTEffectProps) {
30  const opacityMap = {
31    heavy: 0.25,
32    light: 0.08,
33    medium: 0.15,
34  };
35 
36  return (
37    <div className={cn("relative overflow-hidden", className)} {...props}>
38      {children}
39 
40      {/* Scanlines overlay */}
41      <div
42        className="pointer-events-none absolute inset-0 z-10"
43        style={{
44          background: `repeating-linear-gradient(
45            0deg,
46            transparent,
47            transparent ${spacing}px,
48            ${colored ? `hsl(var(--primary) / ${opacityMap[intensity]})` : `rgba(0, 0, 0, ${opacityMap[intensity]})`} ${spacing}px,
49            ${colored ? `hsl(var(--primary) / ${opacityMap[intensity]})` : `rgba(0, 0, 0, ${opacityMap[intensity]})`} ${spacing * 2}px
50          )`,
51        }}
52      />
53 
54      {/* Flicker overlay for CRT effect */}
55      <div
56        className="pointer-events-none absolute inset-0 z-10 animate-flicker opacity-[0.02]"
57        style={{
58          background:
59            "linear-gradient(transparent 50%, rgba(0, 0, 0, 0.1) 50%)",
60          backgroundSize: "100% 4px",
61        }}
62      />
63 
64      {/* Animated scan sweep line */}
65      {animated ? (
66        <div
67          className="pointer-events-none absolute right-0 left-0 z-20 h-[2px] animate-scan-sweep"
68          style={{
69            background:
70              "linear-gradient(90deg, transparent, hsl(var(--primary) / 0.5), transparent)",
71            boxShadow:
72              "0 0 10px hsl(var(--primary) / 0.3), 0 0 20px hsl(var(--primary) / 0.2)",
73          }}
74        />
75      ) : null}
76 
77      {/* Vignette effect */}
78      <div
79        className="pointer-events-none absolute inset-0 z-10"
80        style={{
81          background:
82// … truncated