[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.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", "@paper-design/shaders-react": "0.0.68", "tweakpane": "4.0.5" }, "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="hooks/use-audio-level.ts" isEdit="true" isMerged="true" "use client" import { useState, useRef, useCallback, useEffect } from "react" export function useAudioLevel() { const [audioLevel, setAudioLevel] = useState(0) const [isListening, setIsListening] = useState(false) const audioContextRef = useRef(null) const analyserRef = useRef(null) const streamRef = useRef(null) const animationFrameRef = useRef(null) const startListening = useCallback(async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) streamRef.current = stream audioContextRef.current = new AudioContext() analyserRef.current = audioContextRef.current.createAnalyser() analyserRef.current.fftSize = 256 const source = audioContextRef.current.createMediaStreamSource(stream) source.connect(analyserRef.current) const dataArray = new Uint8Array(analyserRef.current.frequencyBinCount) const updateLevel = () => { if (analyserRef.current) { analyserRef.current.getByteFrequencyData(dataArray) const average = dataArray.reduce((a, b) => a + b) / dataArray.length const normalized = Math.min(average / 128, 1) setAudioLevel(normalized) } animationFrameRef.current = requestAnimationFrame(updateLevel) } updateLevel() setIsListening(true) } catch (err) { console.error("Microphone access denied:", err) } }, []) const stopListening = useCallback(() => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } if (streamRef.current) { streamRef.current.getTracks().forEach((track) => track.stop()) } if (audioContextRef.current) { audioContextRef.current.close() } setAudioLevel(0) setIsListening(false) }, []) useEffect(() => { return () => { stopListening() } }, [stopListening]) return { audioLevel, isListening, startListening, stopListening } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { AiOrb } from "@/components/ai-orb" export default function Page() { return } [V0_FILE]typescriptreact:file="components/ai-orb.tsx" isEdit="true" isQuickEdit="true" "use client" import { Warp } from "@paper-design/shaders-react" import { useState, useEffect, useRef } from "react" import { useAudioLevel } from "@/hooks/use-audio-level" import { Pane } from "tweakpane" type Theme = "default" | "angsty" | "tibor" | "minty" const DEFAULT_PARAMS = { proportion: 0.35, softness: 1, distortion: 0.32, swirl: 1, swirlIterations: 0, shape: "edge" as "checks" | "stripes" | "edge", shapeScale: 0, speed: 12.2, scale: 0.31, rotation: 176, offsetX: 0.65, offsetY: 0.09, color1: "#ade7ff", color2: "#ebf4ff", color3: "#00bbff", } const themes: Record = { default: { color1: "#ade7ff", color2: "#ebf4ff", color3: "#00bbff" }, angsty: { color1: "#ffffff", color2: "#bfbfbf", color3: "#ffffff" }, tibor: { color1: "#ff6f00", color2: "#fec398", color3: "#ffffff" }, minty: { color1: "#00c853", color2: "#98fec3", color3: "#ffffff" }, } const themeLabels: Record = { default: "default", angsty: "angsty teen", tibor: "hello tibor", minty: "minty fresh", } export function AiOrb() { const [theme, setTheme] = useState("default") const { audioLevel, isListening, startListening, stopListening } = useAudioLevel() const paneRef = useRef(null) const containerRef = useRef(null) const [params, setParams] = useState({ ...DEFAULT_PARAMS }) useEffect(() => { if (!containerRef.current || paneRef.current) return const pane = new Pane({ container: containerRef.current, title: "Shader Controls", }) // Colors folder const colorsFolder = pane.addFolder({ title: "Colors" }) colorsFolder.addBinding(params, "color1", { label: "Color 1" }) colorsFolder.addBinding(params, "color2", { label: "Color 2" }) colorsFolder.addBinding(params, "color3", { label: "Color 3" }) // Shader props folder const shaderFolder = pane.addFolder({ title: "Shader Props" }) shaderFolder.addBinding(params, "proportion", { min: 0, max: 1, step: 0.01 }) shaderFolder.addBinding(params, "softness", { min: 0, max: 1, step: 0.01 }) shaderFolder.addBinding(params, "distortion", { min: 0, max: 1, step: 0.01 }) shaderFolder.addBinding(params, "swirl", { min: 0, max: 1, step: 0.01 }) shaderFolder.addBinding(params, "swirlIterations", { min: 0, max: 20, step: 1 }) shaderFolder.addBinding(params, "shape", { options: { checks: "checks", stripes: "stripes", edge: "edge" }, }) shaderFolder.addBinding(params, "shapeScale", { min: 0, max: 1, step: 0.01 }) // Common props folder const commonFolder = pane.addFolder({ title: "Common Props" }) commonFolder.addBinding(params, "speed", { min: 0, max: 30, step: 0.1 }) commonFolder.addBinding(params, "scale", { min: 0.01, max: 4, step: 0.01 }) commonFolder.addBinding(params, "rotation", { min: 0, max: 360, step: 1 }) commonFolder.addBinding(params, "offsetX", { min: -1, max: 1, step: 0.01 }) commonFolder.addBinding(params, "offsetY", { min: -1, max: 1, step: 0.01 }) // Copy/Paste folder const exportFolder = pane.addFolder({ title: "Export/Import" }) exportFolder.addButton({ title: "Copy Values" }).on("click", () => { const exportData = JSON.stringify(params, null, 2) navigator.clipboard.writeText(exportData) alert("Values copied to clipboard! Paste them to v0 to update defaults.") }) // Listen for changes pane.on("change", () => { setParams({ ...params }) }) paneRef.current = pane return () => { pane.dispose() paneRef.current = null } }, []) const handleThemeChange = (t: Theme) => { setTheme(t) const themeColors = themes[t] params.color1 = themeColors.color1 params.color2 = themeColors.color2 params.color3 = themeColors.color3 setParams({ ...params }) paneRef.current?.refresh() } const handleCall = () => { if (isListening) { stopListening() } else { startListening() } } return (

{/* Theme selector */}

{(Object.keys(themes) as Theme[]).map((t) => ( ))}

{/* AI Orb - circular clipped shader */}

{/* Call button */}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This