[V0_FILE]typescriptreact:file="components/pixelated-image.tsx" isQuickEdit="true" isMerged="true" "use client" import Image, { type ImageProps } from "next/image" import { useState, useEffect } from "react" import { cn } from "@/lib/utils" interface PixelatedImageProps extends Omit { className?: string pixelSize?: number glitchIntensity?: "low" | "medium" | "high" } export function PixelatedImage({ className, pixelSize = 8, glitchIntensity = "medium", ...props }: PixelatedImageProps) { const [isGlitching, setIsGlitching] = useState(false) const [glitchOffset, setGlitchOffset] = useState({ x: 0, y: 0 }) const [colorShift, setColorShift] = useState(0) // Random glitching even without hover useEffect(() => { const glitchInterval = setInterval(() => { if (Math.random() > 0.7) { setIsGlitching(true) setGlitchOffset({ x: (Math.random() - 0.5) * 10, y: (Math.random() - 0.5) * 10, }) setColorShift(Math.random() * 60) setTimeout( () => { setIsGlitching(false) setGlitchOffset({ x: 0, y: 0 }) setColorShift(0) }, 150 + Math.random() * 200, ) } }, 3000) return () => clearInterval(glitchInterval) }, []) const handleMouseEnter = () => { setIsGlitching(true) setGlitchOffset({ x: (Math.random() - 0.5) * 15, y: (Math.random() - 0.5) * 15, }) setColorShift(Math.random() * 90) } const handleMouseLeave = () => { setIsGlitching(false) setGlitchOffset({ x: 0, y: 0 }) setColorShift(0) } const intensityMap = { low: 0.3, medium: 0.5, high: 0.8, } return (

{/* RGB split effect */} {isGlitching && ( <>

)}

) } [V0_FILE]typescriptreact:file="components/distorted-card.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { cn } from "@/lib/utils" interface DistortedCardProps { children: React.ReactNode className?: string } export function DistortedCard({ children, className }: DistortedCardProps) { const [isHovered, setIsHovered] = useState(false) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{children}

{/* Glitch border effect */}

{/* Background noise */}

) } [V0_FILE]typescriptreact:file="components/glitch-effect.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { cn } from "@/lib/utils" interface GlitchEffectProps { children: React.ReactNode className?: string } export function GlitchEffect({ children, className }: GlitchEffectProps) { const [isGlitching, setIsGlitching] = useState(false) useEffect(() => { // Random glitch effect const glitchInterval = setInterval(() => { if (Math.random() > 0.8) { setIsGlitching(true) setTimeout(() => setIsGlitching(false), 150 + Math.random() * 150) } }, 3000) return () => clearInterval(glitchInterval) }, []) return (

{children}

{isGlitching && ( <>

)}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/vcr-overlay.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useState } from "react" interface VCROverlayProps { children: React.ReactNode } export function VCROverlay({ children }: VCROverlayProps) { const [time, setTime] = useState("00:00:00") const [date, setDate] = useState("00/00/00") const [tracking, setTracking] = useState(false) const [badTracking, setBadTracking] = useState(false) const [showColorBars, setShowColorBars] = useState(false) useEffect(() => { // Update timecode const timer = setInterval(() => { const now = new Date() setTime( `${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}:${now.getSeconds().toString().padStart(2, "0")}`, ) setDate( `${(now.getMonth() + 1).toString().padStart(2, "0")}/${now.getDate().toString().padStart(2, "0")}/${now.getFullYear().toString().slice(2)}`, ) }, 1000) // Random tracking issues const trackingInterval = setInterval(() => { if (Math.random() > 0.7) { setTracking(true) setTimeout(() => setTracking(false), 1000 + Math.random() * 2000) } }, 5000) // Random bad tracking const badTrackingInterval = setInterval(() => { if (Math.random() > 0.85) { setBadTracking(true) setTimeout(() => setBadTracking(false), 200 + Math.random() * 500) } }, 8000) // Randomly show color bars const colorBarInterval = setInterval(() => { if (Math.random() > 0.9) { setShowColorBars(true) setTimeout(() => setShowColorBars(false), 500 + Math.random() * 1000) } }, 10000) return () => { clearInterval(timer) clearInterval(trackingInterval) clearInterval(badTrackingInterval) clearInterval(colorBarInterval) } }, []) return (

{/* Main content */}

{children}

{/* Color bars overlay */} {showColorBars &&

} {/* VHS scan lines */}

{/* Static overlay */}

{/* VCR interface elements */}

{time}

{date}

{badTracking &&

TRACKING

}

{/* Color bars - occasionally show at bottom */} {tracking && (

)} {/* Random horizontal glitch lines */} {badTracking && (

)}

) } [V0_FILE]typescriptreact:file="components/broken-grid.tsx" isMerged="true" import type React from "react" import { cn } from "@/lib/utils" interface BrokenGridProps { children: React.ReactNode[] className?: string } export function BrokenGrid({ children, className }: BrokenGridProps) { return (

{children.map((child, index) => { // Create asymmetrical, broken grid layout const gridClasses = [ // First item - large "md:col-span-2 md:row-span-2", // Second item - medium, offset "md:col-span-1 md:row-span-1 md:translate-y-6", // Third item - medium "md:col-span-1 md:row-span-1 md:-translate-y-4", // Fourth item - wide "md:col-span-2 md:row-span-1 md:translate-x-4", // Fifth item - tall, negative margin "md:col-span-1 md:row-span-2 md:-translate-x-6", // Sixth item - normal "md:col-span-1 md:row-span-1 md:translate-y-8", ] const itemClass = gridClasses[index % gridClasses.length] return (

0.5 ? "rainbow-border" : "border border-purple-500", Math.random() > 0.7 ? "rotate-1" : Math.random() > 0.5 ? "-rotate-1" : "", )} > {child}

) })}

) } [V0_FILE]typescriptreact:file="components/random-color-text.tsx" isMerged="true" "use client" import { useEffect, useState, useRef, useMemo } from "react" import { cn } from "@/lib/utils" interface RandomColorTextProps { children: string className?: string glitchProbability?: number colorSet?: string[] tag?: "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div" } export function RandomColorText({ children, className, glitchProbability = 0.05, colorSet = ["#ffffff", "#ffff00", "#00ffff", "#00ff00", "#ff00ff", "#ff0000", "#0000ff"], tag: Tag = "span", }: RandomColorTextProps) { const [chars, setChars] = useState<{ char: string; color: string; glitching: boolean }[]>([]) const isMounted = useRef(false) const childrenString = useMemo(() => String(children), [children]) // Initialize characters only once when component mounts useEffect(() => { isMounted.current = true // Initialize characters with random colors const initialChars = childrenString.split("").map((char) => ({ char, color: colorSet[Math.floor(Math.random() * colorSet.length)], glitching: false, })) setChars(initialChars) return () => { isMounted.current = false } }, [childrenString, colorSet]) // Only re-run if the string content changes // Separate effect for animations and updates useEffect(() => { if (chars.length === 0) return // Skip if chars haven't been initialized yet // Randomly change colors and trigger glitches const interval = setInterval(() => { if (!isMounted.current) return setChars((prev) => prev.map((charObj) => { // Random chance to change color if (Math.random() < 0.1) { return { ...charObj, color: colorSet[Math.floor(Math.random() * colorSet.length)], } } // Random chance to glitch if (Math.random() < glitchProbability) { return { ...charObj, glitching: true, } } // Reset glitching if (charObj.glitching) { return { ...charObj, glitching: false, } } return charObj }), ) }, 150) return () => { clearInterval(interval) } }, [chars.length, colorSet, glitchProbability]) // Only depend on the length, not the content return ( {chars.map((charObj, index) => ( {charObj.char} ))} ) } [V0_FILE]typescriptreact:file="components/broken-image.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import Image, { type ImageProps } from "next/image" import { cn } from "@/lib/utils" interface BrokenImageProps extends Omit { className?: string glitchIntensity?: "low" | "medium" | "high" | "extreme" brokenProbability?: number } export function BrokenImage({ className, glitchIntensity = "high", brokenProbability = 0.5, ...props }: BrokenImageProps) { const [isGlitching, setIsGlitching] = useState(false) const [isBroken, setIsBroken] = useState(false) const [glitchOffset, setGlitchOffset] = useState({ x: 0, y: 0 }) // Simplified approach without canvas useEffect(() => { // Set initial broken state based on probability setIsBroken(Math.random() < brokenProbability) // Random glitching const glitchInterval = setInterval(() => { if (Math.random() > 0.7) { setIsGlitching(true) setGlitchOffset({ x: Math.floor(Math.random() * 10) - 5, y: Math.floor(Math.random() * 10) - 5, }) setTimeout( () => { setIsGlitching(false) setGlitchOffset({ x: 0, y: 0 }) }, 150 + Math.random() * 200, ) } }, 2000) return () => clearInterval(glitchInterval) }, [brokenProbability]) const intensityMap = { low: 1, medium: 2, high: 3, extreme: 5, } const glitchAmount = intensityMap[glitchIntensity] || 2 // Simplified broken image effect if (isBroken) { return (

{/* Base image with filters */}

{/* Static overlay */}

{/* Horizontal glitch lines */} {isGlitching && Array.from({ length: 3 }).map((_, i) => (

))}

{/* RGB split effect when glitching */} {isGlitching && ( <>

)}

) } // Regular image with glitch effect return (

{isGlitching && ( <>

)}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" import Link from "next/link" import { StaticColorText } from "./static-color-text" import { TVStatic } from "./tv-static" export function Footer() { const currentYear = new Date().getFullYear() return ( ) } [V0_FILE]typescriptreact:file="components/disturbing-message.tsx" isMerged="true" "use client" import { useEffect, useState, useRef } from "react" import { StaticColorText } from "./static-color-text" interface DisturbingMessageProps { messages: string[] interval?: number className?: string } export function DisturbingMessage({ messages, interval = 5000, className = "" }: DisturbingMessageProps) { const [visible, setVisible] = useState(false) const [messageIndex, setMessageIndex] = useState(0) const isMounted = useRef(true) // Cleanup function useEffect(() => { return () => { isMounted.current = false } }, []) useEffect(() => { // Only run if we have messages if (messages.length === 0) return // Randomly show disturbing messages const showMessage = () => { if (isMounted.current && Math.random() > 0.7) { // Pick a random message const randomIndex = Math.floor(Math.random() * messages.length) setMessageIndex(randomIndex) setVisible(true) // Hide after random time setTimeout( () => { if (isMounted.current) { setVisible(false) } }, 1000 + Math.random() * 3000, ) } } const messageInterval = setInterval(showMessage, interval) return () => { clearInterval(messageInterval) } }, [messages, interval]) // Only re-run if messages or interval changes if (!visible || messages.length === 0) return null return (

{messages[messageIndex]}

) } [V0_FILE]typescriptreact:file="components/random-signal-disruptions.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useState, useRef } from "react" import { SignalLost } from "./signal-lost" const DISRUPTION_MESSAGES = [ "SIGNAL LOST", "NO SIGNAL", "PLEASE STAND BY", "TRANSMISSION INTERRUPTED", "CONNECTION FAILURE", "SIGNAL INTERFERENCE", "BROADCAST TERMINATED", "CHANNEL NOT FOUND", "EMERGENCY BROADCAST", "SIGNAL HIJACKED", ] export function RandomSignalDisruptions() { const [disruptions, setDisruptions] = useState([]) const isMounted = useRef(true) const disruptionCount = useRef(0) useEffect(() => { return () => { isMounted.current = false } }, []) useEffect(() => { // Create random disruptions throughout the page const createDisruption = () => { if (!isMounted.current) return // Random chance for full screen disruption const isFullScreen = Math.random() > 0.7 // Random message const message = DISRUPTION_MESSAGES[Math.floor(Math.random() * DISRUPTION_MESSAGES.length)] // Random duration const duration = 1000 + Math.random() * 3000 // Random z-index to layer disruptions const zIndex = 30 + Math.floor(Math.random() * 20) const id = `disruption-${disruptionCount.current++}` setDisruptions((prev) => [ ...prev, , ]) // Remove disruption after it's done setTimeout(() => { if (isMounted.current) { setDisruptions((prev) => prev.filter((d) => (d as React.ReactElement).key !== id)) } }, duration + 100) } // Create disruptions at random intervals const interval = setInterval( () => { // Higher frequency of disruptions if (Math.random() > 0.4) { createDisruption() } }, 5000 + Math.random() * 8000, ) return () => { clearInterval(interval) } }, []) return <>{disruptions} } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useEffect, useState, useRef } from "react" import { TVStatic } from "@/components/tv-static" import { StaticColorText } from "@/components/static-color-text" import { ShiftingColorText } from "@/components/shifting-color-text" import { GlitchText } from "@/components/glitch-text" import { SignalLost } from "@/components/signal-lost" import { EmergencyBroadcast } from "@/components/emergency-broadcast" export default function Home() { const [showColorBars, setShowColorBars] = useState(false) const [showMessage, setShowMessage] = useState(false) const [currentMessage, setCurrentMessage] = useState("") const [showEmergency, setShowEmergency] = useState(false) const [showSignalLost, setShowSignalLost] = useState(false) const [staticIntensity, setStaticIntensity] = useState(0.5) const [showScanline, setShowScanline] = useState(false) const [scanlinePosition, setScanlinePosition] = useState(0) const [showFlicker, setShowFlicker] = useState(false) const isMounted = useRef(true) const messages = [ "DO NOT ADJUST YOUR SCREEN", "WE ARE WATCHING", "SIGNAL HIJACKED", "PLEASE STAND BY", "TRANSMISSION INTERRUPTED", "REALITY COMPROMISED", "SYSTEM FAILURE IMMINENT", "WAKE UP", "YOU ARE NOT ALONE", "THE SIGNAL IS COMING FROM INSIDE YOUR HOUSE", ] useEffect(() => { return () => { isMounted.current = false } }, []) // Random effects controller useEffect(() => { // Color bars effect const colorBarsInterval = setInterval( () => { if (!isMounted.current) return if (Math.random() > 0.7) { setShowColorBars(true) setTimeout( () => { if (isMounted.current) setShowColorBars(false) }, 800 + Math.random() * 1500, ) } }, 5000 + Math.random() * 8000, ) // Random messages const messageInterval = setInterval( () => { if (!isMounted.current) return if (Math.random() > 0.6 && !showMessage && !showEmergency && !showSignalLost) { const randomMessage = messages[Math.floor(Math.random() * messages.length)] setCurrentMessage(randomMessage) setShowMessage(true) setTimeout( () => { if (isMounted.current) setShowMessage(false) }, 2000 + Math.random() * 3000, ) } }, 4000 + Math.random() * 6000, ) // Emergency broadcast const emergencyInterval = setInterval( () => { if (!isMounted.current) return if (Math.random() > 0.85 && !showEmergency && !showSignalLost) { setShowEmergency(true) setTimeout( () => { if (isMounted.current) setShowEmergency(false) }, 4000 + Math.random() * 3000, ) } }, 15000 + Math.random() * 20000, ) // Signal lost effect const signalLostInterval = setInterval( () => { if (!isMounted.current) return if (Math.random() > 0.75 && !showEmergency && !showSignalLost) { setShowSignalLost(true) setStaticIntensity(0.8) setTimeout( () => { if (isMounted.current) { setShowSignalLost(false) setStaticIntensity(0.5) } }, 2000 + Math.random() * 2000, ) } }, 8000 + Math.random() * 10000, ) // Static intensity variations const staticInterval = setInterval( () => { if (!isMounted.current) return if (!showSignalLost && !showEmergency) { setStaticIntensity(0.3 + Math.random() * 0.4) } }, 2000 + Math.random() * 3000, ) // Horizontal scanline effect const scanlineInterval = setInterval( () => { if (!isMounted.current) return if (Math.random() > 0.6) { setShowScanline(true) // Animate scanline moving down const animateScanline = () => { let position = 0 const scanlineAnimation = setInterval(() => { if (!isMounted.current) { clearInterval(scanlineAnimation) return } position += 2 setScanlinePosition(position) if (position > 100) { clearInterval(scanlineAnimation) setShowScanline(false) } }, 16) // ~60fps } animateScanline() } }, 3000 + Math.random() * 4000, ) // Screen flicker effect const flickerInterval = setInterval( () => { if (!isMounted.current) return if (Math.random() > 0.7) { setShowFlicker(true) setTimeout( () => { if (isMounted.current) setShowFlicker(false) }, 100 + Math.random() * 200, ) } }, 2000 + Math.random() * 5000, ) return () => { clearInterval(colorBarsInterval) clearInterval(messageInterval) clearInterval(emergencyInterval) clearInterval(signalLostInterval) clearInterval(staticInterval) clearInterval(scanlineInterval) clearInterval(flickerInterval) } }, [messages, showEmergency, showMessage, showSignalLost]) return (

{/* Base static layer */}

{/* Color bars */} {showColorBars &&

} {/* Horizontal scanline */} {showScanline && (

)} {/* Screen flicker */} {showFlicker &&

} {/* Random message */} {showMessage && (

{currentMessage}

)} {/* Signal lost overlay */} {showSignalLost && } {/* Emergency broadcast */} {showEmergency && } {/* VHS tracking lines */}

{/* Static overlay */}

{/* Timecode */}

{new Date().toLocaleTimeString()}

{/* Hidden message that occasionally appears */}

SYSTEM.ERROR.REALITY.BREACH

) } [V0_FILE]typescriptreact:file="components/emergency-broadcast.tsx" isEdit="true" "use client" import { useEffect, useState, useRef } from "react" import { TVStatic } from "./tv-static" import { StaticColorText } from "./static-color-text" import { ShiftingColorText } from "./shifting-color-text" export function EmergencyBroadcast() { const [message, setMessage] = useState("THIS IS NOT A TEST") const [blinking, setBlinking] = useState(false) const isMounted = useRef(true) const emergencyMessages = [ "THIS IS NOT A TEST", "EMERGENCY ALERT SYSTEM", "SEEK SHELTER IMMEDIATELY", "DO NOT GO OUTSIDE", "STAY AWAY FROM WINDOWS", "SIGNAL HIJACKED", "TRANSMISSION OVERRIDE", "SYSTEM FAILURE IMMINENT", ] useEffect(() => { return () => { isMounted.current = false } }, []) useEffect(() => { // Change message periodically const messageInterval = setInterval(() => { if (!isMounted.current) return const randomMessage = emergencyMessages[Math.floor(Math.random() * emergencyMessages.length)] setMessage(randomMessage) }, 2000) // Blink effect const blinkInterval = setInterval(() => { if (!isMounted.current) return setBlinking((prev) => !prev) }, 500) return () => { clearInterval(messageInterval) clearInterval(blinkInterval) } }, [emergencyMessages]) return (

EMERGENCY ALERT SYSTEM

{message}

The following message is transmitted at the request of the{" "} █████████████.

Please stand by for further instructions.

) } [V0_FILE]typescriptreact:file="components/signal-lost.tsx" isEdit="true" "use client" import { useEffect, useState, useRef } from "react" import { TVStatic } from "./tv-static" import { StaticColorText } from "./static-color-text" import { GlitchText } from "./glitch-text" interface SignalLostProps { className?: string duration?: number message?: string fullScreen?: boolean zIndex?: number } export function SignalLost({ className = "", duration = 2000, message = "SIGNAL LOST", fullScreen = false, zIndex = 50, }: SignalLostProps) { const [glitching, setGlitching] = useState(false) const isMounted = useRef(true) useEffect(() => { return () => { isMounted.current = false } }, []) useEffect(() => { // Glitch effect const glitchInterval = setInterval(() => { if (!isMounted.current) return setGlitching(true) setTimeout(() => { if (isMounted.current) setGlitching(false) }, 150) }, 500) return () => { clearInterval(glitchInterval) } }, []) if (fullScreen) { return (

{message} {/* Text shadow/echo effect */}

{message}

) } return (

{message}

) } [V0_FILE]typescriptreact:file="components/tv-static.tsx" isEdit="true" "use client" import { useEffect, useRef, useState } from "react" interface TVStaticProps { intensity?: number fullScreen?: boolean className?: string } export function TVStatic({ intensity = 0.5, fullScreen = false, className = "" }: TVStaticProps) { const canvasRef = useRef(null) const [dimensions, setDimensions] = useState({ width: 300, height: 200 }) // Default dimensions const isMounted = useRef(false) useEffect(() => { isMounted.current = true const updateDimensions = () => { if (fullScreen) { setDimensions({ width: window.innerWidth || 300, height: window.innerHeight || 200, }) } else { // Use default dimensions for non-fullscreen setDimensions({ width: 300, height: 200, }) } } // Set initial dimensions updateDimensions() // Update on resize window.addEventListener("resize", updateDimensions) return () => { isMounted.current = false window.removeEventListener("resize", updateDimensions) } }, [fullScreen]) useEffect(() => { const canvas = canvasRef.current if (!canvas) return // Ensure canvas has the correct dimensions canvas.width = dimensions.width canvas.height = dimensions.height const ctx = canvas.getContext("2d") if (!ctx) return let animationFrameId: number const renderStatic = () => { if (!ctx || !isMounted.current || dimensions.width <= 0 || dimensions.height <= 0) { return } // Create static noise try { const imageData = ctx.createImageData(dimensions.width, dimensions.height) const data = imageData.data for (let i = 0; i < data.length; i += 4) { // Random static value const value = Math.random() * 255 * intensity // Occasionally add color artifacts if (Math.random() < 0.01) { data[i] = 255 // R data[i + 1] = 0 // G data[i + 2] = 255 // B data[i + 3] = 255 // A } else if (Math.random() < 0.01) { data[i] = 0 // R data[i + 1] = 255 // G data[i + 2] = 255 // B data[i + 3] = 255 // A } else { data[i] = value // R data[i + 1] = value // G data[i + 2] = value // B data[i + 3] = 255 // A } } ctx.putImageData(imageData, 0, 0) // Add horizontal glitch lines if (Math.random() < 0.1) { const lineCount = Math.floor(Math.random() * 5) + 1 for (let i = 0; i < lineCount; i++) { const y = Math.floor(Math.random() * dimensions.height) const height = Math.floor(Math.random() * 3) + 1 ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.8 + 0.2})` ctx.fillRect(0, y, dimensions.width, height) } } // Add vertical color bars occasionally if (Math.random() < 0.03) { const barWidth = dimensions.width / 7 const colors = ["#ffffff", "#ffff00", "#00ffff", "#00ff00", "#ff00ff", "#ff0000", "#0000ff"] for (let i = 0; i < colors.length; i++) { ctx.fillStyle = colors[i] ctx.fillRect(i * barWidth, 0, barWidth, dimensions.height) } // Add semi-transparent black overlay for that "through the TV" look ctx.fillStyle = "rgba(0, 0, 0, 0.3)" ctx.fillRect(0, 0, dimensions.width, dimensions.height) } } catch (error) { console.error("Error rendering TV static:", error) } if (isMounted.current) { animationFrameId = requestAnimationFrame(renderStatic) } } // Only start rendering if dimensions are valid if (dimensions.width > 0 && dimensions.height > 0) { renderStatic() } return () => { cancelAnimationFrame(animationFrameId) } }, [dimensions, intensity]) return (