[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]plaintext:file="LICENSE" isMerged="true" MIT License Copyright (c) 2025 Lakshay Bhushan Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. [V0_FILE]markdown:file="README.md" isMerged="true"

PixelWave Studio

![PixelWave Studio](https://pixelwave-studio.vercel.app/og-image.png) A retro-futuristic web application that brings the nostalgic charm of CRT monitors and vintage computer graphics to modern image processing. Built with Next.js, TypeScript, and Canvas API. ## Features - 🖼️ **Image Upload & Processing** - Drag & drop or browse to upload images - 🎨 **Real-time Dithering Effects** - Multiple vintage algorithms (Floyd-Steinberg, Ordered, Random) - 📺 **CRT Monitor Simulation** - Authentic retro display with scanlines and curvature - 🎵 **Audio Integration** - Ambient soundscapes and interactive audio feedback - 📹 **Video Recording** - Export your creations as MP4 videos - 🎮 **Interactive Controls** - Real-time parameter adjustment - 📱 **Responsive Design** - Works seamlessly on desktop and mobile ## Implementation ### **Canvas Rendering Engine** The heart of the application lies in `canvas-renderer.tsx`, which implements: - **Real-time dithering algorithms** using pixel manipulation - **CRT simulation effects** with scanlines, curvature, and phosphor glow - **Responsive canvas sizing** that adapts to different screen sizes - **Performance optimization** with requestAnimationFrame loops ### **Dithering Algorithms** - **Floyd-Steinberg**: Error diffusion dithering for smooth gradients - **Ordered Dithering**: Pattern-based dithering using Bayer matrices - **Random Dithering**: Noise-based approach for artistic effects - **Threshold**: Simple binary conversion with adjustable levels ### **Audio System** The `audio-manager.tsx` component provides: - **Ambient soundscapes** for immersive experience - **Interactive audio feedback** responding to user actions - **Web Audio API integration** for real-time audio processing - **Volume controls** and audio state management ### **Video Recording** Built-in screen recording via `video-recorder.tsx`: - **MediaRecorder API** for capturing canvas output - **MP4 export** with configurable quality settings - **Real-time preview** during recording - **Download management** for exported videos ## License This project is open source and available under the [MIT License](LICENSE). ## Acknowledgments This project was completely made in [v0.app](https://v0.app), you can find the project [here](https://v0.app/chat/pixel-wave-studio-uSE9p11dsVA). [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react"; import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import { ThemeProvider } from "@/components/theme-provider"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "PixelWave Studio - Retro CRT Image Effects", description: "Transform images into mesmerizing animated patterns using vintage dithering algorithms. Create retro CRT effects, ASCII art, and animated dither patterns.", generator: "v0.app", icons: { icon: "data:image/svg+xml,", }, openGraph: { title: "PixelWave Studio - Retro CRT Image Effects", description: "Transform images into mesmerizing animated patterns using vintage dithering algorithms", url: "https://pixelwave-studio.vercel.app", siteName: "PixelWave Studio", images: [ { url: "/og-image.png", width: 1200, height: 630, alt: "PixelWave Studio - Retro CRT Image Effects", }, ], locale: "en_US", type: "website", }, twitter: { card: "summary_large_image", title: "PixelWave Studio - Retro CRT Image Effects", description: "Transform images into mesmerizing animated patterns using vintage dithering algorithms", images: ["/og-image.png"], creator: "@blakssh", }, }; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import AnimatedDitherBackground from "@/components/animated-dither-background" export default function Page() { return (

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": true, "tsx": true, "tailwind": { "config": "tailwind.config.ts", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/animated-dither-background.tsx" isMerged="true" "use client" import type React from "react" import { useRef, useState, useCallback, useEffect } from "react" import { Play, Pause, Upload, Video, Download, Volume2, VolumeX, ImageIcon, Power, Trash2 } from "lucide-react" import { useAudioManager } from "@/components/audio-manager" import { useCanvasRenderer } from "@/components/canvas-renderer" import { useImageLoader } from "@/components/image-loader" import { useVideoRecorder } from "@/components/video-recorder" type EffectType = "subtle-shimmer" | "wave-flow" | "twinkle" | "ascii" | "crt" export default function Component() { const fileInputRef = useRef(null) const [isPageLoaded, setIsPageLoaded] = useState(false) const [isPlaying, setIsPlaying] = useState(true) const [animationSpeed, setAnimationSpeed] = useState(1) const [brightness, setBrightness] = useState(1.0) const [effectType, setEffectType] = useState("subtle-shimmer") const [isDragOver, setIsDragOver] = useState(false) const [soundEnabled, setSoundEnabled] = useState(true) const [soundVolume, setSoundVolume] = useState(0.15) const [showSamples, setShowSamples] = useState(false) // Custom hooks const { currentImage, isLoadingImage, uploadedFileName, loadSampleImage, handleFileSelect, clearImage, SAMPLE_IMAGES, } = useImageLoader() const { canvasRef } = useCanvasRenderer({ currentImage, isPlaying, animationSpeed, brightness, effectType, }) const { audioDestinationRef, toggleSound, stopEffectAudio } = useAudioManager({ soundEnabled, soundVolume, effectType, isPlaying, currentImage, }) const { isRecording, videoBlob, recordingDuration, setRecordingDuration, startRecording, downloadVideo, discardVideo, clearVideo, } = useVideoRecorder() // Page load animation useEffect(() => { const timer = setTimeout(() => { setIsPageLoaded(true) }, 100) return () => clearTimeout(timer) }, []) const handleImageUpload = useCallback( (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (file) { handleFileSelect(file) } }, [handleFileSelect], ) const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragOver(true) }, []) const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragOver(false) }, []) const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault() setIsDragOver(false) const files = Array.from(e.dataTransfer.files) const imageFile = files.find((file) => file.type.startsWith("image/")) if (imageFile) { handleFileSelect(imageFile) } }, [handleFileSelect], ) const handleDropzoneClick = useCallback(() => { if (!showSamples) { fileInputRef.current?.click() } }, [showSamples]) const togglePlayPause = () => { setIsPlaying(!isPlaying) } const resetToDefault = () => { // Reset all values to default and remove image clearImage() clearVideo() // Clear video blob and buttons setIsPlaying(true) setAnimationSpeed(1) setBrightness(1.0) setSoundVolume(0.15) setEffectType("subtle-shimmer") setRecordingDuration(5) setShowSamples(false) // Stop audio stopEffectAudio() setSoundEnabled(true) // Clear file input if (fileInputRef.current) { fileInputRef.current.value = "" } } const handleStartRecording = () => { if (canvasRef.current) { startRecording(canvasRef.current, audioDestinationRef.current || undefined, soundEnabled) } } const handleToggleSound = () => { setSoundEnabled(!soundEnabled) toggleSound() } const handleLoadSample = (imageUrl: string, imageName: string) => { loadSampleImage(imageUrl, imageName) setShowSamples(false) } return (

{/* Header */}

PIXELWAVE STUDIO

> Transform images into mesmerizing animated patterns using vintage dithering algorithms

SYSTEM ONLINE

{/* CRT Monitor with Integrated Controls */}

{/* TV Brand Label - Top Panel */}

RETRO-VISION

{/* Main Screen */} {currentImage && !showSamples ? (

) : (

{/* Gallery View */} {showSamples ? (

IMAGE GALLERY

{SAMPLE_IMAGES.map((sample) => ( ))}

) : ( /* Upload Screen */ <> {isLoadingImage ? (

LOADING IMAGE...

) : (

INSERT IMAGE

> drag & drop or click to browse

)} )}

)} {/* Bottom Control Panel */}

{/* Filename with better spacing */} {uploadedFileName && (

> {uploadedFileName.toUpperCase()}

)}

{/* Control Panel */}

{/* Settings */}

PARAMETERS

SPEED [{animationSpeed}] setAnimationSpeed(Number.parseInt(e.target.value))} disabled={!currentImage} className="w-full slider" />

BRIGHTNESS [{brightness.toFixed(1)}X] setBrightness(Number.parseFloat(e.target.value))} disabled={!currentImage} className="w-full slider" />

VOLUME [{Math.round(soundVolume * 100)}%] setSoundVolume(Number.parseFloat(e.target.value))} disabled={!soundEnabled} className="w-full slider" />

{/* Effects */}

EFFECT MODE

{[ { key: "subtle-shimmer", label: "SHIMMER" }, { key: "wave-flow", label: "WAVE" }, { key: "twinkle", label: "TWINKLE" }, { key: "ascii", label: "ASCII" }, { key: "crt", label: "CRT" }, ].map(({ key, label }, index) => ( ))}

{/* Export */}

RECORD OUTPUT

DURATION [{recordingDuration} sec] setRecordingDuration(Number.parseInt(e.target.value))} disabled={isRecording || !currentImage} className="w-full slider" />

{isRecording ? (

) : videoBlob ? (

) : (

)}

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/audio-manager.tsx" isMerged="true" "use client" import { useRef, useCallback, useEffect } from "react" type EffectType = "subtle-shimmer" | "wave-flow" | "twinkle" | "ascii" | "crt" interface AudioManagerProps { soundEnabled: boolean soundVolume: number effectType: EffectType isPlaying: boolean currentImage: HTMLImageElement | null } export function useAudioManager({ soundEnabled, soundVolume, effectType, isPlaying, currentImage }: AudioManagerProps) { const audioContextRef = useRef(null) const oscillatorRef = useRef(null) const gainNodeRef = useRef(null) const audioDestinationRef = useRef(null) // Initialize audio context with destination for recording const initAudio = useCallback(() => { if (!audioContextRef.current) { audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() gainNodeRef.current = audioContextRef.current.createGain() audioDestinationRef.current = audioContextRef.current.createMediaStreamDestination() gainNodeRef.current.gain.value = soundVolume gainNodeRef.current.connect(audioContextRef.current.destination) // For speakers gainNodeRef.current.connect(audioDestinationRef.current) // For recording } }, [soundVolume]) // Update volume when slider changes useEffect(() => { if (gainNodeRef.current) { gainNodeRef.current.gain.value = soundVolume } }, [soundVolume]) // Create high-quality looping sound effects for all effects const startEffectAudio = useCallback( (effectType: EffectType) => { if (!soundEnabled || !audioContextRef.current || !gainNodeRef.current) return // Stop ALL previous audio completely stopEffectAudio() const audioContext = audioContextRef.current const gainNode = gainNodeRef.current switch (effectType) { case "subtle-shimmer": // Beautiful ambient shimmer with multiple harmonics const shimmer1 = audioContext.createOscillator() const shimmer2 = audioContext.createOscillator() const shimmer3 = audioContext.createOscillator() const shimmerGain1 = audioContext.createGain() const shimmerGain2 = audioContext.createGain() const shimmerGain3 = audioContext.createGain() shimmer1.type = "sine" shimmer2.type = "sine" shimmer3.type = "triangle" shimmer1.frequency.value = 220 shimmer2.frequency.value = 330 shimmer3.frequency.value = 440 shimmerGain1.gain.value = 0.2 shimmerGain2.gain.value = 0.15 shimmerGain3.gain.value = 0.1 // Create gentle modulation for shimmer effect const shimmerLFO1 = audioContext.createOscillator() const shimmerLFO2 = audioContext.createOscillator() const shimmerLFOGain1 = audioContext.createGain() const shimmerLFOGain2 = audioContext.createGain() shimmerLFO1.type = "sine" shimmerLFO2.type = "sine" shimmerLFO1.frequency.value = 0.3 shimmerLFO2.frequency.value = 0.7 shimmerLFOGain1.gain.value = 15 shimmerLFOGain2.gain.value = 10 shimmerLFO1.connect(shimmerLFOGain1) shimmerLFO2.connect(shimmerLFOGain2) shimmerLFOGain1.connect(shimmer1.frequency) shimmerLFOGain2.connect(shimmer2.frequency) shimmer1.connect(shimmerGain1) shimmer2.connect(shimmerGain2) shimmer3.connect(shimmerGain3) shimmerGain1.connect(gainNode) shimmerGain2.connect(gainNode) shimmerGain3.connect(gainNode) shimmer1.start() shimmer2.start() shimmer3.start() shimmerLFO1.start() shimmerLFO2.start() oscillatorRef.current = shimmer1 ;(oscillatorRef.current as any).additionalOscillators = [shimmer2, shimmer3, shimmerLFO1, shimmerLFO2] break case "wave-flow": // Rich ocean wave sounds with multiple layers const wave1 = audioContext.createOscillator() const wave2 = audioContext.createOscillator() const wave3 = audioContext.createOscillator() const wave4 = audioContext.createOscillator() const waveGain1 = audioContext.createGain() const waveGain2 = audioContext.createGain() const waveGain3 = audioContext.createGain() const waveGain4 = audioContext.createGain() wave1.type = "sine" wave2.type = "sine" wave3.type = "triangle" wave4.type = "sawtooth" wave1.frequency.value = 60 wave2.frequency.value = 90 wave3.frequency.value = 120 wave4.frequency.value = 40 waveGain1.gain.value = 0.25 waveGain2.gain.value = 0.2 waveGain3.gain.value = 0.15 waveGain4.gain.value = 0.1 // Create wave-like modulation with multiple LFOs const waveLFO1 = audioContext.createOscillator() const waveLFO2 = audioContext.createOscillator() const waveLFO3 = audioContext.createOscillator() const waveLFOGain1 = audioContext.createGain() const waveLFOGain2 = audioContext.createGain() const waveLFOGain3 = audioContext.createGain() waveLFO1.type = "sine" waveLFO2.type = "sine" waveLFO3.type = "triangle" waveLFO1.frequency.value = 0.2 waveLFO2.frequency.value = 0.5 waveLFO3.frequency.value = 0.8 waveLFOGain1.gain.value = 20 waveLFOGain2.gain.value = 15 waveLFOGain3.gain.value = 10 waveLFO1.connect(waveLFOGain1) waveLFO2.connect(waveLFOGain2) waveLFO3.connect(waveLFOGain3) waveLFOGain1.connect(wave1.frequency) waveLFOGain2.connect(wave2.frequency) waveLFOGain3.connect(wave3.frequency) wave1.connect(waveGain1) wave2.connect(waveGain2) wave3.connect(waveGain3) wave4.connect(waveGain4) waveGain1.connect(gainNode) waveGain2.connect(gainNode) waveGain3.connect(gainNode) waveGain4.connect(gainNode) wave1.start() wave2.start() wave3.start() wave4.start() waveLFO1.start() waveLFO2.start() waveLFO3.start() oscillatorRef.current = wave1 ;(oscillatorRef.current as any).additionalOscillators = [wave2, wave3, wave4, waveLFO1, waveLFO2, waveLFO3] break case "twinkle": // Magical ambient sparkle with continuous twinkling const twinkleBase = audioContext.createOscillator() const twinkleBaseGain = audioContext.createGain() twinkleBase.type = "sine" twinkleBase.frequency.value = 660 twinkleBaseGain.gain.value = 0.1 // Create sparkle modulation const twinkleLFO = audioContext.createOscillator() const twinkleLFOGain = audioContext.createGain() twinkleLFO.type = "triangle" twinkleLFO.frequency.value = 1.5 twinkleLFOGain.gain.value = 200 twinkleLFO.connect(twinkleLFOGain) twinkleLFOGain.connect(twinkleBase.frequency) // Add high frequency sparkles const sparkle1 = audioContext.createOscillator() const sparkle2 = audioContext.createOscillator() const sparkleGain1 = audioContext.createGain() const sparkleGain2 = audioContext.createGain() sparkle1.type = "triangle" sparkle2.type = "sine" sparkle1.frequency.value = 1320 sparkle2.frequency.value = 1760 sparkleGain1.gain.value = 0.08 sparkleGain2.gain.value = 0.06 // Modulate sparkles const sparkleLFO1 = audioContext.createOscillator() const sparkleLFO2 = audioContext.createOscillator() const sparkleLFOGain1 = audioContext.createGain() const sparkleLFOGain2 = audioContext.createGain() sparkleLFO1.type = "sine" sparkleLFO2.type = "sine" sparkleLFO1.frequency.value = 2.3 sparkleLFO2.frequency.value = 3.1 sparkleLFOGain1.gain.value = 0.05 sparkleLFOGain2.gain.value = 0.04 sparkleLFO1.connect(sparkleLFOGain1) sparkleLFO2.connect(sparkleLFOGain2) sparkleLFOGain1.connect(sparkleGain1.gain) sparkleLFOGain2.connect(sparkleGain2.gain) twinkleBase.connect(twinkleBaseGain) sparkle1.connect(sparkleGain1) sparkle2.connect(sparkleGain2) twinkleBaseGain.connect(gainNode) sparkleGain1.connect(gainNode) sparkleGain2.connect(gainNode) twinkleBase.start() sparkle1.start() sparkle2.start() twinkleLFO.start() sparkleLFO1.start() sparkleLFO2.start() oscillatorRef.current = twinkleBase ;(oscillatorRef.current as any).additionalOscillators = [ sparkle1, sparkle2, twinkleLFO, sparkleLFO1, sparkleLFO2, ] break case "ascii": // Retro computer sounds const ascii1 = audioContext.createOscillator() const ascii2 = audioContext.createOscillator() const asciiGain1 = audioContext.createGain() const asciiGain2 = audioContext.createGain() ascii1.type = "square" ascii2.type = "square" ascii1.frequency.value = 220 ascii2.frequency.value = 110 asciiGain1.gain.value = 0.15 asciiGain2.gain.value = 0.1 // Create digital-style modulation const asciiLFO = audioContext.createOscillator() const asciiLFOGain = audioContext.createGain() asciiLFO.type = "square" asciiLFO.frequency.value = 2 asciiLFOGain.gain.value = 50 asciiLFO.connect(asciiLFOGain) asciiLFOGain.connect(ascii1.frequency) ascii1.connect(asciiGain1) ascii2.connect(asciiGain2) asciiGain1.connect(gainNode) asciiGain2.connect(gainNode) ascii1.start() ascii2.start() asciiLFO.start() oscillatorRef.current = ascii1 ;(oscillatorRef.current as any).additionalOscillators = [ascii2, asciiLFO] break case "crt": // CRT monitor hum and buzz const crtHum = audioContext.createOscillator() const crtBuzz = audioContext.createOscillator() const crtHumGain = audioContext.createGain() const crtBuzzGain = audioContext.createGain() crtHum.type = "sawtooth" crtBuzz.type = "square" crtHum.frequency.value = 60 // Power line hum crtBuzz.frequency.value = 15734 // Horizontal sync frequency crtHumGain.gain.value = 0.3 crtBuzzGain.gain.value = 0.05 // Add some modulation to the buzz const crtLFO = audioContext.createOscillator() const crtLFOGain = audioContext.createGain() crtLFO.type = "sine" crtLFO.frequency.value = 0.1 crtLFOGain.gain.value = 0.02 crtLFO.connect(crtLFOGain) crtLFOGain.connect(crtBuzzGain.gain) crtHum.connect(crtHumGain) crtBuzz.connect(crtBuzzGain) crtHumGain.connect(gainNode) crtBuzzGain.connect(gainNode) crtHum.start() crtBuzz.start() crtLFO.start() oscillatorRef.current = crtHum ;(oscillatorRef.current as any).additionalOscillators = [crtBuzz, crtLFO] break } }, [soundEnabled], ) const stopEffectAudio = useCallback(() => { if (oscillatorRef.current) { try { // Stop main oscillator oscillatorRef.current.stop() // Stop additional oscillators if they exist if ((oscillatorRef.current as any).additionalOscillators) { ;(oscillatorRef.current as any).additionalOscillators.forEach((osc: OscillatorNode) => { try { osc.stop() } catch (e) { // Oscillator might already be stopped } }) } // Clear sparkle interval if it exists if ((oscillatorRef.current as any).sparkleInterval) { clearInterval((oscillatorRef.current as any).sparkleInterval) } } catch (e) { // Oscillator might already be stopped } oscillatorRef.current = null } }, []) const toggleSound = useCallback(() => { if (!soundEnabled) { initAudio() if (currentImage && isPlaying) { startEffectAudio(effectType) } } else { stopEffectAudio() } }, [soundEnabled, initAudio, startEffectAudio, stopEffectAudio, currentImage, effectType, isPlaying]) // Start/stop audio when effect changes or playback state changes useEffect(() => { if (soundEnabled && currentImage) { if (isPlaying) { stopEffectAudio() startEffectAudio(effectType) } else { stopEffectAudio() } } }, [effectType, soundEnabled, currentImage, isPlaying, startEffectAudio, stopEffectAudio]) // Initialize audio on mount useEffect(() => { initAudio() }, [initAudio]) return { audioDestinationRef, toggleSound, stopEffectAudio, } } [V0_FILE]typescriptreact:file="components/canvas-renderer.tsx" isMerged="true" "use client" import { useRef, useEffect, useCallback } from "react" type EffectType = "subtle-shimmer" | "wave-flow" | "twinkle" | "ascii" | "crt" interface CanvasRendererProps { currentImage: HTMLImageElement | null isPlaying: boolean animationSpeed: number brightness: number effectType: EffectType } export function useCanvasRenderer({ currentImage, isPlaying, animationSpeed, brightness, effectType, }: CanvasRendererProps) { const canvasRef = useRef(null) const animationRef = useRef() // Convert UI speed (1-10) to actual animation speed (0.01-0.3) const getActualSpeed = useCallback((uiSpeed: number) => { return (uiSpeed / 10) * 0.3 }, []) // Hash function for consistent per-pixel randomness const hash = useCallback((x: number, y: number) => { let h = x * 374761393 + y * 668265263 h = (h ^ (h >>> 13)) * 1274126177 return (h ^ (h >>> 16)) / 4294967296 }, []) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Get the actual display size of the canvas const rect = canvas.getBoundingClientRect() const displayWidth = rect.width const displayHeight = rect.height // Use higher internal resolution for better quality // Scale factor based on device pixel ratio and minimum quality threshold const pixelRatio = window.devicePixelRatio || 1 const minWidth = 800 // Minimum internal width for quality const minHeight = 600 // Minimum internal height for quality // Calculate scale factor to ensure minimum quality while being responsive const scaleX = Math.max(1, minWidth / displayWidth) const scaleY = Math.max(1, minHeight / displayHeight) const scale = Math.max(scaleX, scaleY, pixelRatio) // Set high internal resolution const canvasWidth = Math.floor(displayWidth * scale) const canvasHeight = Math.floor(displayHeight * scale) canvas.width = canvasWidth canvas.height = canvasHeight // Scale the canvas back down to display size canvas.style.width = `${displayWidth}px` canvas.style.height = `${displayHeight}px` // Scale the context to match the higher resolution ctx.scale(scale, scale) if (!currentImage) { ctx.fillStyle = "#000000" ctx.fillRect(0, 0, displayWidth, displayHeight) if (animationRef.current) { cancelAnimationFrame(animationRef.current) animationRef.current = undefined } return } const img = currentImage let time = 0 const asciiChars = " .:-=+*#%@".split("") const animate = () => { // Fill entire canvas with black first (using display dimensions) ctx.fillStyle = "#000000" ctx.fillRect(0, 0, displayWidth, displayHeight) // Show funny message when paused if (!isPlaying) { ctx.fillStyle = "rgba(255, 255, 255, 0.8)" const fontSize = Math.max(12, Math.min(displayWidth, displayHeight) * 0.04) ctx.font = `${fontSize}px monospace` ctx.textAlign = "center" ctx.textBaseline = "middle" const funnyMessages = [ "🎬 PAUSED 🎬", "💤 Pixels went to sleep", "🍕 Pizza break!", "🚽 Bathroom break...", "🎮 Alt+tabbed to play games", "☕ Getting coffee, brb", "🐕 Walking the dog", "📱 Checking Instagram", "🛌 Taking a power nap", "🍿 Making popcorn", "🎯 Procrastinating like a pro", "🧘‍♂️ Meditating on life choices", "🎪 Circus left town", "🦄 Chasing unicorns", "🎭 Having an existential crisis", "🍔 Burger run!", "🎸 Started a band", "🚀 Gone to Mars", "🎨 Became an artist", "💸 Buying crypto", "🎲 Rolling dice", "🎪 Joined the circus", "🧙‍♂️ Learning magic tricks", "🎯 Missing the point", "🍜 Slurping noodles", "🎮 Rage quit", "🛸 Abducted by aliens", "🎭 Method acting", "🍰 Having cake", "🎪 Clowning around", ] const messageIndex = Math.floor(Date.now() / 2000) % funnyMessages.length const message = funnyMessages[messageIndex] ctx.fillText(message, displayWidth / 2, displayHeight / 2) return } // Calculate proper image scaling to fit within canvas bounds with padding const imgAspect = img.width / img.height const canvasAspect = displayWidth / displayHeight // Add padding to ensure image doesn't touch edges - REDUCED from 5% to 2% const padding = Math.min(displayWidth, displayHeight) * 0.02 // Reduced padding const availableWidth = displayWidth - padding * 2 const availableHeight = displayHeight - padding * 2 let drawWidth, drawHeight, offsetX, offsetY if (imgAspect > availableWidth / availableHeight) { // Image is wider relative to available space - fit to width drawWidth = availableWidth drawHeight = drawWidth / imgAspect offsetX = padding offsetY = padding + (availableHeight - drawHeight) / 2 } else { // Image is taller relative to available space - fit to height drawHeight = availableHeight drawWidth = drawHeight * imgAspect offsetX = padding + (availableWidth - drawWidth) / 2 offsetY = padding } // Ensure the image fits completely within the canvas with padding drawWidth = Math.min(drawWidth, availableWidth) drawHeight = Math.min(drawHeight, availableHeight) // Draw the image first to get pixel data (using display coordinates) ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight) const imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight) const originalData = new Uint8ClampedArray(imageData.data) // Clear canvas again for effect rendering ctx.fillStyle = "#000000" ctx.fillRect(0, 0, displayWidth, displayHeight) // Use consistent effect parameters regardless of canvas resolution const dotSize = 2 const spacing = effectType === "ascii" ? 8 : 3 // Process using display coordinates but sample from high-res image data for (let y = 0; y < displayHeight; y += spacing) { for (let x = 0; x < displayWidth; x += spacing) { // Sample from the high-resolution image data const sampleX = Math.floor(x * scale) const sampleY = Math.floor(y * scale) const i = (sampleY * canvasWidth + sampleX) * 4 if (i >= originalData.length) continue const r = originalData[i] const g = originalData[i + 1] const b = originalData[i + 2] let luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255 luminance = Math.max(0, Math.min(1, luminance * brightness)) let animatedSize = dotSize * (luminance * 0.8 + 0.2) let shouldDraw = false let finalR = r, finalG = g, finalB = b const pixelHash = hash(Math.floor(x / spacing), Math.floor(y / spacing)) const phase = pixelHash * Math.PI * 2 switch (effectType) { case "subtle-shimmer": const shimmerOffset = Math.sin(x * 0.02 + y * 0.02 + time * getActualSpeed(animationSpeed) * 3) * 0.15 const shimmerOffset2 = Math.cos(x * 0.015 + y * 0.025 + time * getActualSpeed(animationSpeed) * 2) * 0.1 const threshold = 0.5 + shimmerOffset + shimmerOffset2 shouldDraw = luminance > threshold animatedSize = animatedSize + Math.sin(time * getActualSpeed(animationSpeed) * 4 + x * 0.1 + y * 0.1) * 0.4 const colorShift = Math.sin(time * getActualSpeed(animationSpeed) * 2 + x * 0.01 + y * 0.01) * 15 finalR = Math.max(0, Math.min(255, r + colorShift)) finalG = Math.max(0, Math.min(255, g + colorShift * 0.5)) finalB = Math.max(0, Math.min(255, b + colorShift * 0.8)) break case "wave-flow": // Beautiful sine/cosine wave patterns const waveSpeed = time * getActualSpeed(animationSpeed) // Primary horizontal sine wave const horizontalWave = Math.sin(x * 0.01 + waveSpeed * 2) * 0.4 // Secondary vertical cosine wave const verticalWave = Math.cos(y * 0.008 + waveSpeed * 1.5) * 0.3 // Diagonal interference wave const diagonalWave = Math.sin((x + y) * 0.006 + waveSpeed * 2.5) * 0.2 // Circular wave from center const centerX = displayWidth / 2 const centerY = displayHeight / 2 const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2) const circularWave = Math.cos(distance * 0.02 - waveSpeed * 3) * 0.25 // Combine all waves const combinedWave = horizontalWave + verticalWave + diagonalWave + circularWave const waveThreshold = 0.5 + combinedWave * 0.3 shouldDraw = luminance > waveThreshold // Dynamic size based on wave intensity const waveIntensity = (combinedWave + 1) / 2 // Normalize to 0-1 animatedSize = dotSize * (luminance * 0.6 + 0.4) * (0.3 + waveIntensity * 1.2) // Color shifting based on wave patterns const colorWaveR = Math.sin(x * 0.005 + waveSpeed * 1.8) * 25 const colorWaveG = Math.cos(y * 0.007 + waveSpeed * 2.2) * 20 const colorWaveB = Math.sin((x + y) * 0.004 + waveSpeed * 1.6) * 30 finalR = Math.max(0, Math.min(255, r + colorWaveR)) finalG = Math.max(0, Math.min(255, g + colorWaveG)) finalB = Math.max(0, Math.min(255, b + colorWaveB)) break case "twinkle": // Use hash for consistent per-pixel phase const twinkleWave = Math.sin(phase + time * getActualSpeed(animationSpeed) * 2) * 0.5 + 0.5 const twinkleThreshold = 0.3 + pixelHash * 0.3 // Vary threshold per pixel shouldDraw = luminance > twinkleThreshold && twinkleWave > 0.4 animatedSize = dotSize * (luminance * 0.8 + 0.2) * (0.5 + twinkleWave * 0.8) // Add sparkle effect const sparkle = twinkleWave > 0.85 ? 1.5 : 1 animatedSize *= sparkle break case "ascii": const charIndex = Math.floor(luminance * (asciiChars.length - 1)) const char = asciiChars[charIndex] // More visible animation while keeping image readable const baseThreshold = 0.1 // Keep low threshold to show image structure // More noticeable flicker with multiple wave patterns const primaryFlicker = Math.sin(phase * 0.8 + time * getActualSpeed(animationSpeed) * 2.5) * 0.3 + 0.7 const secondaryFlicker = Math.cos(phase * 1.3 + time * getActualSpeed(animationSpeed) * 3.2) * 0.2 + 0.8 const tertiaryFlicker = Math.sin(phase * 0.5 + time * getActualSpeed(animationSpeed) * 1.8) * 0.15 + 0.85 // Combine for more dynamic brightness variation const dynamicBrightness = primaryFlicker * secondaryFlicker * tertiaryFlicker // Show characters where there's image content const shouldShow = luminance > baseThreshold if (shouldShow) { // More dynamic alpha with better visibility const alpha = Math.max(0.4, Math.min(1, luminance * brightness * dynamicBrightness * 1.5)) ctx.font = `${spacing}px monospace` ctx.textAlign = "center" ctx.textBaseline = "middle" // More dynamic colors with visible variation const colorVariation = 0.8 + dynamicBrightness * 0.4 const dynamicR = Math.min(255, r * brightness * colorVariation) const dynamicG = Math.min(255, g * brightness * colorVariation) const dynamicB = Math.min(255, b * brightness * colorVariation) ctx.fillStyle = `rgba(${dynamicR}, ${dynamicG}, ${dynamicB}, ${alpha})` // More noticeable position animation const jitterX = Math.sin(phase * 0.7 + time * getActualSpeed(animationSpeed) * 2.8) * 0.8 const jitterY = Math.cos(phase * 1.1 + time * getActualSpeed(animationSpeed) * 2.3) * 0.8 ctx.fillText(char, x + spacing / 2 + jitterX, y + spacing / 2 + jitterY) } shouldDraw = false break case "crt": const crtThreshold = 0.5 + Math.sin(x * 0.02 + y * 0.02 + time * getActualSpeed(animationSpeed) * 2) * 0.15 shouldDraw = luminance > crtThreshold animatedSize = dotSize * (luminance * 0.8 + 0.2) + Math.sin(time * getActualSpeed(animationSpeed) * 3 + x * 0.1) * 0.3 break } if (shouldDraw && effectType !== "ascii") { ctx.fillStyle = `rgb(${finalR}, ${finalG}, ${finalB})` ctx.beginPath() ctx.arc( x + Math.sin(time * getActualSpeed(animationSpeed) * 1.5 + x * 0.05) * 0.8, y + Math.cos(time * getActualSpeed(animationSpeed) * 1.2 + y * 0.05) * 0.8, Math.max(0.5, animatedSize), 0, Math.PI * 2, ) ctx.fill() } } } if (effectType === "crt") { ctx.strokeStyle = `rgba(0, 0, 0, ${0.25 + Math.sin(time * getActualSpeed(animationSpeed) * 0.5) * 0.1})` ctx.lineWidth = 1 for (let y = 0; y < displayHeight; y += 2) { ctx.beginPath() ctx.moveTo(0, y) ctx.lineTo(displayWidth, y) ctx.stroke() } const gradient = ctx.createRadialGradient( displayWidth / 2, displayHeight / 2, Math.min(displayWidth, displayHeight) * 0.3, displayWidth / 2, displayHeight / 2, Math.min(displayWidth, displayHeight) * 0.7, ) gradient.addColorStop(0, "rgba(0,0,0,0)") gradient.addColorStop(1, "rgba(0,0,0,0.4)") ctx.fillStyle = gradient ctx.fillRect(0, 0, displayWidth, displayHeight) } time += 1 if (isPlaying) { animationRef.current = requestAnimationFrame(animate) } } if (animationRef.current) { cancelAnimationFrame(animationRef.current) } animationRef.current = requestAnimationFrame(animate) return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [isPlaying, animationSpeed, brightness, currentImage, effectType, hash, getActualSpeed]) return { canvasRef } } [V0_FILE]typescriptreact:file="components/image-loader.tsx" isMerged="true" "use client" import { useState, useCallback, useEffect } from "react" const SAMPLE_IMAGES = [ { id: 1, name: "Aesthetic Painting", url: "https://images.unsplash.com/photo-1578301996581-bf7caec556c0?w=800&h=600&fit=crop", thumb: "https://images.unsplash.com/photo-1578301996581-bf7caec556c0?w=150&h=150&fit=crop", }, { id: 2, name: "Spooky House", url: "https://images.unsplash.com/photo-1481018085669-2bc6e4f00eed?w=800&h=600&fit=crop", thumb: "https://images.unsplash.com/photo-1481018085669-2bc6e4f00eed?w=150&h=150&fit=crop", }, { id: 3, name: "Uncle Reading Newspaper", url: "https://images.unsplash.com/photo-1560957123-e8e019c66980?w=800&h=600&fit=crop", thumb: "https://images.unsplash.com/photo-1560957123-e8e019c66980?w=150&h=150&fit=crop", }, { id: 4, name: "Astronaut on Rover", url: "https://images.unsplash.com/photo-1614315517650-3771cf72d18a?w=800&h=600&fit=crop&crop=face", thumb: "https://images.unsplash.com/photo-1614315517650-3771cf72d18a?w=150&h=150&fit=crop&crop=face", }, ] // Preload sample images for better performance const preloadImages = () => { SAMPLE_IMAGES.forEach((sample) => { const img = new Image() img.crossOrigin = "anonymous" img.src = sample.url const thumb = new Image() thumb.crossOrigin = "anonymous" thumb.src = sample.thumb }) } export function useImageLoader() { const [currentImage, setCurrentImage] = useState(null) const [isLoadingImage, setIsLoadingImage] = useState(false) const [uploadedFileName, setUploadedFileName] = useState(null) const loadSampleImage = useCallback((imageUrl: string, imageName: string) => { setIsLoadingImage(true) setCurrentImage(null) setUploadedFileName(null) const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { setCurrentImage(img) setIsLoadingImage(false) setUploadedFileName(`${imageName} (Sample)`) } img.onerror = (e) => { console.error("Failed to load sample image:", imageUrl, e) setCurrentImage(null) setIsLoadingImage(false) } img.src = imageUrl }, []) const loadImage = useCallback((src: string, fileName?: string) => { setIsLoadingImage(true) setCurrentImage(null) const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { setCurrentImage(img) setIsLoadingImage(false) if (fileName) { setUploadedFileName(fileName) } } img.onerror = (e) => { console.error("Failed to load image:", src, e) setCurrentImage(null) setIsLoadingImage(false) } img.src = src }, []) const handleFileSelect = useCallback( (file: File) => { const reader = new FileReader() reader.onload = (e) => { if (e.target?.result) { loadImage(e.target.result as string, file.name) } } reader.onerror = (e) => { console.error("FileReader error:", e) setIsLoadingImage(false) } reader.readAsDataURL(file) }, [loadImage], ) const clearImage = useCallback(() => { setCurrentImage(null) setUploadedFileName(null) }, []) // Preload sample images on mount useEffect(() => { preloadImages() }, []) return { currentImage, isLoadingImage, uploadedFileName, loadSampleImage, loadImage, handleFileSelect, clearImage, SAMPLE_IMAGES, } } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes/dist/types" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true" "use client" import * as React from "react" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" export function ThemeToggle() { const { theme, setTheme } = useTheme() const [mounted, setMounted] = React.useState(false) React.useEffect(() => { setMounted(true) }, []) if (!mounted) { return ( ) } return ( ) } [V0_FILE]typescriptreact:file="components/ui-components.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" // macOS-inspired loading spinner component export const MacOSSpinner = ({ size = 24 }: { size?: number }) => { return (

{[...Array(12)].map((_, i) => (

))}

) } // Theme toggle component export const ThemeToggle = () => { const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) if (!mounted) { return ( ) } return ( ) } [V0_FILE]typescriptreact:file="components/video-recorder.tsx" isMerged="true" "use client" import { useRef, useState, useCallback } from "react" export function useVideoRecorder() { const mediaRecorderRef = useRef(null) const recordedChunksRef = useRef([]) const recordingTimeoutRef = useRef(null) const [isRecording, setIsRecording] = useState(false) const [videoBlob, setVideoBlob] = useState(null) const [recordingDuration, setRecordingDuration] = useState(5) // Function to get supported MIME type const getSupportedMimeType = useCallback(() => { const types = [ 'video/mp4; codecs="avc1.42E01E,mp4a.40.2"', "video/mp4", "video/webm; codecs=vp9,opus", "video/webm; codecs=vp8,opus", "video/webm", ] for (const type of types) { if (MediaRecorder.isTypeSupported(type)) { return type } } return "video/webm" // fallback }, []) const startRecording = useCallback( (canvas: HTMLCanvasElement, audioDestination?: MediaStreamAudioDestinationNode, soundEnabled?: boolean) => { if (!canvas) return recordedChunksRef.current = [] setVideoBlob(null) try { // MP4/WebM recording const canvasStream = canvas.captureStream(30) // 30 FPS for video let combinedStream = canvasStream if (soundEnabled && audioDestination) { const audioStream = audioDestination.stream combinedStream = new MediaStream([...canvasStream.getVideoTracks(), ...audioStream.getAudioTracks()]) } const mimeType = getSupportedMimeType() const recorder = new MediaRecorder(combinedStream, { mimeType }) recorder.ondataavailable = (event) => { if (event.data.size > 0) { recordedChunksRef.current.push(event.data) } } recorder.onstop = () => { const blob = new Blob(recordedChunksRef.current, { type: mimeType.includes("mp4") ? "video/mp4" : "video/webm", }) setVideoBlob(blob) setIsRecording(false) if (recordingTimeoutRef.current) { clearTimeout(recordingTimeoutRef.current) } } recorder.onerror = (event) => { console.error("MediaRecorder error:", event) setIsRecording(false) if (recordingTimeoutRef.current) { clearTimeout(recordingTimeoutRef.current) } } recorder.start(100) setIsRecording(true) mediaRecorderRef.current = recorder recordingTimeoutRef.current = setTimeout( () => { if (mediaRecorderRef.current && mediaRecorderRef.current.state === "recording") { mediaRecorderRef.current.stop() } }, recordingDuration * 1000 + 100, ) } catch (error) { console.error("Error starting recording:", error) setIsRecording(false) } }, [recordingDuration, getSupportedMimeType], ) const downloadVideo = useCallback(() => { if (videoBlob) { const url = URL.createObjectURL(videoBlob) const a = document.createElement("a") a.href = url const extension = videoBlob.type.includes("mp4") ? "mp4" : "webm" a.download = `pixelwave-${Date.now()}.${extension}` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } }, [videoBlob]) const discardVideo = useCallback(() => { setVideoBlob(null) recordedChunksRef.current = [] }, []) const previewVideo = useCallback(() => { if (videoBlob) { const url = URL.createObjectURL(videoBlob) window.open(url, "_blank") } }, [videoBlob]) const clearVideo = useCallback(() => { setVideoBlob(null) recordedChunksRef.current = [] }, []) return { isRecording, videoBlob, recordingDuration, setRecordingDuration, startRecording, downloadVideo, discardVideo, previewVideo, clearVideo, } } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "next lint", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "latest", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.2.4", "next-themes": "latest", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" isMerged="true" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { tailwindcss: {}, }, }; export default config; [V0_FILE]css:file="styles/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: "class", content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { orbitron: ["Orbitron", "monospace"], sans: ["system-ui", "sans-serif"], mono: ["monospace"], }, 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")], } export default config [V0_FILE]json:file="tsconfig.json" isMerged="true" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]plaintext:file="public/fonts/Orbitron-VariableFont_wght.ttf" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_aYoYf2HTychYtTlcB4tSO9AVwdQB/fgqQ_n64FxR65lP1Smfm54/public/fonts/Orbitron-VariableFont_wght.ttf" isMerged="true" [V0_FILE]png:file="public/og-image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_aYoYf2HTychYtTlcB4tSO9AVwdQB/5JzbggCdc7CpGmrkCm_uTl/public/og-image.png" isMerged="true" [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; /* Local Orbitron font */ @font-face { font-family: "Orbitron"; src: url("/fonts/Orbitron-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @layer base { :root { --background: 223.8136 0.0005% 98.6829%; --foreground: 0 0% 0%; --card: 223.8136 -172.5242% 100.0000%; --card-foreground: 0 0% 0%; --popover: 223.8136 0.0005% 98.6829%; --popover-foreground: 0 0% 0%; --primary: 0 0% 0%; --primary-foreground: 223.8136 -172.5242% 100.0000%; --secondary: 223.8136 0.0001% 92.1478%; --secondary-foreground: 0 0% 0%; --muted: 223.8136 0.0002% 96.0587%; --muted-foreground: 223.8136 0.0000% 32.3067%; --accent: 223.8136 0.0001% 92.1478%; --accent-foreground: 0 0% 0%; --destructive: 358.4334 74.9120% 59.7455%; --destructive-foreground: 223.8136 -172.5242% 100.0000%; --border: 223.8136 0.0001% 89.5577%; --input: 223.8136 0.0001% 92.1478%; --ring: 0 0% 0%; --radius: 0.5rem; /* Retro colors */ --retro-bg: 220 15% 8%; --retro-surface: 220 12% 12%; --retro-border: 220 10% 20%; --retro-green: 120 100% 50%; --retro-amber: 45 100% 60%; --retro-red: 0 100% 60%; --retro-blue: 200 100% 60%; /* Custom easing curves */ --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); } .dark { --background: 0 0% 0%; --foreground: 223.8136 -172.5242% 100.0000%; --card: 223.8136 0.0000% 3.5452%; --card-foreground: 223.8136 -172.5242% 100.0000%; --popover: 223.8136 0.0000% 6.8692%; --popover-foreground: 223.8136 -172.5242% 100.0000%; --primary: 223.8136 -172.5242% 100.0000%; --primary-foreground: 0 0% 0%; --secondary: 223.8136 0.0000% 13.1499%; --secondary-foreground: 223.8136 -172.5242% 100.0000%; --muted: 223.8136 0.0000% 11.3040%; --muted-foreground: 223.8136 0.0000% 64.4710%; --accent: 223.8136 0.0000% 19.8916%; --accent-foreground: 223.8136 -172.5242% 100.0000%; --destructive: 359.9132 100.2494% 67.8807%; --destructive-foreground: 0 0% 0%; --border: 223.8136 0.0000% 14.0871%; --input: 223.8136 0.0000% 19.8916%; --ring: 223.8136 0.0000% 64.4710%; } * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; background: hsl(var(--retro-bg)); color: hsl(var(--retro-green)); font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace; } .heading-orbitron { font-family: "Orbitron", monospace; } .font-orbitron { font-family: "Orbitron", monospace; } .font-mono { font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace; } } /* Retro CRT styles */ .crt-container { background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 50%, #0f0f0f 100%); border: 4px solid #333; border-radius: 24px; padding: 24px; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.6), 0 20px 40px rgba(0, 0, 0, 0.4); position: relative; } /* TV Control Panel - Bottom */ .tv-controls { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); background: linear-gradient(145deg, #2a2a2a, #1a1a1a); border: 2px solid #333; border-radius: 12px; padding: 8px 20px; display: flex; gap: 12px; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); z-index: 20; } /* TV Top Panel */ .tv-top-panel { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: linear-gradient(145deg, #2a2a2a, #1a1a1a); border: 2px solid #333; border-radius: 8px; padding: 4px 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } .crt-screen { background: #000; border: 3px solid #222; border-radius: 12px; position: relative; overflow: hidden; } .crt-screen canvas { width: 100% !important; height: 100% !important; display: block; object-fit: contain; } .crt-screen::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 255, 0, 0.03) 2px, rgba(0, 255, 0, 0.03) 4px ); pointer-events: none; z-index: 5; } .crt-screen::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%); pointer-events: none; z-index: 11; } /* TV Buttons */ .tv-button { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #444; background: linear-gradient(145deg, #333, #222); color: hsl(var(--retro-green)); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .tv-button:active { background: linear-gradient(145deg, #222, #111); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); } .tv-button.power { background: linear-gradient(145deg, #4a1a1a, #2a0a0a); border-color: #600; color: #ff4444; } .tv-button.power:active { background: linear-gradient(145deg, #2a0a0a, #1a0505); } .tv-button:disabled { opacity: 0.5; cursor: not-allowed; } /* Retro buttons */ .retro-button { background: linear-gradient(145deg, #333, #222); border: 2px solid #444; color: hsl(var(--retro-green)); font-family: "Orbitron", monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.3); transition: all 0.2s ease; } .retro-button:hover { box-shadow: 0 0 8px rgba(0, 255, 0, 0.4); transform: translateY(-1px); } .retro-button.active { background: linear-gradient(145deg, #0a4a0a, #063306); color: hsl(var(--retro-green)); box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.3), 0 0 15px rgba(0, 255, 0, 0.2); } /* Retro control panel */ .retro-panel { background: linear-gradient(145deg, #1a1a1a, #0f0f0f); border: 2px solid #333; border-radius: 12px; padding: 16px; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 0, 0.05); } .retro-label { color: hsl(var(--retro-amber)); font-family: "Orbitron", monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem; } /* Custom retro slider styles */ .slider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: linear-gradient(145deg, #0a0a0a, #1a1a1a); border: 2px solid #333; border-radius: 6px; outline: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 8px rgba(0, 255, 0, 0.1); transition: all 0.2s ease; } .slider:hover { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 255, 0, 0.2); } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(145deg, hsl(var(--retro-green)), #00cc00); border: 2px solid #333; cursor: pointer; box-shadow: 0 0 10px rgba(0, 255, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.3); transition: all 0.15s ease; } .slider::-webkit-slider-thumb:hover { background: linear-gradient(145deg, #00ff00, #00aa00); box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.4); transform: scale(1.1); } .slider::-webkit-slider-thumb:active { background: linear-gradient(145deg, #00dd00, #008800); box-shadow: 0 0 20px rgba(0, 255, 0, 1), inset 0 2px 4px rgba(0, 0, 0, 0.3); transform: scale(0.95); } .slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(145deg, hsl(var(--retro-green)), #00cc00); border: 2px solid #333; cursor: pointer; box-shadow: 0 0 10px rgba(0, 255, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.3); transition: all 0.15s ease; } .slider::-moz-range-thumb:hover { background: linear-gradient(145deg, #00ff00, #00aa00); box-shadow: 0 0 15px rgba(0, 255, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.4); transform: scale(1.1); } .slider::-moz-range-thumb:active { background: linear-gradient(145deg, #00dd00, #008800); box-shadow: 0 0 20px rgba(0, 255, 0, 1), inset 0 2px 4px rgba(0, 0, 0, 0.3); transform: scale(0.95); } .slider::-moz-range-track { width: 100%; height: 8px; background: linear-gradient(145deg, #0a0a0a, #1a1a1a); border: 2px solid #333; border-radius: 6px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); } /* Disabled slider styles */ .slider:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); } .slider:disabled::-webkit-slider-thumb { background: linear-gradient(145deg, #444, #222); cursor: not-allowed; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .slider:disabled::-moz-range-thumb { background: linear-gradient(145deg, #444, #222); cursor: not-allowed; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } @keyframes macos-spinner { 0% { opacity: 0.3; } 100% { opacity: 1; } } .animate-macos-spinner { animation: macos-spinner 1s ease-in-out infinite; } /* Page load animations with custom easing */ @keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-in-from-top { from { opacity: 0; transform: translateY(-2rem); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-in-from-left { from { opacity: 0; transform: translateX(-3rem); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-in-from-right { from { opacity: 0; transform: translateX(3rem); } to { opacity: 1; transform: translateX(0); } } @keyframes slide-in-from-bottom { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: translateY(0); } } @keyframes zoom-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .page-fade-in { animation: page-fade-in 0.8s var(--ease-out-quart) forwards; } .slide-in-top { animation: slide-in-from-top 0.9s var(--ease-out-expo) forwards; } .slide-in-left { animation: slide-in-from-left 1s var(--ease-out-quint) forwards; } .slide-in-right { animation: slide-in-from-right 1s var(--ease-out-quint) forwards; } .slide-in-bottom { animation: slide-in-from-bottom 0.7s var(--ease-out-cubic) forwards; } .zoom-in-subtle { animation: zoom-in 0.6s var(--ease-out-back) forwards; } /* Stagger delays */ .delay-100 { animation-delay: 100ms; } .delay-200 { animation-delay: 200ms; } .delay-300 { animation-delay: 300ms; } .delay-400 { animation-delay: 400ms; } .delay-500 { animation-delay: 500ms; } .delay-600 { animation-delay: 600ms; } .delay-700 { animation-delay: 700ms; } .delay-800 { animation-delay: 800ms; } .delay-900 { animation-delay: 900ms; } .delay-1000 { animation-delay: 1000ms; } .delay-1100 { animation-delay: 1100ms; } .delay-1200 { animation-delay: 1200ms; } .delay-1300 { animation-delay: 1300ms; } .delay-1400 { animation-delay: 1400ms; } @layer utilities { .text-balance { text-wrap: balance; } }