[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { DynamicIsland } from "@/components/dynamic-island" import { WavyBackground } from "@/components/wavy-background" import { Clock } from "@/components/clock" export default function Home() { const [islandMode, setIslandMode] = useState< "hidden" | "compact" | "call" | "music" | "music-expanded" | "notification" | "charging" >("compact") return (

Dynamic Island Controls

Click on the music player to expand it. Use the volume icon to show volume controls.

) } [V0_FILE]typescriptreact:file="components/wavy-background.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" export function WavyBackground() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions const setCanvasDimensions = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } setCanvasDimensions() window.addEventListener("resize", setCanvasDimensions) // Wave parameters const waves = [ { amplitude: 25, frequency: 0.02, speed: 0.01, color: "rgba(59, 130, 246, 0.2)", phase: 0 }, { amplitude: 15, frequency: 0.03, speed: 0.015, color: "rgba(99, 102, 241, 0.15)", phase: 2 }, { amplitude: 10, frequency: 0.04, speed: 0.02, color: "rgba(139, 92, 246, 0.1)", phase: 4 }, ] // Noise texture const noiseCanvas = document.createElement("canvas") const noiseCtx = noiseCanvas.getContext("2d") if (!noiseCtx) return noiseCanvas.width = 256 noiseCanvas.height = 256 // Generate noise texture const generateNoise = () => { const imageData = noiseCtx.createImageData(noiseCanvas.width, noiseCanvas.height) const data = imageData.data for (let i = 0; i < data.length; i += 4) { const value = Math.floor(Math.random() * 100) data[i] = value data[i + 1] = value data[i + 2] = value data[i + 3] = 10 // Low alpha for subtle effect } noiseCtx.putImageData(imageData, 0, 0) } generateNoise() // Animation loop const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) // Draw gradient background const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height) gradient.addColorStop(0, "#f0f9ff") gradient.addColorStop(1, "#e0f2fe") ctx.fillStyle = gradient ctx.fillRect(0, 0, canvas.width, canvas.height) // Apply noise texture ctx.globalAlpha = 0.05 ctx.drawImage(noiseCanvas, 0, 0, canvas.width, canvas.height) ctx.globalAlpha = 1 // Draw waves waves.forEach((wave) => { wave.phase += wave.speed ctx.beginPath() ctx.moveTo(0, canvas.height / 2) for (let x = 0; x < canvas.width; x++) { const y = Math.sin(x * wave.frequency + wave.phase) * wave.amplitude + canvas.height / 2 ctx.lineTo(x, y) } ctx.lineTo(canvas.width, canvas.height) ctx.lineTo(0, canvas.height) ctx.closePath() ctx.fillStyle = wave.color ctx.fill() }) requestAnimationFrame(animate) } animate() return () => { window.removeEventListener("resize", setCanvasDimensions) } }, []) return

About

Tags

Share

About

Tags

Share

More from papingothegamer

More Templates Like This

About

Tags

Share

About

Tags

Share

More from papingothegamer

More Templates Like This