[V0_FILE]typescriptreact:file="page.tsx" isEdit="true" isQuickEdit="true" "use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Playground, useControls, type ControlsSchema, type CopyButtonFnArgs, type UploadedMedia, } from "@toriistudio/v0-playground"; import { Efecto, EFECTO_ASCII_COMPONENT_DEFAULTS, type EfectoAsciiStyle, } from "@toriistudio/shader-ui"; import { PRESET_MEDIA, ASCII_CONTROL_SCHEMA, applyPresetToControls, computePostProcessingState, type PostProcessingPresetKey, } from "./presets"; function EfectoPreview() { const [uploadedMedia, setUploadedMedia] = useState( null ); const handleSelectMedia = useCallback((media: UploadedMedia) => { if (media.type !== "image") { return; } setUploadedMedia(media); }, []); const handleClearMedia = useCallback(() => { setUploadedMedia(null); }, []); const controlSchema = useMemo( () => ({ ...ASCII_CONTROL_SCHEMA, }), [handleClearMedia, handleSelectMedia] ); const controlValues = useControls(controlSchema, { componentName: "Efecto", config: { mainLabel: "Efecto Controls", showGrid: false, showCopyButton: false, showCodeSnippet: true, addMediaUploadControl: { folder: "Input Source", folderPlacement: "top", presetMedia: PRESET_MEDIA, onSelectMedia: handleSelectMedia, onClear: handleClearMedia, }, showCopyButtonFn: useCallback( ({ values, jsonToComponentString }: CopyButtonFnArgs) => { const sharedProps = { mediaAdjustments: { brightness: values.brightness, contrast: values.contrast, saturation: values.saturation, }, mouseParallax: values.mouseParallax ?? false, parallaxIntensity: typeof values.parallaxIntensity === "number" ? values.parallaxIntensity : 0.5, postProcessing: { scanlineIntensity: values.scanlineIntensity, scanlineCount: values.scanlineCount, targetFPS: values.targetFPS, jitterIntensity: values.jitterIntensity, jitterSpeed: values.jitterSpeed, mouseGlowEnabled: values.mouseGlowEnabled, mouseGlowRadius: values.mouseGlowRadius, mouseGlowIntensity: values.mouseGlowIntensity, vignetteIntensity: values.vignetteIntensity, vignetteRadius: values.vignetteRadius, colorPalette: values.colorPalette, curvature: values.curvature, aberrationStrength: values.aberrationStrength, noiseIntensity: values.noiseIntensity, noiseScale: values.noiseScale, noiseSpeed: values.noiseSpeed, waveAmplitude: values.waveAmplitude, waveFrequency: values.waveFrequency, waveSpeed: values.waveSpeed, glitchIntensity: values.glitchIntensity, glitchFrequency: values.glitchFrequency, brightnessAdjust: values.brightnessAdjust, contrastAdjust: values.contrastAdjust, }, src: "/your-image-or-video-url", }; return jsonToComponentString({ componentName: "Efecto", props: { cellSize: values.cellSize, invert: values.invert, colorMode: values.colorMode, style: values.style, ...sharedProps, }, }); }, [] ), }, }); const controlValuesRef = useRef>(controlValues); controlValuesRef.current = controlValues; const setValueRef = useRef(controlValues.setValue); setValueRef.current = controlValues.setValue; const asciiStyle = (controlValues.style ?? EFECTO_ASCII_COMPONENT_DEFAULTS.asciiStyle) as EfectoAsciiStyle; const presetKey = (controlValues.preset ?? "none") as PostProcessingPresetKey; const { postProcessing } = computePostProcessingState( controlValues, presetKey ); useEffect(() => { applyPresetToControls( presetKey, controlValuesRef.current, setValueRef.current ); }, [presetKey]); const mediaAdjustments = { brightness: typeof controlValues.brightness === "number" ? controlValues.brightness : 1, contrast: typeof controlValues.contrast === "number" ? controlValues.contrast : 1, saturation: typeof controlValues.saturation === "number" ? controlValues.saturation : 1, }; const mouseParallax = typeof controlValues.mouseParallax === "boolean" ? controlValues.mouseParallax : false; const parallaxIntensity = typeof controlValues.parallaxIntensity === "number" ? controlValues.parallaxIntensity : 0.5; const activeSrc = uploadedMedia?.src ?? PRESET_MEDIA[0]?.src; return ( ); } export default function EfectoPage() { return ( ); } [V0_FILE]json:file="package.json" isDeleted="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.10", "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", "@toriistudio/v0-playground": "0.7.1", "@toriistudio/shader-ui": "0.0.3" }, "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]typescript:file="presets.ts" import type { ControlsSchema, PresetMediaEntry, } from "@toriistudio/v0-playground"; import { EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type EfectoPublicAsciiPostProcessingSettings, } from "@toriistudio/shader-ui"; const STYLE_OPTIONS: Record = { standard: "Standard", dense: "Dense", minimal: "Minimal", blocks: "Blocks", }; const COLOR_PALETTE_OPTIONS: Record = { original: "Original", green: "Green", amber: "Amber", cyan: "Cyan", blue: "Blue", }; export const PRESET_MEDIA: PresetMediaEntry[] = [ { src: "https://res.cloudinary.com/dz8kk1l4r/image/upload/v1763233793/portrait_hd7dyc.png", label: "Portrait", type: "image", }, { src: "https://res.cloudinary.com/dz8kk1l4r/image/upload/v1763233793/astronaut_q84mbj.png", label: "Astronaut", type: "image", }, { src: "https://res.cloudinary.com/dz8kk1l4r/image/upload/v1763233793/surreal-head_r0ozcd.png", label: "Futuristic", type: "image", }, { src: "https://res.cloudinary.com/dz8kk1l4r/image/upload/v1763233797/futuristic_bpwdzt.png", label: "Surreal", type: "image", }, ]; export const POST_PROCESSING_PRESETS = { none: { scanlineIntensity: 0, targetFPS: 0, jitterIntensity: 0, mouseGlowEnabled: false, vignetteIntensity: 0, colorPalette: "original", curvature: 0, aberrationStrength: 0, noiseIntensity: 0, waveAmplitude: 0, glitchIntensity: 0, brightnessAdjust: 0, contrastAdjust: 1, }, crt: { scanlineIntensity: 0.3, scanlineCount: 300, vignetteIntensity: 0.4, vignetteRadius: 0.7, curvature: 0.15, colorPalette: "original", brightnessAdjust: 0.1, contrastAdjust: 1.2, }, terminal: { scanlineIntensity: 0.2, scanlineCount: 400, jitterIntensity: 0.05, jitterSpeed: 2, colorPalette: "green", noiseIntensity: 0.1, noiseScale: 2, vignetteIntensity: 0.3, }, glitch: { jitterIntensity: 0.3, jitterSpeed: 5, glitchIntensity: 0.03, glitchFrequency: 2, aberrationStrength: 0.005, noiseIntensity: 0.2, targetFPS: 15, }, retro: { scanlineIntensity: 0.4, scanlineCount: 250, curvature: 0.2, vignetteIntensity: 0.5, aberrationStrength: 0.003, colorPalette: "amber", brightnessAdjust: 0.15, contrastAdjust: 1.3, }, } satisfies Record>; export type PostProcessingPresetKey = keyof typeof POST_PROCESSING_PRESETS; export const POST_PROCESSING_PRESET_OPTIONS: Record< PostProcessingPresetKey, string > = { none: "None", crt: "CRT", terminal: "Terminal", glitch: "Glitch", retro: "Retro", }; export const ASCII_CONTROL_SCHEMA = { style: { type: "select", value: EFECTO_ASCII_COMPONENT_DEFAULTS.asciiStyle, options: STYLE_OPTIONS, folder: "Basic", }, cellSize: { type: "number", value: EFECTO_ASCII_COMPONENT_DEFAULTS.cellSize, min: 4, max: 24, step: 1, folder: "Basic", }, invert: { type: "boolean", value: EFECTO_ASCII_COMPONENT_DEFAULTS.invert, folder: "Basic", }, colorMode: { type: "boolean", value: EFECTO_ASCII_COMPONENT_DEFAULTS.colorMode, folder: "Basic", }, mouseParallax: { type: "boolean", value: false, folder: "Mouse Parallax", }, parallaxIntensity: { type: "number", value: 0.5, min: 0, max: 1, step: 0.01, folder: "Mouse Parallax", }, preset: { type: "select", value: "none", options: POST_PROCESSING_PRESET_OPTIONS, folder: "Post-Processing", }, colorPalette: { type: "select", value: "original", options: COLOR_PALETTE_OPTIONS, folder: "Display", }, scanlineIntensity: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.scanlineIntensity, min: 0, max: 1, step: 0.01, folder: "Display", }, scanlineCount: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.scanlineCount, min: 100, max: 1000, step: 10, folder: "Display", }, vignetteIntensity: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.vignetteIntensity, min: 0, max: 1, step: 0.01, folder: "Display", }, vignetteRadius: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.vignetteRadius, min: 0.5, max: 1.5, step: 0.01, folder: "Display", }, curvature: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.curvature, min: 0, max: 0.5, step: 0.01, folder: "Distortion", }, aberrationStrength: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.aberrationStrength, min: 0, max: 0.01, step: 0.0005, folder: "Distortion", }, targetFPS: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.targetFPS, min: 0, max: 60, step: 1, folder: "Animation", }, jitterIntensity: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.jitterIntensity, min: 0, max: 1, step: 0.01, folder: "Animation", }, jitterSpeed: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.jitterSpeed, min: 0, max: 10, step: 0.05, folder: "Animation", }, waveAmplitude: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.waveAmplitude, min: 0, max: 0.1, step: 0.001, folder: "Animation", }, waveFrequency: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.waveFrequency, min: 0.5, max: 20, step: 0.1, folder: "Animation", }, waveSpeed: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.waveSpeed, min: 0, max: 5, step: 0.01, folder: "Animation", }, noiseIntensity: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.noiseIntensity, min: 0, max: 1, step: 0.01, folder: "Noise", }, noiseScale: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.noiseScale, min: 0.1, max: 10, step: 0.1, folder: "Noise", }, noiseSpeed: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.noiseSpeed, min: 0, max: 5, step: 0.1, folder: "Noise", }, glitchIntensity: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.glitchIntensity, min: 0, max: 0.05, step: 0.001, folder: "Noise", }, glitchFrequency: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.glitchFrequency, min: 0, max: 10, step: 0.1, folder: "Noise", }, mouseGlowEnabled: { type: "boolean", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.mouseGlowEnabled, folder: "Interactive", }, mouseGlowRadius: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.mouseGlowRadius, min: 50, max: 500, step: 10, folder: "Interactive", }, mouseGlowIntensity: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.mouseGlowIntensity, min: 0, max: 3, step: 0.1, folder: "Interactive", }, brightnessAdjust: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.brightnessAdjust, min: -0.5, max: 0.5, step: 0.01, folder: "Color", }, contrastAdjust: { type: "number", value: EFECTO_ASCII_POST_PROCESSING_DEFAULTS.contrastAdjust, min: 0.5, max: 2, step: 0.01, folder: "Color", }, brightness: { type: "number", value: 1, min: 0, max: 2, step: 0.1, folder: "Media", }, contrast: { type: "number", value: 1, min: 0, max: 2, step: 0.1, folder: "Media", }, saturation: { type: "number", value: 1, min: 0, max: 2, step: 0.1, folder: "Media", }, } satisfies ControlsSchema; type ControlValues = Record; type ControlSetter = (key: string, value: unknown) => void; const getNumber = (value: unknown) => typeof value === "number" ? value : undefined; const getBoolean = (value: unknown) => typeof value === "boolean" ? value : undefined; const resolveNumber = ( key: keyof typeof EFECTO_ASCII_POST_PROCESSING_DEFAULTS, controlValues: ControlValues, presetSettings: Partial, fallback: number ) => { const controlValue = getNumber(controlValues[key]); if (typeof controlValue === "number") { return controlValue; } const presetValue = getNumber(presetSettings[key]); if (typeof presetValue === "number") { return presetValue; } return fallback; }; const resolveBoolean = ( key: keyof typeof EFECTO_ASCII_POST_PROCESSING_DEFAULTS, controlValues: ControlValues, presetSettings: Partial, fallback: boolean ) => { const controlValue = getBoolean(controlValues[key]); if (typeof controlValue === "boolean") { return controlValue; } const presetValue = getBoolean(presetSettings[key]); if (typeof presetValue === "boolean") { return presetValue; } return fallback; }; export const computePostProcessingState = ( controlValues: ControlValues, presetKey: PostProcessingPresetKey ) => { const presetSettings = POST_PROCESSING_PRESETS[presetKey] ?? {}; const paletteValue = (controlValues.colorPalette ?? presetSettings.colorPalette ?? "original") as EfectoAsciiColorPalette; const postProcessing: EfectoPublicAsciiPostProcessingSettings = { scanlineIntensity: resolveNumber( "scanlineIntensity", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.scanlineIntensity ), scanlineCount: resolveNumber( "scanlineCount", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.scanlineCount ), targetFPS: resolveNumber( "targetFPS", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.targetFPS ), jitterIntensity: resolveNumber( "jitterIntensity", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.jitterIntensity ), jitterSpeed: resolveNumber( "jitterSpeed", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.jitterSpeed ), mouseGlowEnabled: resolveBoolean( "mouseGlowEnabled", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.mouseGlowEnabled ), mouseGlowRadius: resolveNumber( "mouseGlowRadius", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.mouseGlowRadius ), mouseGlowIntensity: resolveNumber( "mouseGlowIntensity", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.mouseGlowIntensity ), vignetteIntensity: resolveNumber( "vignetteIntensity", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.vignetteIntensity ), vignetteRadius: resolveNumber( "vignetteRadius", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.vignetteRadius ), colorPalette: paletteValue, curvature: resolveNumber( "curvature", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.curvature ), aberrationStrength: resolveNumber( "aberrationStrength", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.aberrationStrength ), noiseIntensity: resolveNumber( "noiseIntensity", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.noiseIntensity ), noiseScale: resolveNumber( "noiseScale", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.noiseScale ), noiseSpeed: resolveNumber( "noiseSpeed", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.noiseSpeed ), waveAmplitude: resolveNumber( "waveAmplitude", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.waveAmplitude ), waveFrequency: resolveNumber( "waveFrequency", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.waveFrequency ), waveSpeed: resolveNumber( "waveSpeed", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.waveSpeed ), glitchIntensity: resolveNumber( "glitchIntensity", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.glitchIntensity ), glitchFrequency: resolveNumber( "glitchFrequency", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.glitchFrequency ), brightnessAdjust: resolveNumber( "brightnessAdjust", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.brightnessAdjust ), contrastAdjust: resolveNumber( "contrastAdjust", controlValues, presetSettings, EFECTO_ASCII_POST_PROCESSING_DEFAULTS.contrastAdjust ), }; return { paletteValue, postProcessing, presetSettings }; }; export const applyPresetToControls = ( presetKey: PostProcessingPresetKey, controlValues: ControlValues, setValue: ControlSetter ) => { const preset = POST_PROCESSING_PRESETS[presetKey]; if (!preset) { return; } Object.entries(preset).forEach(([key, value]) => { if (value === undefined) { return; } if (controlValues[key] === value) { return; } setValue(key, value); }); }; [V0_FILE]typescript:file="tailwind.config.ts" import preset from "@toriistudio/v0-playground/preset"; export default { presets: [preset], content: [ "./src/**/*.{ts,tsx}", "./node_modules/@toriistudio/**/*.{js,ts,jsx,tsx}", ], };