[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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.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": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/video-uploader.tsx" isMerged="true" "use client" import type React from "react" import { useCallback, useState } from "react" import { Button } from "@/components/ui/button" import { Upload, X } from "lucide-react" interface VideoUploaderProps { onVideoSelect: (file: File) => void currentVideo: File | null onClear: () => void } export default function VideoUploader({ onVideoSelect, currentVideo, onClear }: VideoUploaderProps) { const [isDragging, setIsDragging] = useState(false) const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragging(true) }, []) const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragging(false) }, []) const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) const files = Array.from(e.dataTransfer.files) const videoFile = files.find((file) => file.type.startsWith("video/")) if (videoFile) { onVideoSelect(videoFile) } }, [onVideoSelect], ) const handleFileInput = useCallback( (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (file && file.type.startsWith("video/")) { onVideoSelect(file) } }, [onVideoSelect], ) if (currentVideo) { return (

{currentVideo.name}

{(currentVideo.size / 1024 / 1024).toFixed(2)} MB

) } return (

Drop your video here

or click to browse

Supports MP4, WebM, MOV

) } [V0_FILE]typescriptreact:file="components/ascii-controls.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { useState } from "react" export interface AsciiSettings { gridDensity: number contrast: number brightness: number characterSet: string customCharacters?: string } interface AsciiControlsProps { settings: AsciiSettings onSettingsChange: (settings: AsciiSettings) => void } const CHARACTER_SETS = { default: " .:-=+*#%@", blocks: "_▂▃▄▅▆▇ ░▒▓█ ▊▋▌▍▎▏", minimal: " .:·", dense: " .:-=+*#%@0$", } export default function AsciiControls({ settings, onSettingsChange }: AsciiControlsProps) { const [customInput, setCustomInput] = useState("") const [showCustomInput, setShowCustomInput] = useState(false) const handleApplyCustom = () => { if (customInput.trim()) { onSettingsChange({ ...settings, characterSet: "custom", customCharacters: customInput, }) setShowCustomInput(false) } } return (

ASCII Effect Settings

{/* Grid Density */}

Grid Density {settings.gridDensity}x{Math.round(settings.gridDensity * 0.5625)}

onSettingsChange({ ...settings, gridDensity: value[0] })} min={40} max={200} step={5} className="w-full" />

Higher = more detail but slower performance

{/* Contrast */}

Contrast {settings.contrast.toFixed(1)}

onSettingsChange({ ...settings, contrast: value[0] })} min={0.5} max={2} step={0.1} className="w-full" />

Adjust the difference between light and dark areas

{/* Brightness */}

Brightness {settings.brightness.toFixed(1)}

onSettingsChange({ ...settings, brightness: value[0] })} min={0.5} max={2} step={0.1} className="w-full" />

Overall brightness adjustment

{/* Character Set */}

Character Set

{Object.entries(CHARACTER_SETS).map(([key, chars]) => ( ))}

{showCustomInput && (

setCustomInput(e.target.value)} className="font-mono text-sm" />

Tip: Order characters from darkest to brightest for best results

)} {settings.characterSet === "custom" && settings.customCharacters && (

Active: {settings.customCharacters}

)}

{/* Reset Button */}

) } [V0_FILE]typescriptreact:file="components/ascii-animation.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useRef, useEffect, useState, useMemo } from "react" interface AsciiAnimationProps { width?: number height?: number className?: string videoSource?: File | string gridDensity?: number contrast?: number brightness?: number characterSet?: string customCharacters?: string onRecordingStateChange?: (isRecording: boolean) => void recordingRef?: React.MutableRefObject<{ start: () => void; stop: () => void } | null> } export default function AsciiAnimation({ width = 1280, height = 720, className = "", videoSource, gridDensity = 80, contrast = 1, brightness = 1, characterSet = "default", customCharacters, onRecordingStateChange, recordingRef, }: AsciiAnimationProps) { const containerRef = useRef(null) const canvasRef = useRef(null) const hiddenCanvasRef = useRef(null) const videoRef = useRef(null) const videoContainerRef = useRef(null) const animationFrameRef = useRef(null) const hasRenderedRef = useRef(false) const lastFrameTimeRef = useRef(0) const blobUrlRef = useRef(null) const mediaRecorderRef = useRef(null) const recordedChunksRef = useRef([]) const [dimensions, setDimensions] = useState({ w: width, h: height }) const [isVisible, setIsVisible] = useState(false) const [hasError, setHasError] = useState(false) const [videoLoaded, setVideoLoaded] = useState(false) const [isRecording, setIsRecording] = useState(false) const prefersReducedMotion = useMemo(() => window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, []) const palette = useMemo(() => { const colors = Array(256) for (let i = 0; i < 256; i++) { const alpha = i / 255 colors[i] = `rgba(255, 255, 255, ${alpha})` } return colors }, []) const CHARACTER_SETS: Record = { default: " .:-=+*#%@".split(""), blocks: "_▂▃▄▅▆▇ ░▒▓█ ▊▋▌▍▎▏".split(""), minimal: " .:·".split(""), dense: " .:-=+*#%@0$".split(""), } const ASCII_CHARS = useMemo(() => { if (characterSet === "custom" && customCharacters) { return customCharacters.split("") } return CHARACTER_SETS[characterSet] || CHARACTER_SETS.default }, [characterSet, customCharacters]) useEffect(() => { const container = containerRef.current if (!container) return const updateDimensions = () => { const rect = container.getBoundingClientRect() setDimensions({ w: Math.max(1, rect.width), h: Math.max(1, rect.height), }) } updateDimensions() const resizeObserver = new ResizeObserver(updateDimensions) resizeObserver.observe(container) return () => resizeObserver.disconnect() }, []) useEffect(() => { const container = containerRef.current if (!container) return let isIntersecting = false const updateVisibility = () => { setIsVisible(isIntersecting && !document.hidden) } const observer = new IntersectionObserver( (entries) => { isIntersecting = entries[0]?.isIntersecting ?? false updateVisibility() }, { threshold: 0.1 }, ) observer.observe(container) document.addEventListener("visibilitychange", updateVisibility) return () => { observer.disconnect() document.removeEventListener("visibilitychange", updateVisibility) } }, []) useEffect(() => { if (prefersReducedMotion) return if (blobUrlRef.current) { URL.revokeObjectURL(blobUrlRef.current) blobUrlRef.current = null } const video = document.createElement("video") video.preload = "metadata" video.muted = true video.playsInline = true video.loop = true video.crossOrigin = "anonymous" if (videoSource instanceof File) { const blobUrl = URL.createObjectURL(videoSource) blobUrlRef.current = blobUrl video.src = blobUrl } else if (typeof videoSource === "string") { video.src = videoSource } else { video.src = "https://v3b.fal.media/files/b/panda/wSRljpwHBtRmpt3cK7Vn1_output.mp4" } videoRef.current = video const handleCanPlay = async () => { try { if (isVisible) { await video.play() } setVideoLoaded(true) } catch (error) { console.error("[v0] Video play error:", error) } } const handleError = () => { console.error("[v0] Video load error") setHasError(true) } video.addEventListener("canplay", handleCanPlay) video.addEventListener("loadeddata", handleCanPlay) video.addEventListener("error", handleError) try { video.load() } catch (error) { console.error("[v0] Video load exception:", error) } const container = videoContainerRef.current if (container && video.parentNode !== container) { container.appendChild(video) } return () => { video.removeEventListener("canplay", handleCanPlay) video.removeEventListener("loadeddata", handleCanPlay) video.removeEventListener("error", handleError) if (container && video.parentNode === container) { container.removeChild(video) } if (blobUrlRef.current) { URL.revokeObjectURL(blobUrlRef.current) blobUrlRef.current = null } } }, [isVisible, prefersReducedMotion, videoSource]) const renderFrame = () => { const canvas = canvasRef.current const hiddenCanvas = hiddenCanvasRef.current const video = videoRef.current if (!canvas || !hiddenCanvas || !video) return const ctx = canvas.getContext("2d", { alpha: false }) const hiddenCtx = hiddenCanvas.getContext("2d", { willReadFrequently: true }) if (!ctx || !hiddenCtx) return try { const gridWidth = gridDensity const gridHeight = Math.round(gridDensity * 0.5625) hiddenCanvas.width = gridWidth hiddenCanvas.height = gridHeight hiddenCtx.drawImage(video, 0, 0, gridWidth, gridHeight) const imageData = hiddenCtx.getImageData(0, 0, gridWidth, gridHeight) const pixels = imageData.data ctx.fillStyle = "#000000" ctx.fillRect(0, 0, canvas.width, canvas.height) const cols = gridWidth const rows = gridHeight const cellWidth = canvas.width / cols const cellHeight = canvas.height / rows ctx.font = `${cellHeight}px ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace` ctx.textAlign = "center" ctx.textBaseline = "middle" for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const i = (y * cols + x) * 4 const r = pixels[i] const g = pixels[i + 1] const b = pixels[i + 2] let pixelBrightness = (r + g + b) / 3 pixelBrightness = pixelBrightness * brightness pixelBrightness = Math.pow(pixelBrightness / 255, 1 / contrast) * 255 pixelBrightness = Math.max(0, Math.min(255, pixelBrightness)) const charIndex = Math.floor((pixelBrightness / 255) * (ASCII_CHARS.length - 1)) const char = ASCII_CHARS[charIndex] ctx.fillStyle = `rgba(255, 255, 255, ${pixelBrightness / 255})` ctx.fillText(char, x * cellWidth + cellWidth / 2, y * cellHeight + cellHeight / 2) } } hasRenderedRef.current = true } catch (error) { console.error("[v0] Render error:", error) setHasError(true) } } useEffect(() => { if (prefersReducedMotion || hasError) return const animate = (timestamp: number) => { if (timestamp - lastFrameTimeRef.current < 33) { animationFrameRef.current = requestAnimationFrame(animate) return } lastFrameTimeRef.current = timestamp if (isVisible && videoLoaded) { renderFrame() } animationFrameRef.current = requestAnimationFrame(animate) } animationFrameRef.current = requestAnimationFrame(animate) return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } } }, [isVisible, videoLoaded, prefersReducedMotion, hasError, palette, gridDensity, contrast, brightness, ASCII_CHARS]) useEffect(() => { hasRenderedRef.current = false }, [dimensions.w, dimensions.h]) useEffect(() => { if (recordingRef) { recordingRef.current = { start: startRecording, stop: stopRecording, } } }, [recordingRef]) const startRecording = () => { const canvas = canvasRef.current if (!canvas) return recordedChunksRef.current = [] const stream = canvas.captureStream(30) const mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm", }) mediaRecorder.ondataavailable = (event) => { if (event.data.size > 0) { recordedChunksRef.current.push(event.data) } } mediaRecorder.onstop = () => { const blob = new Blob(recordedChunksRef.current, { type: "video/webm" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `ascii-animation-${Date.now()}.webm` a.click() URL.revokeObjectURL(url) } mediaRecorder.start() mediaRecorderRef.current = mediaRecorder setIsRecording(true) if (onRecordingStateChange) { onRecordingStateChange(true) } } const stopRecording = () => { if (mediaRecorderRef.current) { mediaRecorderRef.current.stop() mediaRecorderRef.current = null setIsRecording(false) if (onRecordingStateChange) { onRecordingStateChange(false) } } } const toggleRecording = () => { if (isRecording) { stopRecording() } else { startRecording() } } if (prefersReducedMotion) { return null } if (hasError) { return (

ASCII Animation

Unable to load animation

) } return (

ASCII Effect Settings

Video to ASCII Converter

ASCII Output

Demo (Default Video)

About

Tags

Share

About

Tags

Share

More from abilshr

About

Tags

Share

About

Tags

Share

More from abilshr