[V0_FILE]plaintext:file=".gitignore" isMerged="true" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" isMerged="true" # wav0-landing *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/fluid-tools/v0-wav0-landing) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/projects/QLrfPJ9P74y) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/fluid-tools/v0-wav0-landing](https://vercel.com/fluid-tools/v0-wav0-landing)** ## Build your app Continue building your app on: **[https://v0.app/chat/projects/QLrfPJ9P74y](https://v0.app/chat/projects/QLrfPJ9P74y)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */ --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; } html, body { @apply bg-background text-foreground; margin: 0; padding: 0; height: 100%; width: 100%; } /* Ensure root element takes full height with no margins */ #__next { @apply h-full; margin: 0; padding: 0; } /* Reset any default margins on main content areas */ main { margin: 0; padding: 0; } /* Added instrument font class for pulsing circle text */ .instrument { font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 500; } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Bot, Sliders, Archive, FileText } from "lucide-react" import { HeroSection } from "@/components/hero-section" import { FeatureSection } from "@/components/feature-section" import { ChatPill } from "@/components/chat-pill" import { DynamicBackground } from "@/components/dynamic-background" import { Footer } from "@/components/footer" import { Client3DScene } from "@/components/client-3d-scene" export default function WAV0Landing() { return (

} delay={0.1} index={0} metric="<10s" metricLabel="Effects Gen" /> } delay={0.2} index={1} metric="Zero" metricLabel="Friction Export" /> } delay={0.3} index={2} metric="Private" metricLabel="By Default" /> } delay={0.4} index={3} metric="1-Click" metricLabel="Rollback" />

) } [V0_FILE]json:file="components.json" isMerged="true" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/chat-pill.tsx" isMerged="true" "use client" import { motion, useScroll, useTransform } from "motion/react" import { MessageCircle, ArrowRight, AudioWaveformIcon } from "lucide-react" export function ChatPill() { const { scrollYProgress } = useScroll() const width = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], ["60px", "120px", "320px", "360px"]) const height = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], ["60px", "60px", "52px", "52px"]) const borderRadius = useTransform(scrollYProgress, [0, 0.3, 0.7, 1], ["30px", "30px", "26px", "26px"]) const opacity = useTransform(scrollYProgress, [0, 0.1, 0.9, 1], [0.6, 0.8, 0.9, 1]) return ( window.open("https://github.com", "_blank", "noopener,noreferrer")} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault() window.open("https://github.com", "_blank", "noopener,noreferrer") } }} >

) } [V0_FILE]typescriptreact:file="components/client-3d-scene.tsx" isMerged="true" "use client" import dynamic from "next/dynamic" import { ErrorBoundary } from "react-error-boundary" import { useEffect, useState } from "react" const Scroll3DScene = dynamic( () => import("@/components/scroll-3d-scene").then((mod) => ({ default: mod.Scroll3DScene })), { ssr: false, loading: () =>

, }, ) function ErrorFallback() { return

} export function Client3DScene() { const [isClient, setIsClient] = useState(false) const [hasWebGL, setHasWebGL] = useState(false) useEffect(() => { setIsClient(true) try { const canvas = document.createElement("canvas") const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl") setHasWebGL(!!gl) } catch (e) { setHasWebGL(false) } }, []) if (!isClient || !hasWebGL) { return

} return ( { console.error("[v0] 3D Scene Error:", error) }} > ) } [V0_FILE]typescriptreact:file="components/dynamic-background.tsx" isMerged="true" "use client" import { motion, useScroll, useTransform } from "motion/react" import { useRef } from "react" export function DynamicBackground() { const containerRef = useRef(null) const { scrollYProgress } = useScroll() const backgroundY = useTransform(scrollYProgress, [0, 1], [0, -300]) const gridOpacity = useTransform(scrollYProgress, [0, 0.2, 0.4, 0.6, 0.8, 1], [0.05, 0.15, 0.25, 0.2, 0.3, 0.4]) const accentOpacity = useTransform( scrollYProgress, [0, 0.1, 0.3, 0.5, 0.7, 0.9, 1], [0, 0.2, 0.4, 0.6, 0.5, 0.7, 0.8], ) const gridX = useTransform(scrollYProgress, [0, 0.5, 1], [0, 50, 150]) const gridY = useTransform(scrollYProgress, [0, 0.5, 1], [0, 75, 200]) const gridRotation = useTransform(scrollYProgress, [0, 1], [0, 2]) const glitchOpacity = useTransform( scrollYProgress, [0, 0.1, 0.2, 0.4, 0.6, 0.8, 1], [0, 0.05, 0.15, 0.08, 0.2, 0.12, 0.25], ) const dataStreamY = useTransform(scrollYProgress, [0, 1], [0, -400]) const circuitOpacity = useTransform(scrollYProgress, [0, 0.3, 0.6, 1], [0, 0.15, 0.35, 0.45]) const floatingElementsY = useTransform(scrollYProgress, [0, 1], [0, -150]) const sophisticatedOpacity = useTransform(scrollYProgress, [0, 0.2, 0.5, 0.8, 1], [0.02, 0.08, 0.12, 0.15, 0.2]) return (

{/* Vertical data streams with varying intensities */}

{/* Horizontal circuit lines with varying positions */}

{/* Enhanced accent elements with more variety */} {/* Enhanced corner brackets with more sophistication */}

{/* Additional sophisticated floating elements */}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" "use client" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/pulsing-circle.tsx" isMerged="true" "use client" import { PulsingBorder } from "@paper-design/shaders-react" import { motion } from "framer-motion" export default function PulsingCircle() { return (

{/* Pulsing Border Circle */} {/* Rotating Text Around the Pulsing Border */} {"wav0 WAV0 AI wav0 WAV0 AI wav0"}

) } [V0_FILE]typescriptreact:file="components/shader-background.tsx" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { MeshGradient } from "@paper-design/shaders-react" interface ShaderBackgroundProps { children: React.ReactNode } export default function ShaderBackground({ children }: ShaderBackgroundProps) { const containerRef = useRef(null) const [isActive, setIsActive] = useState(false) useEffect(() => { const handleMouseEnter = () => setIsActive(true) const handleMouseLeave = () => setIsActive(false) const container = containerRef.current if (container) { container.addEventListener("mouseenter", handleMouseEnter) container.addEventListener("mouseleave", handleMouseLeave) } return () => { if (container) { container.removeEventListener("mouseenter", handleMouseEnter) container.removeEventListener("mouseleave", handleMouseLeave) } } }, []) return (

{/* SVG Filters */} {/* Background Shaders */} {children}

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/glowing-effect.tsx" isMerged="true" "use client" import type React from "react" import { memo, useCallback, useEffect, useRef } from "react" import { cn } from "@/lib/utils" import { animate } from "motion/react" interface GlowingEffectProps { blur?: number inactiveZone?: number proximity?: number spread?: number variant?: "default" | "white" glow?: boolean className?: string disabled?: boolean movementDuration?: number borderWidth?: number } const GlowingEffect = memo( ({ blur = 0, inactiveZone = 0.7, proximity = 0, spread = 20, variant = "default", glow = false, className, movementDuration = 2, borderWidth = 1, disabled = true, }: GlowingEffectProps) => { const containerRef = useRef(null) const lastPosition = useRef({ x: 0, y: 0 }) const animationFrameRef = useRef(0) const handleMove = useCallback( (e?: MouseEvent | { x: number; y: number }) => { if (!containerRef.current) return if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } animationFrameRef.current = requestAnimationFrame(() => { const element = containerRef.current if (!element) return const { left, top, width, height } = element.getBoundingClientRect() const mouseX = e?.x ?? lastPosition.current.x const mouseY = e?.y ?? lastPosition.current.y if (e) { lastPosition.current = { x: mouseX, y: mouseY } } const center = [left + width * 0.5, top + height * 0.5] const distanceFromCenter = Math.hypot(mouseX - center[0], mouseY - center[1]) const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone if (distanceFromCenter < inactiveRadius) { element.style.setProperty("--active", "0") return } const isActive = mouseX > left - proximity && mouseX < left + width + proximity && mouseY > top - proximity && mouseY < top + height + proximity element.style.setProperty("--active", isActive ? "1" : "0") if (!isActive) return const currentAngle = Number.parseFloat(element.style.getPropertyValue("--start")) || 0 const targetAngle = (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) / Math.PI + 90 const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180 const newAngle = currentAngle + angleDiff animate(currentAngle, newAngle, { duration: movementDuration, ease: [0.16, 1, 0.3, 1], onUpdate: (value) => { element.style.setProperty("--start", String(value)) }, }) }) }, [inactiveZone, proximity, movementDuration], ) useEffect(() => { if (disabled) return const handleScroll = () => handleMove() const handlePointerMove = (e: PointerEvent) => handleMove(e) window.addEventListener("scroll", handleScroll, { passive: true }) document.body.addEventListener("pointermove", handlePointerMove, { passive: true, }) return () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } window.removeEventListener("scroll", handleScroll) document.body.removeEventListener("pointermove", handlePointerMove) } }, [handleMove, disabled]) return ( <>

0 && "blur-[var(--blur)] ", className, disabled && "!hidden", )} >

) }, ) GlowingEffect.displayName = "GlowingEffect" export { GlowingEffect } [V0_FILE]typescriptreact:file="components/ui/vercel-shader-background.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { cn } from "@/lib/utils" export const VercelShaderBackground = () => { const canvasRef = useRef(null) const [mousePos, setMousePos] = useState({ x: 0.5, y: 0.5 }) const [isClient, setIsClient] = useState(false) const animationRef = useRef() const glRef = useRef(null) const programRef = useRef(null) const bufferRef = useRef(null) useEffect(() => { setIsClient(true) }, []) const createShader = (type: number, source: string) => { if (!glRef.current) return null const shader = glRef.current.createShader(type) if (!shader) return null glRef.current.shaderSource(shader, source) glRef.current.compileShader(shader) return shader } const animate = (time: number) => { const gl = glRef.current const program = programRef.current const buffer = bufferRef.current const canvas = canvasRef.current if (!gl || !program || !buffer || !canvas) return gl.useProgram(program) gl.bindBuffer(gl.ARRAY_BUFFER, buffer) const positionLocation = gl.getAttribLocation(program, "a_position") const timeLocation = gl.getUniformLocation(program, "u_time") const resolutionLocation = gl.getUniformLocation(program, "u_resolution") const mouseLocation = gl.getUniformLocation(program, "u_mouse") gl.enableVertexAttribArray(positionLocation) gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0) gl.uniform1f(timeLocation, time * 0.001) gl.uniform2f(resolutionLocation, canvas.width, canvas.height) gl.uniform2f(mouseLocation, mousePos.x, mousePos.y) gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4) animationRef.current = requestAnimationFrame(animate) } const handleMouseMove = (e: MouseEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() setMousePos({ x: (e.clientX - rect.left) / rect.width, y: 1.0 - (e.clientY - rect.top) / rect.height, }) } const resize = () => { const canvas = canvasRef.current const gl = glRef.current if (!canvas || !gl || typeof window === "undefined") return canvas.width = canvas.offsetWidth * window.devicePixelRatio canvas.height = canvas.offsetHeight * window.devicePixelRatio gl.viewport(0, 0, canvas.width, canvas.height) } useEffect(() => { if (!isClient) return const canvas = canvasRef.current if (!canvas || typeof window === "undefined") return const gl = canvas.getContext("webgl2") || canvas.getContext("webgl") if (!gl) return glRef.current = gl const vertexShaderSource = ` attribute vec2 a_position; varying vec2 v_uv; void main() { v_uv = a_position * 0.5 + 0.5; gl_Position = vec4(a_position, 0.0, 1.0); } ` const fragmentShaderSource = ` precision mediump float; uniform float u_time; uniform vec2 u_resolution; uniform vec2 u_mouse; varying vec2 v_uv; vec3 palette(float t) { vec3 a = vec3(0.8, 0.8, 0.8); vec3 b = vec3(0.8, 0.8, 0.8); vec3 c = vec3(2.0, 2.0, 2.0); vec3 d = vec3(0.263, 0.416, 0.557); return a + b * cos(6.28318 * (c * t + d)); } void main() { vec2 uv = v_uv; vec2 mouse = u_mouse; float pixelSize = 12.0 + sin(u_time * 0.8) * 4.0; uv = floor(uv * u_resolution / pixelSize) * pixelSize / u_resolution; float dist = distance(uv, mouse); float mouseInfluence = 1.0 - smoothstep(0.0, 0.4, dist); vec2 grid = fract(uv * 25.0 + u_time * 0.2); float gridPattern = smoothstep(0.01, 0.04, min(grid.x, grid.y)); float noise = sin(uv.x * 15.0 + u_time * 1.5) * sin(uv.y * 15.0 + u_time * 1.2); noise += sin(dist * 30.0 - u_time * 3.0) * mouseInfluence; vec3 color = palette(noise * 0.8 + u_time * 0.2 + mouseInfluence); color = mix(color, vec3(0.2, 1.2, 1.8), mouseInfluence * 0.6); color *= gridPattern * 0.4 + 0.3; float vignette = 1.0 - distance(uv, vec2(0.5)) * 0.3; color *= vignette; color *= 2.5; gl_FragColor = vec4(color, 1.0); } ` const vertexShader = createShader(gl.VERTEX_SHADER, vertexShaderSource) const fragmentShader = createShader(gl.FRAGMENT_SHADER, fragmentShaderSource) if (!vertexShader || !fragmentShader) return const program = gl.createProgram() if (!program) return gl.attachShader(program, vertexShader) gl.attachShader(program, fragmentShader) gl.linkProgram(program) programRef.current = program const buffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, buffer) const positions = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]) gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW) bufferRef.current = buffer resize() window.addEventListener("resize", resize) canvas.addEventListener("mousemove", handleMouseMove) animationRef.current = requestAnimationFrame(animate) return () => { window.removeEventListener("resize", resize) canvas.removeEventListener("mousemove", handleMouseMove) if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [isClient]) // Removed mousePos dependency to prevent infinite re-renders if (!isClient) { return

} return (

WAV0
Music Studio

{title}

WAV0 Music Studio

{title}

WAV0
Music Studio

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This