[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.1 0.01 300); --foreground: oklch(0.98 0.05 180); --card: oklch(0.15 0.02 290); --card-foreground: oklch(0.98 0.05 180); --popover: oklch(0.12 0.02 295); --popover-foreground: oklch(0.98 0.05 180); --primary: oklch(0.7 0.25 320); --primary-foreground: oklch(0.1 0.01 300); --secondary: oklch(0.65 0.22 180); --secondary-foreground: oklch(0.1 0.01 300); --muted: oklch(0.25 0.02 290); --muted-foreground: oklch(0.6 0.05 180); --accent: oklch(0.75 0.25 140); --accent-foreground: oklch(0.1 0.01 300); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0.05 180); --border: oklch(0.25 0.05 290); --input: oklch(0.2 0.03 290); --ring: oklch(0.7 0.25 320); --radius: 0.375rem; } .dark { --background: oklch(0.05 0.01 300); --foreground: oklch(0.98 0.05 180); --card: oklch(0.1 0.02 290); --card-foreground: oklch(0.98 0.05 180); --popover: oklch(0.08 0.02 295); --popover-foreground: oklch(0.98 0.05 180); --primary: oklch(0.75 0.28 320); --primary-foreground: oklch(0.05 0.01 300); --secondary: oklch(0.7 0.25 180); --secondary-foreground: oklch(0.05 0.01 300); --muted: oklch(0.2 0.02 290); --muted-foreground: oklch(0.65 0.05 180); --accent: oklch(0.8 0.28 140); --accent-foreground: oklch(0.05 0.01 300); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.98 0.05 180); --border: oklch(0.2 0.05 290); --input: oklch(0.15 0.03 290); --ring: oklch(0.75 0.28 320); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Custom glitch animations */ @keyframes glitch-anim { 0% { clip: rect(42px, 9999px, 44px, 0); transform: skew(0.5deg); } 5% { clip: rect(12px, 9999px, 59px, 0); transform: skew(0.3deg); } 10% { clip: rect(48px, 9999px, 29px, 0); transform: skew(0.8deg); } 15% { clip: rect(42px, 9999px, 73px, 0); transform: skew(0.4deg); } 20% { clip: rect(63px, 9999px, 27px, 0); transform: skew(0.2deg); } 25% { clip: rect(34px, 9999px, 55px, 0); transform: skew(0.6deg); } 30% { clip: rect(86px, 9999px, 73px, 0); transform: skew(0.5deg); } 35% { clip: rect(20px, 9999px, 20px, 0); transform: skew(0.3deg); } 40% { clip: rect(26px, 9999px, 60px, 0); transform: skew(0.7deg); } 45% { clip: rect(33px, 9999px, 45px, 0); transform: skew(0.4deg); } 50% { clip: rect(59px, 9999px, 32px, 0); transform: skew(0.2deg); } 100% { clip: rect(67px, 9999px, 50px, 0); transform: skew(0.5deg); } } .glitch-text { animation: glitch-anim 2s infinite linear alternate-reverse; } [V0_FILE]typescriptreact:file="components/image-upload.tsx" isMerged="true" "use client" import type React from "react" import { useCallback } from "react" import { Upload } from "lucide-react" interface ImageUploadProps { onImageUpload: (image: string) => void } export function ImageUpload({ onImageUpload }: ImageUploadProps) { const handleFileChange = useCallback( (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onload = (event) => { const result = event.target?.result if (typeof result === "string") { onImageUpload(result) } } reader.readAsDataURL(file) } }, [onImageUpload], ) const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault() const file = e.dataTransfer.files?.[0] if (file && file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (event) => { const result = event.target?.result if (typeof result === "string") { onImageUpload(result) } } reader.readAsDataURL(file) } }, [onImageUpload], ) const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() }, []) return (

Upload Image

Drag & drop or click to select

PNG, JPG, GIF up to 10MB

Select File

) } [V0_FILE]typescriptreact:file="components/glitch-canvas.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Download } from "lucide-react" import type { GlitchSettings } from "@/types/glitch" interface GlitchCanvasProps { image: string settings: GlitchSettings } export function GlitchCanvas({ image, settings }: GlitchCanvasProps) { const canvasRef = useRef(null) const [isProcessing, setIsProcessing] = useState(false) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d", { willReadFrequently: true }) if (!ctx) return const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { setIsProcessing(true) canvas.width = img.width canvas.height = img.height ctx.drawImage(img, 0, 0) const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height) const data = imageData.data applyGlitchEffects(ctx, imageData, data, settings) ctx.putImageData(imageData, 0, 0) applyCanvasEffects(ctx, canvas, settings) setIsProcessing(false) } img.src = image }, [image, settings]) const applyGlitchEffects = ( ctx: CanvasRenderingContext2D, imageData: ImageData, data: Uint8ClampedArray, settings: GlitchSettings, ) => { const { width, height } = imageData if (settings.pixelSort > 0) { const numRows = Math.floor(settings.pixelSort * 50) for (let i = 0; i < numRows; i++) { const y = Math.floor(Math.random() * height) const rowData: Array<{ r: number; g: number; b: number; a: number; brightness: number }> = [] for (let x = 0; x < width; x++) { const idx = (y * width + x) * 4 const r = data[idx] const g = data[idx + 1] const b = data[idx + 2] const a = data[idx + 3] const brightness = (r + g + b) / 3 rowData.push({ r, g, b, a, brightness }) } rowData.sort((a, b) => a.brightness - b.brightness) for (let x = 0; x < width; x++) { const idx = (y * width + x) * 4 data[idx] = rowData[x].r data[idx + 1] = rowData[x].g data[idx + 2] = rowData[x].b data[idx + 3] = rowData[x].a } } } if (settings.waveDistortion > 0) { const tempData = new Uint8ClampedArray(data) const amplitude = settings.waveDistortion * 30 const frequency = 0.02 for (let y = 0; y < height; y++) { const offset = Math.sin(y * frequency) * amplitude for (let x = 0; x < width; x++) { const srcX = Math.floor((x + offset + width) % width) const srcI = (y * width + srcX) * 4 const dstI = (y * width + x) * 4 data[dstI] = tempData[srcI] data[dstI + 1] = tempData[srcI + 1] data[dstI + 2] = tempData[srcI + 2] data[dstI + 3] = tempData[srcI + 3] } } } if (settings.chromaticAberration > 0) { const tempData = new Uint8ClampedArray(data) const offset = Math.floor(settings.chromaticAberration * 20) for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const i = (y * width + x) * 4 const rX = Math.min(x + offset, width - 1) const rI = (y * width + rX) * 4 data[i] = tempData[rI] const bX = Math.max(x - offset, 0) const bI = (y * width + bX) * 4 data[i + 2] = tempData[bI + 2] } } } if (settings.datamosh > 0) { const tempData = new Uint8ClampedArray(data) const numBlocks = Math.floor(settings.datamosh * 30) const blockSize = 16 for (let i = 0; i < numBlocks; i++) { const srcX = Math.floor(Math.random() * (width - blockSize)) const srcY = Math.floor(Math.random() * (height - blockSize)) const dstX = Math.floor(Math.random() * (width - blockSize)) const dstY = Math.floor(Math.random() * (height - blockSize)) for (let by = 0; by < blockSize; by++) { for (let bx = 0; bx < blockSize; bx++) { const srcI = ((srcY + by) * width + (srcX + bx)) * 4 const dstI = ((dstY + by) * width + (dstX + bx)) * 4 data[dstI] = tempData[srcI] data[dstI + 1] = tempData[srcI + 1] data[dstI + 2] = tempData[srcI + 2] data[dstI + 3] = tempData[srcI + 3] } } } } if (settings.bitCrush > 0) { const levels = Math.max(2, Math.floor(8 - settings.bitCrush * 6)) const step = 255 / (levels - 1) for (let i = 0; i < data.length; i += 4) { data[i] = Math.round(data[i] / step) * step data[i + 1] = Math.round(data[i + 1] / step) * step data[i + 2] = Math.round(data[i + 2] / step) * step } } if (settings.jpegArtifacts > 0) { const blockSize = 8 const strength = settings.jpegArtifacts for (let y = 0; y < height; y += blockSize) { for (let x = 0; x < width; x += blockSize) { let avgR = 0, avgG = 0, avgB = 0, count = 0 for (let by = 0; by < blockSize && y + by < height; by++) { for (let bx = 0; bx < blockSize && x + bx < width; bx++) { const i = ((y + by) * width + (x + bx)) * 4 avgR += data[i] avgG += data[i + 1] avgB += data[i + 2] count++ } } avgR = Math.floor(avgR / count) avgG = Math.floor(avgG / count) avgB = Math.floor(avgB / count) for (let by = 0; by < blockSize && y + by < height; by++) { for (let bx = 0; bx < blockSize && x + bx < width; bx++) { const i = ((y + by) * width + (x + bx)) * 4 data[i] = data[i] * (1 - strength) + avgR * strength data[i + 1] = data[i + 1] * (1 - strength) + avgG * strength data[i + 2] = data[i + 2] * (1 - strength) + avgB * strength } } } } } if (settings.staticNoise > 0) { const noiseAmount = settings.staticNoise * 100 for (let i = 0; i < data.length; i += 4) { if (Math.random() < settings.staticNoise * 0.3) { const noise = (Math.random() - 0.5) * noiseAmount data[i] = Math.max(0, Math.min(255, data[i] + noise)) data[i + 1] = Math.max(0, Math.min(255, data[i + 1] + noise)) data[i + 2] = Math.max(0, Math.min(255, data[i + 2] + noise)) } } } if (settings.colorBanding > 0) { const bands = Math.max(2, Math.floor(16 - settings.colorBanding * 12)) const step = 256 / bands for (let i = 0; i < data.length; i += 4) { data[i] = Math.floor(data[i] / step) * step data[i + 1] = Math.floor(data[i + 1] / step) * step data[i + 2] = Math.floor(data[i + 2] / step) * step } } if (settings.vhsTracking > 0) { const tempData = new Uint8ClampedArray(data) const numLines = Math.floor(settings.vhsTracking * 20) for (let i = 0; i < numLines; i++) { const startY = Math.floor(Math.random() * height) const lineHeight = Math.floor(Math.random() * 10) + 5 const offset = Math.floor((Math.random() - 0.5) * width * 0.3) for (let dy = 0; dy < lineHeight && startY + dy < height; dy++) { for (let x = 0; x < width; x++) { const srcX = (x - offset + width) % width const srcI = ((startY + dy) * width + srcX) * 4 const dstI = ((startY + dy) * width + x) * 4 data[dstI] = tempData[srcI] data[dstI + 1] = tempData[srcI + 1] data[dstI + 2] = tempData[srcI + 2] data[dstI + 3] = tempData[srcI + 3] } } } } if (settings.tearing > 0) { const tempData = new Uint8ClampedArray(data) const numTears = Math.floor(settings.tearing * 15) for (let i = 0; i < numTears; i++) { const tearY = Math.floor(Math.random() * height) const tearOffset = Math.floor((Math.random() - 0.5) * width * 0.4) for (let y = tearY; y < height; y++) { for (let x = 0; x < width; x++) { const srcX = (x - tearOffset + width) % width const srcI = (y * width + srcX) * 4 const dstI = (y * width + x) * 4 data[dstI] = tempData[srcI] data[dstI + 1] = tempData[srcI + 1] data[dstI + 2] = tempData[srcI + 2] data[dstI + 3] = tempData[srcI + 3] } } } } if (settings.mirror > 0 && Math.random() < settings.mirror) { const tempData = new Uint8ClampedArray(data) const mirrorMode = Math.floor(Math.random() * 4) for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { let srcX = x let srcY = y if (mirrorMode === 0) srcX = width - 1 - x else if (mirrorMode === 1) srcY = height - 1 - y else if (mirrorMode === 2) { srcX = width - 1 - x srcY = height - 1 - y } else if (mirrorMode === 3) { srcX = y % width srcY = x % height } const srcI = (srcY * width + srcX) * 4 const dstI = (y * width + x) * 4 data[dstI] = tempData[srcI] data[dstI + 1] = tempData[srcI + 1] data[dstI + 2] = tempData[srcI + 2] data[dstI + 3] = tempData[srcI + 3] } } } if (settings.displacement > 0) { const tempData = new Uint8ClampedArray(data) const strength = settings.displacement * 50 for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const i = (y * width + x) * 4 const displaceX = Math.floor(((tempData[i] - 128) / 128) * strength) const displaceY = Math.floor(((tempData[i + 1] - 128) / 128) * strength) const srcX = Math.max(0, Math.min(width - 1, x + displaceX)) const srcY = Math.max(0, Math.min(height - 1, y + displaceY)) const srcI = (srcY * width + srcX) * 4 data[i] = tempData[srcI] data[i + 1] = tempData[srcI + 1] data[i + 2] = tempData[srcI + 2] data[i + 3] = tempData[srcI + 3] } } } if (settings.interlacing > 0) { const tempData = new Uint8ClampedArray(data) const offset = Math.floor(settings.interlacing * 3) for (let y = 0; y < height; y += 2) { for (let x = 0; x < width; x++) { const srcY = Math.max(0, Math.min(height - 1, y + offset)) const srcI = (srcY * width + x) * 4 const dstI = (y * width + x) * 4 data[dstI] = tempData[srcI] data[dstI + 1] = tempData[srcI + 1] data[dstI + 2] = tempData[srcI + 2] data[dstI + 3] = tempData[srcI + 3] } } } if (settings.colorShift > 0) { const shift = settings.colorShift * 360 for (let i = 0; i < data.length; i += 4) { const r = data[i] / 255 const g = data[i + 1] / 255 const b = data[i + 2] / 255 const max = Math.max(r, g, b) const min = Math.min(r, g, b) let h = 0, s = 0, l = (max + min) / 2 if (max !== min) { const d = max - min s = l > 0.5 ? d / (2 - max - min) : d / (max + min) if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6 else if (max === g) h = ((b - r) / d + 2) / 6 else h = ((r - g) / d + 4) / 6 } h = ((h * 360 + shift) % 360) / 360 const hue2rgb = (p: number, q: number, t: number) => { if (t < 0) t += 1 if (t > 1) t -= 1 if (t < 1 / 6) return p + (q - p) * 6 * t if (t < 1 / 2) return q if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6 return p } let rNew, gNew, bNew if (s === 0) { rNew = gNew = bNew = l } else { const q = l < 0.5 ? l * (1 + s) : l + s - l * s const p = 2 * l - q rNew = hue2rgb(p, q, h + 1 / 3) gNew = hue2rgb(p, q, h) bNew = hue2rgb(p, q, h - 1 / 3) } data[i] = Math.round(rNew * 255) data[i + 1] = Math.round(gNew * 255) data[i + 2] = Math.round(bNew * 255) } } if (settings.echo > 0) { const tempData = new Uint8ClampedArray(data) const numEchoes = 3 const alpha = settings.echo * 0.3 for (let e = 1; e <= numEchoes; e++) { const offsetX = e * 10 const offsetY = e * 5 for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const srcX = Math.max(0, Math.min(width - 1, x - offsetX)) const srcY = Math.max(0, Math.min(height - 1, y - offsetY)) const srcI = (srcY * width + srcX) * 4 const dstI = (y * width + x) * 4 data[dstI] = data[dstI] * (1 - alpha) + tempData[srcI] * alpha data[dstI + 1] = data[dstI + 1] * (1 - alpha) + tempData[srcI + 1] * alpha data[dstI + 2] = data[dstI + 2] * (1 - alpha) + tempData[srcI + 2] * alpha } } } } if (settings.tileShuffle > 0) { const tempData = new Uint8ClampedArray(data) const tileSize = 32 const numSwaps = Math.floor(settings.tileShuffle * 50) for (let i = 0; i < numSwaps; i++) { const tile1X = Math.floor(Math.random() * (width / tileSize)) * tileSize const tile1Y = Math.floor(Math.random() * (height / tileSize)) * tileSize const tile2X = Math.floor(Math.random() * (width / tileSize)) * tileSize const tile2Y = Math.floor(Math.random() * (height / tileSize)) * tileSize for (let ty = 0; ty < tileSize && tile1Y + ty < height && tile2Y + ty < height; ty++) { for (let tx = 0; tx < tileSize && tile1X + tx < width && tile2X + tx < width; tx++) { const idx1 = ((tile1Y + ty) * width + (tile1X + tx)) * 4 const idx2 = ((tile2Y + ty) * width + (tile2X + tx)) * 4 const temp = [data[idx1], data[idx1 + 1], data[idx1 + 2], data[idx1 + 3]] data[idx1] = tempData[idx2] data[idx1 + 1] = tempData[idx2 + 1] data[idx1 + 2] = tempData[idx2 + 2] data[idx1 + 3] = tempData[idx2 + 3] data[idx2] = temp[0] data[idx2 + 1] = temp[1] data[idx2 + 2] = temp[2] data[idx2 + 3] = temp[3] } } } } // Original RGB Separation if (settings.rgbSeparation > 0) { const offset = Math.floor(settings.rgbSeparation * 10) const tempData = new Uint8ClampedArray(data) for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const i = (y * width + x) * 4 const redX = Math.min(x + offset, width - 1) const redI = (y * width + redX) * 4 data[i] = tempData[redI] const blueX = Math.max(x - offset, 0) const blueI = (y * width + blueX) * 4 data[i + 2] = tempData[blueI + 2] } } } // Original Horizontal Shift if (settings.horizontalShift > 0) { const numShifts = Math.floor(settings.horizontalShift * 20) const tempData = new Uint8ClampedArray(data) for (let i = 0; i < numShifts; i++) { const y = Math.floor(Math.random() * height) const shift = Math.floor((Math.random() - 0.5) * 100) const rowHeight = Math.floor(Math.random() * 5) + 1 for (let dy = 0; dy < rowHeight && y + dy < height; dy++) { for (let x = 0; x < width; x++) { const srcX = (x - shift + width) % width const srcI = ((y + dy) * width + srcX) * 4 const dstI = ((y + dy) * width + x) * 4 data[dstI] = tempData[srcI] data[dstI + 1] = tempData[srcI + 1] data[dstI + 2] = tempData[srcI + 2] data[dstI + 3] = tempData[srcI + 3] } } } } // Original Duplication Zones if (settings.duplicationZones > 0) { const numDups = Math.floor(settings.duplicationZones * 15) const tempData = new Uint8ClampedArray(data) for (let i = 0; i < numDups; i++) { const srcY = Math.floor(Math.random() * height) const dstY = Math.floor(Math.random() * height) const blockHeight = Math.floor(Math.random() * 30) + 10 for (let dy = 0; dy < blockHeight && srcY + dy < height && dstY + dy < height; dy++) { for (let x = 0; x < width; x++) { const srcI = ((srcY + dy) * width + x) * 4 const dstI = ((dstY + dy) * width + x) * 4 data[dstI] = tempData[srcI] data[dstI + 1] = tempData[srcI + 1] data[dstI + 2] = tempData[srcI + 2] data[dstI + 3] = tempData[srcI + 3] } } } } } const applyCanvasEffects = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, settings: GlitchSettings) => { if (settings.flicker > 0 && Math.random() < settings.flicker * 0.3) { ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.3})` ctx.fillRect(0, 0, canvas.width, canvas.height) } if (settings.zoomBlocks > 0) { const numBlocks = Math.floor(settings.zoomBlocks * 15) const blockSize = 64 for (let i = 0; i < numBlocks; i++) { const x = Math.floor(Math.random() * (canvas.width - blockSize)) const y = Math.floor(Math.random() * (canvas.height - blockSize)) const scale = 0.5 + Math.random() * 1.5 const imageData = ctx.getImageData(x, y, blockSize, blockSize) const tempCanvas = document.createElement("canvas") tempCanvas.width = blockSize tempCanvas.height = blockSize const tempCtx = tempCanvas.getContext("2d") if (tempCtx) { tempCtx.putImageData(imageData, 0, 0) ctx.save() ctx.translate(x + blockSize / 2, y + blockSize / 2) ctx.scale(scale, scale) ctx.drawImage(tempCanvas, -blockSize / 2, -blockSize / 2) ctx.restore() } } } if (settings.rotateBlocks > 0) { const numBlocks = Math.floor(settings.rotateBlocks * 12) const blockSize = 48 for (let i = 0; i < numBlocks; i++) { const x = Math.floor(Math.random() * (canvas.width - blockSize)) const y = Math.floor(Math.random() * (canvas.height - blockSize)) const angle = (Math.random() - 0.5) * Math.PI const imageData = ctx.getImageData(x, y, blockSize, blockSize) const tempCanvas = document.createElement("canvas") tempCanvas.width = blockSize tempCanvas.height = blockSize const tempCtx = tempCanvas.getContext("2d") if (tempCtx) { tempCtx.putImageData(imageData, 0, 0) ctx.save() ctx.translate(x + blockSize / 2, y + blockSize / 2) ctx.rotate(angle) ctx.drawImage(tempCanvas, -blockSize / 2, -blockSize / 2) ctx.restore() } } } // Original Glitch Bars if (settings.glitchBars > 0) { const numBars = Math.floor(settings.glitchBars * 30) for (let i = 0; i < numBars; i++) { const y = Math.random() * canvas.height const height = Math.random() * 5 + 1 const alpha = Math.random() * 0.3 + 0.1 const colors = [`rgba(0, 255, 255, ${alpha})`, `rgba(255, 0, 255, ${alpha})`, `rgba(255, 255, 255, ${alpha})`] const color = colors[Math.floor(Math.random() * colors.length)] ctx.fillStyle = color ctx.fillRect(0, y, canvas.width, height) } } // Original Scanlines if (settings.scanlines > 0) { const alpha = settings.scanlines * 0.15 ctx.fillStyle = `rgba(0, 0, 0, ${alpha})` for (let y = 0; y < canvas.height; y += 2) { ctx.fillRect(0, y, canvas.width, 1) } } } const handleDownload = () => { const canvas = canvasRef.current if (!canvas) return const link = document.createElement("a") link.download = `glitch-art-${Date.now()}.png` link.href = canvas.toDataURL("image/png") link.click() } return (

) } [V0_FILE]typescriptreact:file="components/control-panel.tsx" isEdit="true" isMerged="true" "use client" import { Slider } from "@/components/ui/slider" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import type { GlitchSettings } from "@/types/glitch" interface ControlPanelProps { settings: GlitchSettings onChange: (settings: GlitchSettings) => void } export function ControlPanel({ settings, onChange }: ControlPanelProps) { const handleChange = (key: keyof GlitchSettings, value: number) => { onChange({ ...settings, [key]: value }) } const distortionControls = [ { key: "pixelSort" as const, label: "Pixel Sort", description: "Sort pixels by brightness", icon: "⬍" }, { key: "waveDistortion" as const, label: "Wave Distortion", description: "Wavy sinusoidal distortion", icon: "〰" }, { key: "chromaticAberration" as const, label: "Chromatic Aberration", description: "Lens color fringing", icon: "⚡", }, { key: "datamosh" as const, label: "Datamosh", description: "Video compression artifacts", icon: "▦" }, ] const corruptionControls = [ { key: "bitCrush" as const, label: "Bit Crush", description: "Reduce color depth", icon: "⚿" }, { key: "jpegArtifacts" as const, label: "JPEG Artifacts", description: "Compression blocks", icon: "▢" }, { key: "staticNoise" as const, label: "Static Noise", description: "TV static effect", icon: "◎" }, { key: "colorBanding" as const, label: "Color Banding", description: "Posterization effect", icon: "▤" }, ] const temporalControls = [ { key: "flicker" as const, label: "Flicker", description: "Random flashing", icon: "◐" }, { key: "vhsTracking" as const, label: "VHS Tracking", description: "VHS tracking lines", icon: "⊟" }, { key: "tearing" as const, label: "Tearing", description: "Screen tearing effect", icon: "⧉" }, ] const creativeControls = [ { key: "mirror" as const, label: "Mirror", description: "Kaleidoscope mirroring", icon: "⬓" }, { key: "displacement" as const, label: "Displacement", description: "Pixel displacement map", icon: "⇝" }, { key: "interlacing" as const, label: "Interlacing", description: "Old TV interlacing", icon: "⊞" }, { key: "colorShift" as const, label: "Color Shift", description: "Hue rotation", icon: "⊚" }, { key: "echo" as const, label: "Echo/Ghost", description: "Ghosting trails", icon: "⊡" }, ] const blockControls = [ { key: "tileShuffle" as const, label: "Tile Shuffle", description: "Shuffle image tiles", icon: "⊞" }, { key: "zoomBlocks" as const, label: "Zoom Blocks", description: "Random block zooming", icon: "⊕" }, { key: "rotateBlocks" as const, label: "Rotate Blocks", description: "Rotate image blocks", icon: "⟲" }, ] const classicControls = [ { key: "horizontalShift" as const, label: "Horizontal Shift", description: "Slide rows horizontally", icon: "⟷" }, { key: "rgbSeparation" as const, label: "RGB Separation", description: "Separate color channels", icon: "🎨" }, { key: "duplicationZones" as const, label: "Duplication Zones", description: "Duplicate random areas", icon: "⧉" }, { key: "glitchBars" as const, label: "Glitch Bars", description: "Horizontal glitch lines", icon: "▬" }, { key: "scanlines" as const, label: "Scanlines", description: "CRT monitor effect", icon: "≡" }, ] const renderControls = (controls: typeof classicControls) => (

{controls.map((control) => (

{control.icon}

{control.label}

{control.description}

{Math.round(settings[control.key] * 100)}

handleChange(control.key, value)} min={0} max={1} step={0.01} className="w-full" />

))}

) return ( Classic Distortion Corruption Temporal Creative Blocks {renderControls(classicControls)} {renderControls(distortionControls)} {renderControls(corruptionControls)} {renderControls(temporalControls)} {renderControls(creativeControls)} {renderControls(blockControls)} ) } [V0_FILE]typescriptreact:file="components/preset-buttons.tsx" isEdit="true" isMerged="true" "use client" import { Zap } from "lucide-react" import type { Preset } from "@/types/glitch" interface PresetButtonsProps { onPresetSelect: (preset: Preset) => void } const presets: Preset[] = [ { name: "Cyberpunk", settings: { horizontalShift: 0.6, rgbSeparation: 0.8, duplicationZones: 0.3, glitchBars: 0.5, scanlines: 0.4, pixelSort: 0.0, waveDistortion: 0.0, chromaticAberration: 0.5, datamosh: 0.2, bitCrush: 0.0, jpegArtifacts: 0.0, staticNoise: 0.1, colorBanding: 0.0, flicker: 0.3, vhsTracking: 0.0, tearing: 0.0, mirror: 0.0, displacement: 0.0, interlacing: 0.0, colorShift: 0.2, echo: 0.3, tileShuffle: 0.0, zoomBlocks: 0.0, rotateBlocks: 0.0, }, }, { name: "VHS Tape", settings: { horizontalShift: 0.7, rgbSeparation: 0.4, duplicationZones: 0.6, glitchBars: 0.3, scanlines: 0.7, pixelSort: 0.0, waveDistortion: 0.0, chromaticAberration: 0.3, datamosh: 0.4, bitCrush: 0.0, jpegArtifacts: 0.0, staticNoise: 0.3, colorBanding: 0.0, flicker: 0.4, vhsTracking: 0.6, tearing: 0.0, mirror: 0.0, displacement: 0.0, interlacing: 0.5, colorShift: 0.0, echo: 0.0, tileShuffle: 0.0, zoomBlocks: 0.0, rotateBlocks: 0.0, }, }, { name: "Pixel Sorted", settings: { horizontalShift: 0.0, rgbSeparation: 0.3, duplicationZones: 0.0, glitchBars: 0.1, scanlines: 0.0, pixelSort: 0.8, waveDistortion: 0.0, chromaticAberration: 0.0, datamosh: 0.0, bitCrush: 0.0, jpegArtifacts: 0.0, staticNoise: 0.0, colorBanding: 0.0, flicker: 0.0, vhsTracking: 0.0, tearing: 0.0, mirror: 0.0, displacement: 0.0, interlacing: 0.0, colorShift: 0.0, echo: 0.0, tileShuffle: 0.0, zoomBlocks: 0.0, rotateBlocks: 0.0, }, }, { name: "Datamosh", settings: { horizontalShift: 0.3, rgbSeparation: 0.0, duplicationZones: 0.2, glitchBars: 0.0, scanlines: 0.0, pixelSort: 0.0, waveDistortion: 0.0, chromaticAberration: 0.0, datamosh: 0.9, bitCrush: 0.0, jpegArtifacts: 0.5, staticNoise: 0.0, colorBanding: 0.0, flicker: 0.0, vhsTracking: 0.0, tearing: 0.4, mirror: 0.0, displacement: 0.0, interlacing: 0.0, colorShift: 0.0, echo: 0.0, tileShuffle: 0.3, zoomBlocks: 0.0, rotateBlocks: 0.0, }, }, { name: "8-Bit Crush", settings: { horizontalShift: 0.0, rgbSeparation: 0.0, duplicationZones: 0.0, glitchBars: 0.0, scanlines: 0.3, pixelSort: 0.0, waveDistortion: 0.0, chromaticAberration: 0.0, datamosh: 0.0, bitCrush: 0.8, jpegArtifacts: 0.0, staticNoise: 0.0, colorBanding: 0.7, flicker: 0.0, vhsTracking: 0.0, tearing: 0.0, mirror: 0.0, displacement: 0.0, interlacing: 0.0, colorShift: 0.0, echo: 0.0, tileShuffle: 0.0, zoomBlocks: 0.0, rotateBlocks: 0.0, }, }, { name: "Kaleidoscope", settings: { horizontalShift: 0.0, rgbSeparation: 0.0, duplicationZones: 0.0, glitchBars: 0.0, scanlines: 0.0, pixelSort: 0.0, waveDistortion: 0.0, chromaticAberration: 0.0, datamosh: 0.0, bitCrush: 0.0, jpegArtifacts: 0.0, staticNoise: 0.0, colorBanding: 0.0, flicker: 0.0, vhsTracking: 0.0, tearing: 0.0, mirror: 0.8, displacement: 0.0, interlacing: 0.0, colorShift: 0.5, echo: 0.0, tileShuffle: 0.0, zoomBlocks: 0.0, rotateBlocks: 0.0, }, }, { name: "Psychedelic", settings: { horizontalShift: 0.0, rgbSeparation: 0.0, duplicationZones: 0.0, glitchBars: 0.0, scanlines: 0.0, pixelSort: 0.0, waveDistortion: 0.7, chromaticAberration: 0.0, datamosh: 0.0, bitCrush: 0.0, jpegArtifacts: 0.0, staticNoise: 0.0, colorBanding: 0.0, flicker: 0.0, vhsTracking: 0.0, tearing: 0.0, mirror: 0.0, displacement: 0.6, interlacing: 0.0, colorShift: 0.8, echo: 0.5, tileShuffle: 0.0, zoomBlocks: 0.0, rotateBlocks: 0.0, }, }, { name: "Chaos Mode", settings: { horizontalShift: 0.5, rgbSeparation: 0.4, duplicationZones: 0.4, glitchBars: 0.4, scanlines: 0.3, pixelSort: 0.3, waveDistortion: 0.3, chromaticAberration: 0.4, datamosh: 0.5, bitCrush: 0.3, jpegArtifacts: 0.3, staticNoise: 0.4, colorBanding: 0.3, flicker: 0.3, vhsTracking: 0.3, tearing: 0.3, mirror: 0.2, displacement: 0.3, interlacing: 0.3, colorShift: 0.3, echo: 0.3, tileShuffle: 0.4, zoomBlocks: 0.3, rotateBlocks: 0.3, }, }, ] export function PresetButtons({ onPresetSelect }: PresetButtonsProps) { return (

{presets.map((preset) => ( ))}

) } [V0_FILE]typescript:file="types/glitch.ts" isEdit="true" isMerged="true" export interface GlitchSettings { // Original effects horizontalShift: number rgbSeparation: number duplicationZones: number glitchBars: number scanlines: number // Distortion effects pixelSort: number waveDistortion: number chromaticAberration: number datamosh: number // Corruption effects bitCrush: number jpegArtifacts: number staticNoise: number colorBanding: number // Temporal effects flicker: number vhsTracking: number tearing: number // Creative effects mirror: number displacement: number interlacing: number colorShift: number echo: number // Block effects tileShuffle: number zoomBlocks: number rotateBlocks: number } export interface Preset { name: string settings: GlitchSettings } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@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": "1.1.1", "@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", "@vercel/analytics": "1.3.1", "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", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import { ImageUpload } from "@/components/image-upload" import { GlitchCanvas } from "@/components/glitch-canvas" import { ControlPanel } from "@/components/control-panel" import { PresetButtons } from "@/components/preset-buttons" import type { GlitchSettings, Preset } from "@/types/glitch" export default function Page() { const [image, setImage] = useState(null) const [settings, setSettings] = useState({ horizontalShift: 0, rgbSeparation: 0, duplicationZones: 0, glitchBars: 0, scanlines: 0, pixelSort: 0, waveDistortion: 0, chromaticAberration: 0, datamosh: 0, bitCrush: 0, jpegArtifacts: 0, staticNoise: 0, colorBanding: 0, flicker: 0, vhsTracking: 0, tearing: 0, mirror: 0, displacement: 0, interlacing: 0, colorShift: 0, echo: 0, tileShuffle: 0, zoomBlocks: 0, rotateBlocks: 0, }) const handlePresetSelect = (preset: Preset) => { setSettings(preset.settings) } const handleReset = () => { setSettings({ horizontalShift: 0, rgbSeparation: 0, duplicationZones: 0, glitchBars: 0, scanlines: 0, pixelSort: 0, waveDistortion: 0, chromaticAberration: 0, datamosh: 0, bitCrush: 0, jpegArtifacts: 0, staticNoise: 0, colorBanding: 0, flicker: 0, vhsTracking: 0, tearing: 0, mirror: 0, displacement: 0, interlacing: 0, colorShift: 0, echo: 0, tileShuffle: 0, zoomBlocks: 0, rotateBlocks: 0, }) } return (

{/* Header */}

{""}

Art Randomizer

ONLINE

{/* Main Content */}

{!image ? (

) : (

{/* Canvas Area */}

Preview

{/* Controls Area */}

Presets

Custom Controls

)}

{/* Footer */}

) }

About

Tags

Share

About

Tags

Share

More from c3f3null

More Templates Like This

About

Tags

Share

About

Tags

Share

More from c3f3null

More Templates Like This