8c:I[903690,["/chat-static/_next/static/chunks/1j0feqpmh6fhf.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/30d-un2oicmhe.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0_e8e66vbc81m.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0titma9j-a7ar.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/2ibwxl4ivr8yr.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0iy7dg8hl1oew.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/00pyugee8ly1v.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0xwyo-vptg1nc.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/112qjy1w8koap.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0sx9749urv_93.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/10gppqriqmn8w.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/2jnp9xm5999w6.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0r29it158n54m.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8"],"ExplicitChatIdProvider"] 8d:I[838238,["/chat-static/_next/static/chunks/1j0feqpmh6fhf.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/30d-un2oicmhe.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/00c0bu24wji78.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/2druaqheowhl8.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0_e8e66vbc81m.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/2gyzl_dalq47j.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0sex0gcwdsmjy.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0wkge2f3s0f22.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1ggzqs8-kdl22.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0rrc9lo-bkkh5.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1j5k8gvtw8gdc.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/42mjea_hxrwdp.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0a4mwgsvj_bqu.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1t2vvxh4dupb4.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0titma9j-a7ar.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1ovy71-w2povn.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/05vo5x924wz4s.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/37rh4z4c9595s.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0hms8tz4_m27c.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/332d35_pah0kr.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/2ibwxl4ivr8yr.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1j9njtdk43kba.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1idn80rtjcasd.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0iy7dg8hl1oew.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/2nl7z8xw_3un6.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1mo0iq2atp502.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/3-9165k65ag24.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/326ugcf3n9jpc.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/00pyugee8ly1v.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/046fqcvlcxx_w.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0xwyo-vptg1nc.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/1pr8_b61w-4h9.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/112qjy1w8koap.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/3usbrh3-7_sgf.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/31wev-p231v4h.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0sx9749urv_93.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/10gppqriqmn8w.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/2jnp9xm5999w6.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/02buq-_-_ooco.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/3ec3uj44xo5pu.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/013l2updr-opq.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8","/chat-static/_next/static/chunks/0r29it158n54m.js?dpl=dpl_7exRX8TegNrbfA92ziF5fWB6X6G8"],"SWRDataProvider"] 8e:T8932,[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