[V0_FILE]typescriptreact:file="components/AudioSource.tsx" import type { ChangeEvent, FC, RefObject } from "react"; type AudioSourceProps = { audioObjectUrl: string | null; fileLabel: string; fileInputRef: RefObject; onFileChange: (event: ChangeEvent) => void; onReset: () => void; }; const AudioSource: FC = ({ audioObjectUrl, fileLabel, fileInputRef, onFileChange, onReset, }) => { return (

Source {fileLabel} Browse {audioObjectUrl && ( )}

); }; export default AudioSource; [V0_FILE]typescriptreact:file="components/RadialRipples.tsx" "use client"; import { useFrame } from "@react-three/fiber"; import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, } from "react"; import * as THREE from "three"; import bufferFragmentShader from "/shaders/bufferA"; import fragmentShader from "/shaders/fragment"; import vertexShader from "/shaders/vertex"; const BUFFER_WIDTH = 1; const BUFFER_HEIGHT = 256; const DEFAULT_AUDIO_SRC = "/audio.mp3"; export type PaletteTriplet = { r: number; g: number; b: number; }; export type ShaderPalette = { A: PaletteTriplet; B: PaletteTriplet; C: PaletteTriplet; D: PaletteTriplet; }; export type RadialRipplesHandle = { play: () => Promise; pause: () => Promise; restart: () => Promise; setAudioSource: ( url: string | null, options?: { autoplay?: boolean } ) => Promise; }; type RadialRipplesProps = { isPlaying: boolean; palette: ShaderPalette; }; const clonePalette = (palette: ShaderPalette): ShaderPalette => ({ A: { ...palette.A }, B: { ...palette.B }, C: { ...palette.C }, D: { ...palette.D }, }); function createAudioSampleTexture() { const data = new Uint8Array(4); data[3] = 255; const texture = new THREE.DataTexture(data, 1, 1, THREE.RGBAFormat); texture.needsUpdate = true; texture.magFilter = THREE.NearestFilter; texture.minFilter = THREE.NearestFilter; texture.wrapS = THREE.ClampToEdgeWrapping; texture.wrapT = THREE.ClampToEdgeWrapping; return texture; } function createRenderTarget() { const target = new THREE.WebGLRenderTarget(BUFFER_WIDTH, BUFFER_HEIGHT, { depthBuffer: false, stencilBuffer: false, }); target.texture.wrapS = THREE.ClampToEdgeWrapping; target.texture.wrapT = THREE.ClampToEdgeWrapping; target.texture.minFilter = THREE.NearestFilter; target.texture.magFilter = THREE.NearestFilter; target.texture.generateMipmaps = false; return target; } const RadialRipples = forwardRef( function RadialRipples({ isPlaying, palette }, ref) { const frameRef = useRef(0); const audioTexture = useMemo(() => createAudioSampleTexture(), []); const renderTargets = useMemo( () => [createRenderTarget(), createRenderTarget()], [] ); // Ping-pong render targets keep the rolling BufferA state. const pingPongRef = useRef<{ read: THREE.WebGLRenderTarget; write: THREE.WebGLRenderTarget; }>({ read: renderTargets[0], write: renderTargets[1], }); const audioContextRef = useRef(null); const audioSourceRef = useRef(null); const analyserRef = useRef(null); const analyserDataRef = useRef(null); const decodedBufferRef = useRef(null); const audioLoadingRef = useRef(false); const analyserConnectedRef = useRef(false); const requestedAudioUrlRef = useRef(DEFAULT_AUDIO_SRC); const currentAudioUrlRef = useRef(null); const channelResolutions = useMemo( () => [ new THREE.Vector3(1, 1, 1), new THREE.Vector3(BUFFER_WIDTH, BUFFER_HEIGHT, 1), new THREE.Vector3(1, 1, 1), new THREE.Vector3(1, 1, 1), ], [] ); const bufferUniforms = useMemo( () => ({ iResolution: { value: new THREE.Vector3(BUFFER_WIDTH, BUFFER_HEIGHT, 1), }, iFrame: { value: 0 }, iChannel1: { value: audioTexture }, iChannel2: { value: pingPongRef.current.read.texture }, }), [audioTexture] ); const bufferResources = useMemo(() => { const scene = new THREE.Scene(); const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1); const geometry = new THREE.PlaneGeometry(2, 2); const material = new THREE.ShaderMaterial({ vertexShader, fragmentShader: bufferFragmentShader, uniforms: bufferUniforms, depthTest: false, depthWrite: false, }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); return { scene, camera, geometry, material }; }, [bufferUniforms]); const mainUniforms = useMemo( () => ({ iTime: { value: 0 }, iResolution: { value: new THREE.Vector3(1, 1, 1) }, iFrame: { value: 0 }, iChannel1: { value: pingPongRef.current.read.texture }, iChannelResolution: { value: channelResolutions }, uPaletteA: { value: new THREE.Vector3(0.5, 0.5, 0.5) }, uPaletteB: { value: new THREE.Vector3(0.5, 0.5, 0.5) }, uPaletteC: { value: new THREE.Vector3(1.0, 1.0, 1.0) }, uPaletteD: { value: new THREE.Vector3(0.0, 0.1, 0.2) }, }), [channelResolutions] ); const mainMaterialRef = useRef(null); const stopCurrentSource = useCallback(() => { const source = audioSourceRef.current; if (!source) { return; } try { source.stop(0); } catch (error) { console.warn("Failed to stop audio source", error); } source.disconnect(); audioSourceRef.current = null; }, []); const prepareAudioContext = useCallback(async () => { if (typeof window === "undefined") { return null; } let context = audioContextRef.current; if (!context) { const AudioCtx = window.AudioContext || ( window as typeof window & { webkitAudioContext?: typeof AudioContext; } ).webkitAudioContext; if (!AudioCtx) { console.warn("Web Audio API is not supported in this browser."); return null; } context = new AudioCtx(); audioContextRef.current = context; } if (!analyserRef.current) { const analyser = context.createAnalyser(); analyser.fftSize = Math.max(BUFFER_HEIGHT * 2, 32); analyserRef.current = analyser; analyserDataRef.current = new Uint8Array(analyser.frequencyBinCount); } return context; }, []); const fetchAudioBuffer = useCallback(async () => { const context = await prepareAudioContext(); if (!context) { return null; } const targetUrl = requestedAudioUrlRef.current ?? DEFAULT_AUDIO_SRC; if ( currentAudioUrlRef.current === targetUrl && decodedBufferRef.current ) { return decodedBufferRef.current; } if (audioLoadingRef.current) { return decodedBufferRef.current; } audioLoadingRef.current = true; try { const response = await fetch(targetUrl); if (!response.ok) { throw new Error(`Failed to load audio file at ${targetUrl}`); } const arrayBuffer = await response.arrayBuffer(); const buffer = await context.decodeAudioData(arrayBuffer); decodedBufferRef.current = buffer; currentAudioUrlRef.current = targetUrl; return buffer; } catch (error) { console.error("Failed to load audio", error); return decodedBufferRef.current; } finally { audioLoadingRef.current = false; } }, [prepareAudioContext]); const playBuffer = useCallback( (buffer: AudioBuffer) => { const context = audioContextRef.current; const analyser = analyserRef.current; if (!context || !analyser) { return; } stopCurrentSource(); const source = context.createBufferSource(); source.buffer = buffer; source.loop = true; source.connect(analyser); if (!analyserConnectedRef.current) { analyser.connect(context.destination); analyserConnectedRef.current = true; } try { source.start(0); audioSourceRef.current = source; } catch (error) { console.error("Failed to start audio playback", error); } }, [stopCurrentSource] ); const play = useCallback(async () => { const context = await prepareAudioContext(); if (!context) { return false; } const targetUrl = requestedAudioUrlRef.current ?? DEFAULT_AUDIO_SRC; if (currentAudioUrlRef.current !== targetUrl) { stopCurrentSource(); decodedBufferRef.current = null; } if (context.state === "suspended") { try { await context.resume(); } catch (error) { console.warn("Failed to resume audio context", error); } } if (audioSourceRef.current) { return true; } const buffer = decodedBufferRef.current && currentAudioUrlRef.current === targetUrl ? decodedBufferRef.current : await fetchAudioBuffer(); if (buffer) { playBuffer(buffer); return audioSourceRef.current !== null; } return false; }, [fetchAudioBuffer, playBuffer, prepareAudioContext, stopCurrentSource]); const pause = useCallback(async () => { const context = audioContextRef.current; if (!context) { return; } if (context.state !== "suspended") { try { await context.suspend(); } catch (error) { console.warn("Failed to suspend audio context", error); } } }, []); const restart = useCallback(async () => { const context = await prepareAudioContext(); if (!context) { return false; } if (context.state === "suspended") { try { await context.resume(); } catch (error) { console.warn("Failed to resume audio context", error); } } const buffer = decodedBufferRef.current ?? (await fetchAudioBuffer()); if (buffer) { playBuffer(buffer); } return audioSourceRef.current !== null; }, [fetchAudioBuffer, playBuffer, prepareAudioContext]); const setAudioSource = useCallback( async (url: string | null, options?: { autoplay?: boolean }) => { requestedAudioUrlRef.current = url ?? DEFAULT_AUDIO_SRC; stopCurrentSource(); decodedBufferRef.current = null; currentAudioUrlRef.current = null; if (options?.autoplay) { return await play(); } return false; }, [play, stopCurrentSource] ); useImperativeHandle( ref, () => ({ play: async () => { return await play(); }, pause: async () => { await pause(); }, restart: async () => { return await restart(); }, setAudioSource: async (url, options) => { return await setAudioSource(url, options); }, getPalette: () => clonePalette(palette), }), [pause, play, restart, setAudioSource, palette] ); useEffect(() => { return () => { stopCurrentSource(); const analyser = analyserRef.current; if (analyser) { analyser.disconnect(); } const context = audioContextRef.current; if (context) { void context.close(); } audioTexture.dispose(); renderTargets.forEach((target) => target.dispose()); bufferResources.material.dispose(); bufferResources.geometry.dispose(); }; }, [audioTexture, bufferResources, renderTargets, stopCurrentSource]); useEffect(() => { const { A, B, C, D } = palette; mainUniforms.uPaletteA.value.set(A.r, A.g, A.b); mainUniforms.uPaletteB.value.set(B.r, B.g, B.b); mainUniforms.uPaletteC.value.set(C.r, C.g, C.b); mainUniforms.uPaletteD.value.set(D.r, D.g, D.b); if (mainMaterialRef.current) { (mainMaterialRef.current as THREE.ShaderMaterial).uniformsNeedUpdate = true; } }, [mainUniforms, palette]); useFrame((state) => { const mainMaterial = mainMaterialRef.current; if (!mainMaterial) { return; } const { gl, size, clock } = state; const pingPong = pingPongRef.current; const bufferMaterial = bufferResources.material; const analyser = analyserRef.current; const analyserData = analyserDataRef.current; if (analyser && analyserData) { analyser.getByteFrequencyData(analyserData); let sum = 0; for (let index = 0; index < analyserData.length; index += 1) { sum += analyserData[index]; } const average = analyserData.length > 0 ? sum / analyserData.length : 0; const normalized = Math.min(Math.max(average / 255, 0), 1); const mappedValue = Math.floor(normalized * 255); const pixelData = audioTexture.image.data as Uint8Array; pixelData[0] = mappedValue; pixelData[1] = mappedValue; pixelData[2] = Math.floor(Math.pow(normalized, 2.0) * 255.0); pixelData[3] = 255; audioTexture.needsUpdate = true; } const currentFrame = frameRef.current; bufferMaterial.uniforms.iFrame.value = currentFrame; bufferMaterial.uniforms.iChannel1.value = audioTexture; bufferMaterial.uniforms.iChannel2.value = pingPong.read.texture; const previousTarget = gl.getRenderTarget(); gl.setRenderTarget(pingPong.write); gl.render(bufferResources.scene, bufferResources.camera); gl.setRenderTarget(previousTarget); const newRead = pingPong.write; pingPong.write = pingPong.read; pingPong.read = newRead; mainMaterial.uniforms.iTime.value = clock.elapsedTime; mainMaterial.uniforms.iResolution.value.set(size.width, size.height, 1); mainMaterial.uniforms.iFrame.value = currentFrame; mainMaterial.uniforms.iChannel1.value = pingPong.read.texture; frameRef.current = currentFrame + 1.0; }); return ( <> ); } ); export default RadialRipples; [V0_FILE]typescriptreact:file="components/OverlayScreen.tsx" import { Html } from "@react-three/drei"; export type OverlayScreenProps = { gradient?: string; hidden: boolean; isLoading: boolean; onPlay: () => void; }; const FALLBACK_GRADIENT = "linear-gradient(rgba(29, 38, 113, 0.5), rgba(195, 55, 100, 0.5))"; const OverlayScreen: React.FC = ({ gradient, hidden, isLoading, onPlay, }) => { return ( ); }; export default OverlayScreen; [V0_FILE]typescriptreact:file="components/AudioControls.tsx" import type { FC } from "react"; type AudioControlsProps = { isPlaying: boolean; isLoading: boolean; onTogglePlayback: () => void; onRestart: () => void; }; const baseButtonClasses = "flex-1 rounded-md border px-3 py-2 text-xs font-semibold uppercase tracking-wide transition"; const AudioControls: FC = ({ isPlaying, isLoading, onTogglePlayback, onRestart, }) => { return (

Playback

); }; export default AudioControls; [V0_FILE]typescript:file="shaders/bufferA.ts" export default ` precision highp float; varying vec2 vUv; uniform vec3 iResolution; uniform float iFrame; uniform sampler2D iChannel1; uniform sampler2D iChannel2; vec2 toFragCoord(vec2 uv, vec3 resolution) { vec2 coord = vec2(uv.x * resolution.x, uv.y * resolution.y); return floor(coord); } vec2 toUV(vec2 fragCoord, vec3 resolution) { return (fragCoord + 0.5) / resolution.xy; } void main() { vec3 resolution = vec3(max(iResolution.x, 1.0), max (iResolution.y, 1.0), 1.0); vec2 fragCoord = toFragCoord(vUv, resolution); fragCoord = clamp(fragCoord, vec2(0.0), resolution.xy - vec2 (1.0)); vec2 sampleUV = toUV(fragCoord, resolution); vec4 previousColor = texture(iChannel2, sampleUV); float targetRow = mod(iFrame, resolution.y); float rowIndex = fragCoord.y; if (abs(rowIndex - targetRow) < 0.5) { gl_FragColor = texture(iChannel1, vec2(0.0, 0.0)); } else { gl_FragColor = previousColor; } } ` [V0_FILE]typescript:file="shaders/fragment.ts" export default ` precision highp float; varying vec2 vUv; uniform float iTime; uniform vec3 iResolution; uniform float iFrame; uniform sampler2D iChannel1; uniform vec3 iChannelResolution[4]; uniform vec3 uPaletteA; uniform vec3 uPaletteB; uniform vec3 uPaletteC; uniform vec3 uPaletteD; float hash(in vec2 p) { float r = dot(p, vec2(12.1, 31.7)) + dot(p, vec2(299.5, 78.3)); return fract(sin(r) * 4358.545); } vec3 pal(in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d) { return a + b * cos(6.28318 * (c * t + d)); } vec3 color(vec2 p) { return pal( 0.55 + hash(p) * 0.2, uPaletteA, uPaletteB, uPaletteC, uPaletteD ) * 1.5; } void main() { vec2 fragCoord = vec2(vUv.x * iResolution.x, vUv.y * iResolution.y); vec2 resolution = max(iResolution.xy, vec2(1.0)); vec2 v = resolution; v = (fragCoord - v * 0.5) / max(v.x, v.y) + vec2(0.2, 0.0); vec2 a = vec2(length(v), atan(v.y, v.x)); const float pi = 3.1416; const float k = 14.0; const float w = 4.0; const float t = 1.0; float iVal = floor(a.x * k); float channelHeight = max(iChannelResolution[1].y, 1.0); float frameValue = iFrame; vec2 bufferSampleUV = vec2( 0.0, mod(frameValue - iVal * 4.0, channelHeight) / channelHeight ); float b = texture(iChannel1, bufferSampleUV).r; a = vec2( (iVal + 0.3 + b * 0.35) * (1.0 / k), (floor(a.y * (1.0 / pi) * (iVal * w + t)) + 0.5) * pi / (iVal * w + t) ); vec3 c = color(vec2(iVal, a.y)); a = vec2(cos(a.y), sin(a.y)) * a.x; c *= smoothstep(0.002, 0.0, length(v - a) - 0.02); c *= step(0.07, length(v)); c += vec3(1.0, 1.0, 0.6) * smoothstep(0.002, 0.0, length(v) - 0.03 - b * 0.03); gl_FragColor = vec4(pow(c, vec3(0.5454)), 1.0); } ` [V0_FILE]typescript:file="shaders/vertex.ts" export default ` varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); } ` [V0_FILE]plaintext:file="public/audio.mp3" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/audio-mfbHgMuggdgzU9aAMHOHRuraaKCIsv.mp3" [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}", ], }; [V0_FILE]typescriptreact:file="page.tsx" "use client"; import { type ChangeEvent, useCallback, useEffect, useMemo, useRef, useState, } from "react"; import { useControls, Playground, useAdvancedPaletteControls, } from "@toriistudio/v0-playground"; import { Canvas } from "@react-three/fiber"; import RadialRipples, { type RadialRipplesHandle, } from "/components/RadialRipples"; import OverlayScreen from "/components/OverlayScreen"; import AudioControls from "/components/AudioControls"; import AudioSource from "/components/AudioSource"; const DEFAULT_TRACK_LABEL = "Built-in track"; function RadialRipplesScene() { const [audioObjectUrl, setAudioObjectUrl] = useState(null); const [fileLabel, setFileLabel] = useState(DEFAULT_TRACK_LABEL); const [isPlaying, setIsPlaying] = useState(false); const [isAudioLoading, setIsAudioLoading] = useState(false); const [overlaySuppressed, setOverlaySuppressed] = useState(false); const fileInputRef = useRef(null); const shaderRef = useRef(null); const overlayTimeoutRef = useRef | null>(null); const suppressOverlay = useCallback(() => { setOverlaySuppressed(true); if (overlayTimeoutRef.current) { clearTimeout(overlayTimeoutRef.current); } overlayTimeoutRef.current = setTimeout(() => { setOverlaySuppressed(false); overlayTimeoutRef.current = null; }, 1500); }, []); useEffect( () => () => { if (overlayTimeoutRef.current) { clearTimeout(overlayTimeoutRef.current); } }, [] ); useEffect( () => () => { if (audioObjectUrl) { URL.revokeObjectURL(audioObjectUrl); } }, [audioObjectUrl] ); const startPlayback = useCallback(async () => { const handle = shaderRef.current; if (!handle) { return false; } setIsAudioLoading(true); try { const started = await handle.play(); setIsPlaying(started); return started; } catch (error) { console.warn("Failed to start audio playback", error); setIsPlaying(false); return false; } finally { setIsAudioLoading(false); } }, [shaderRef]); const handleFileChange = useCallback( (event: ChangeEvent) => { const file = event.target.files?.[0]; if (!file) { return; } const nextUrl = URL.createObjectURL(file); setAudioObjectUrl((prev) => { if (prev) { URL.revokeObjectURL(prev); } return nextUrl; }); setFileLabel(file.name); const handle = shaderRef.current; if (handle) { setIsAudioLoading(true); void (async () => { try { const started = await handle.setAudioSource(nextUrl, { autoplay: true, }); setIsPlaying(started); } finally { setIsAudioLoading(false); } })(); } else { setIsPlaying(false); } // Allow re-selecting the same file. event.target.value = ""; }, [shaderRef] ); const handleReset = useCallback(() => { setAudioObjectUrl((prev) => { if (prev) { URL.revokeObjectURL(prev); } return null; }); setFileLabel(DEFAULT_TRACK_LABEL); const handle = shaderRef.current; if (handle) { setIsAudioLoading(true); void (async () => { try { const started = await handle.setAudioSource(null, { autoplay: true, }); setIsPlaying(started); } finally { setIsAudioLoading(false); } })(); } else { setIsPlaying(false); } const input = fileInputRef.current; if (input) { input.value = ""; } }, [shaderRef]); const handleOverlayPlay = useCallback(() => { void startPlayback(); }, [startPlayback]); const handleTogglePlayback = useCallback(() => { const handle = shaderRef.current; if (!handle) { return; } if (isAudioLoading) { return; } if (isPlaying) { void (async () => { await handle.pause(); setIsPlaying(false); })(); } else { void startPlayback(); } }, [isAudioLoading, isPlaying, shaderRef, startPlayback]); const handleRestart = useCallback(() => { const handle = shaderRef.current; if (!handle) { return; } setIsAudioLoading(true); void (async () => { try { const restarted = await handle.restart(); setIsPlaying(restarted); } finally { setIsAudioLoading(false); } })(); }, [shaderRef]); const { palette, paletteGradient, controlConfig: paletteControlConfig, } = useAdvancedPaletteControls({ control: { folder: "Colors", onInteraction: suppressOverlay, }, }); const renderControls = useCallback( () => (

), [ audioObjectUrl, fileLabel, fileInputRef, handleFileChange, handleReset, handleRestart, handleTogglePlayback, isAudioLoading, isPlaying, ] ); const controlSchema = useMemo( () => ({ playbackAndAudio: { type: "button", render: renderControls, playbackState: isPlaying ? "playing" : "paused", folder: "Audio", folderPlacement: "top", }, }), [renderControls, isPlaying] ); useControls(controlSchema, { config: { mainLabel: "Audio Radial Controls", showCopyButton: false, addAdvancedPaletteControl: paletteControlConfig, }, }); const overlayHidden = isPlaying || overlaySuppressed; return (

); } export default function RadialRipplesPage() { return ( ); }