[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": "15.5.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" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import type React from "react" import { useEffect, useRef, useState, useCallback } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Sparkles, Zap, Star, Volume2, VolumeX, Flame, Heart, Crown, Palette } from "lucide-react" // ─── Types ──────────────────────────────────────────────────────────────────── interface Particle { x: number y: number vx: number vy: number life: number maxLife: number color: string size: number gravity: number alpha: number trail: { x: number; y: number }[] sparkle: boolean } interface Rocket { x: number y: number vx: number vy: number color: string trail: { x: number; y: number; alpha: number }[] type: number exploded: boolean particles: Particle[] } // ─── Explosion definitions ──────────────────────────────────────────────────── interface ExplosionType { name: string icon: React.ComponentType<{ className?: string }> particleCount: [number, number] speed: [number, number] launchSpeed: [number, number] intensity: number colors: string[] pattern: string } const explosionTypes: ExplosionType[] = [ { name: "Classic", icon: Sparkles, particleCount: [80, 110], speed: [4, 11], launchSpeed: [14, 20], intensity: 3, colors: ["#ff6b6b", "#4ecdc4", "#45b7d1", "#feca57", "#ff9ff3"], pattern: "random", }, { name: "Burst", icon: Zap, particleCount: [120, 160], speed: [10, 18], launchSpeed: [18, 26], intensity: 5, colors: ["#ff3838", "#ff9f43", "#feca57", "#ffffff", "#ff6348"], pattern: "radial", }, { name: "Star", icon: Star, particleCount: [60, 80], speed: [6, 14], launchSpeed: [15, 22], intensity: 4, colors: ["#5352ed", "#70a1ff", "#7bed9f", "#ffffff", "#eccc68"], pattern: "star", }, { name: "Willow", icon: Palette, particleCount: [90, 130], speed: [3, 7], launchSpeed: [13, 18], intensity: 2, colors: ["#2ed573", "#7bed9f", "#70a1ff", "#5352ed", "#a29bfe"], pattern: "willow", }, { name: "Ring", icon: Crown, particleCount: [60, 80], speed: [7, 12], launchSpeed: [14, 20], intensity: 3, colors: ["#ff9ff3", "#ff6348", "#ffa502", "#ffffff", "#eccc68"], pattern: "ring", }, { name: "Heart", icon: Heart, particleCount: [80, 110], speed: [4, 9], launchSpeed: [15, 22], intensity: 4, colors: ["#ff6b6b", "#ff3838", "#ff9ff3", "#ffffff", "#fd79a8"], pattern: "heart", }, { name: "Fountain", icon: Flame, particleCount: [140, 200], speed: [3, 7], launchSpeed: [11, 17], intensity: 2, colors: ["#feca57", "#ff9f43", "#ff6348", "#ff3838", "#ffffff"], pattern: "fountain", }, ] // ─── Particle factory ───────────────────────────────────────────────────────── function createParticles(x: number, y: number, explosionType: ExplosionType): Particle[] { const count = Math.floor( explosionType.particleCount[0] + Math.random() * (explosionType.particleCount[1] - explosionType.particleCount[0]), ) const particles: Particle[] = [] const [minSpd, maxSpd] = explosionType.speed for (let i = 0; i < count; i++) { let vx = 0 let vy = 0 const isWhite = Math.random() < explosionType.intensity * 0.04 const color = isWhite ? "#ffffff" : explosionType.colors[Math.floor(Math.random() * explosionType.colors.length)] const size = 1.5 + Math.random() * 2.5 + explosionType.intensity * 0.4 const life = 70 + Math.random() * 60 + explosionType.intensity * 15 const spd = minSpd + Math.random() * (maxSpd - minSpd) switch (explosionType.pattern) { case "radial": { const angle = (Math.PI * 2 * i) / count + (Math.random() - 0.5) * 0.2 vx = Math.cos(angle) * spd vy = Math.sin(angle) * spd break } case "star": { const angle = (Math.PI * 2 * i) / count const arm = Math.floor(i / (count / 5)) % 2 === 0 ? 1.6 : 0.6 vx = Math.cos(angle) * spd * arm vy = Math.sin(angle) * spd * arm break } case "willow": { const angle = (Math.PI * 2 * i) / count + (Math.random() - 0.5) * 0.5 vx = Math.cos(angle) * spd vy = Math.sin(angle) * spd - Math.random() * 3 break } case "ring": { const angle = (Math.PI * 2 * i) / count const ringSpd = spd * (0.85 + Math.random() * 0.3) vx = Math.cos(angle) * ringSpd vy = Math.sin(angle) * ringSpd break } case "heart": { const t = (i / count) * Math.PI * 2 const hx = 16 * Math.pow(Math.sin(t), 3) const hy = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)) const scale = spd * 0.12 vx = hx * scale vy = hy * scale break } case "fountain": { const spread = Math.PI / 2.5 const angle = -Math.PI / 2 + (Math.random() - 0.5) * spread vx = Math.cos(angle) * spd vy = Math.sin(angle) * spd break } default: { // random / classic const angle = Math.random() * Math.PI * 2 vx = Math.cos(angle) * spd * (0.5 + Math.random() * 0.8) vy = Math.sin(angle) * spd * (0.5 + Math.random() * 0.8) } } particles.push({ x, y, vx: vx + (Math.random() - 0.5) * 1.5, vy: vy + (Math.random() - 0.5) * 1.5, life, maxLife: life, color, size, gravity: 0.06 + Math.random() * 0.05 + explosionType.intensity * 0.01, alpha: 1, trail: [], sparkle: Math.random() < 0.12, }) } return particles } // ─── Component ──────────────────────────────────────────────────────────────── export default function FireworksApp() { const canvasRef = useRef(null) const rocketsRef = useRef([]) const animationRef = useRef() const audioContextRef = useRef(null) const isTouchingRef = useRef(false) const touchPosRef = useRef<{ x: number; y: number } | null>(null) const holdTimerRef = useRef>() const holdIntervalRef = useRef>() const selectedTypeRef = useRef(0) const soundEnabledRef = useRef(true) const isAutoModeRef = useRef(false) const autoIntervalRef = useRef>() // UI state (minimal – only what drives re-renders) const [selectedType, setSelectedTypeState] = useState(0) const [isAutoMode, setIsAutoModeState] = useState(false) const [soundEnabled, setSoundEnabledState] = useState(true) // Keep refs in sync with state const setSelectedType = (v: number) => { selectedTypeRef.current = v setSelectedTypeState(v) } const setIsAutoMode = (v: boolean) => { isAutoModeRef.current = v setIsAutoModeState(v) } const setSoundEnabled = (v: boolean) => { soundEnabledRef.current = v setSoundEnabledState(v) } // ── Audio ────────────────────────────────────────────────────────────────── useEffect(() => { try { audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() } catch (_) {} }, []) const playLaunch = useCallback(() => { if (!soundEnabledRef.current || !audioContextRef.current) return const ctx = audioContextRef.current try { const osc = ctx.createOscillator() const gain = ctx.createGain() osc.connect(gain) gain.connect(ctx.destination) osc.type = "sawtooth" osc.frequency.setValueAtTime(150, ctx.currentTime) osc.frequency.exponentialRampToValueAtTime(600, ctx.currentTime + 0.25) gain.gain.setValueAtTime(0.08, ctx.currentTime) gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35) osc.start(ctx.currentTime) osc.stop(ctx.currentTime + 0.35) } catch (_) {} }, []) const playExplosion = useCallback((intensity: number) => { if (!soundEnabledRef.current || !audioContextRef.current) return const ctx = audioContextRef.current try { const bufSize = ctx.sampleRate * 0.6 const buffer = ctx.createBuffer(1, bufSize, ctx.sampleRate) const data = buffer.getChannelData(0) for (let i = 0; i < bufSize; i++) { data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / bufSize, 1.5) } const source = ctx.createBufferSource() source.buffer = buffer const gain = ctx.createGain() gain.gain.setValueAtTime(0.15 + intensity * 0.06, ctx.currentTime) gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.8) source.connect(gain) gain.connect(ctx.destination) source.start(ctx.currentTime) } catch (_) {} }, []) // ── Rocket factory ───────────────────────────────────────────────────────── const launchRocket = useCallback( (x: number, typeIndex?: number) => { const canvas = canvasRef.current if (!canvas) return const type = typeIndex !== undefined ? typeIndex : selectedTypeRef.current const et = explosionTypes[type] const [minL, maxL] = et.launchSpeed // Pure upward velocity – no targetY needed; peak is detected by physics const vy = -(minL + Math.random() * (maxL - minL)) const color = et.colors[Math.floor(Math.random() * et.colors.length)] rocketsRef.current.push({ x, y: canvas.height + 10, vx: (Math.random() - 0.5) * 3, vy, color, trail: [], type, exploded: false, particles: [], }) playLaunch() }, [playLaunch], ) // ── Hold-to-fire helpers ─────────────────────────────────────────────────── const stopHold = useCallback(() => { if (holdTimerRef.current) clearTimeout(holdTimerRef.current) if (holdIntervalRef.current) clearInterval(holdIntervalRef.current) holdTimerRef.current = undefined holdIntervalRef.current = undefined isTouchingRef.current = false touchPosRef.current = null }, []) const startHold = useCallback( (x: number) => { isTouchingRef.current = true touchPosRef.current = { x, y: 0 } // Fire immediately launchRocket(x) // Then continuously after 300 ms holdTimerRef.current = setTimeout(() => { holdIntervalRef.current = setInterval(() => { if (isTouchingRef.current && touchPosRef.current) { launchRocket(touchPosRef.current.x) } else { stopHold() } }, 180) }, 300) }, [launchRocket, stopHold], ) // ── Event handlers ───────────────────────────────────────────────────────── const handleTouchStart = useCallback( (e: React.TouchEvent) => { e.preventDefault() const canvas = canvasRef.current if (!canvas || e.touches.length === 0) return const rect = canvas.getBoundingClientRect() const x = e.touches[0].clientX - rect.left startHold(x) }, [startHold], ) const handleTouchMove = useCallback((e: React.TouchEvent) => { e.preventDefault() const canvas = canvasRef.current if (!canvas || e.touches.length === 0) return const rect = canvas.getBoundingClientRect() if (touchPosRef.current) { touchPosRef.current = { x: e.touches[0].clientX - rect.left, y: 0 } } }, []) const handleTouchEnd = useCallback( (e: React.TouchEvent) => { e.preventDefault() stopHold() }, [stopHold], ) const handleClick = useCallback( (e: React.MouseEvent) => { const canvas = canvasRef.current if (!canvas) return const rect = canvas.getBoundingClientRect() launchRocket(e.clientX - rect.left) }, [launchRocket], ) // ── Auto mode ────────────────────────────────────────────────────────────── useEffect(() => { if (isAutoMode) { const schedule = () => { const delay = 500 + Math.random() * 1200 autoIntervalRef.current = setTimeout(() => { if (!isAutoModeRef.current) return const canvas = canvasRef.current if (canvas) { const x = 60 + Math.random() * (canvas.width - 120) const type = Math.floor(Math.random() * explosionTypes.length) launchRocket(x, type) } schedule() }, delay) } schedule() } return () => { if (autoIntervalRef.current) clearTimeout(autoIntervalRef.current) } }, [isAutoMode, launchRocket]) // ── Main animation loop ──────────────────────────────────────────────────── useEffect(() => { const canvas = canvasRef.current if (!canvas) return const resize = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } resize() window.addEventListener("resize", resize) const ctx = canvas.getContext("2d")! ctx.fillStyle = "#000" ctx.fillRect(0, 0, canvas.width, canvas.height) const loop = () => { // Fade background for trail effect ctx.fillStyle = "rgba(0,0,0,0.12)" ctx.fillRect(0, 0, canvas.width, canvas.height) const rockets = rocketsRef.current const toRemove: number[] = [] for (let ri = 0; ri < rockets.length; ri++) { const r = rockets[ri] if (!r.exploded) { // Physics r.x += r.vx r.y += r.vy r.vy += 0.055 // gentle gravity so rocket climbs high before peak // Trail r.trail.push({ x: r.x, y: r.y, alpha: 1 }) if (r.trail.length > 22) r.trail.shift() // Draw trail for (let ti = 0; ti < r.trail.length; ti++) { const pt = r.trail[ti] const a = (ti / r.trail.length) * 0.9 ctx.globalAlpha = a ctx.fillStyle = r.color const s = 2 * (ti / r.trail.length) ctx.beginPath() ctx.arc(pt.x, pt.y, s, 0, Math.PI * 2) ctx.fill() } // Draw rocket head ctx.globalAlpha = 1 ctx.shadowBlur = 8 ctx.shadowColor = r.color ctx.fillStyle = r.color ctx.beginPath() ctx.arc(r.x, r.y, 3.5, 0, Math.PI * 2) ctx.fill() ctx.shadowBlur = 0 // Explode exactly at velocity peak (vy just crossed zero = highest point) if (r.vy >= 0) { r.exploded = true const et = explosionTypes[r.type] r.particles = createParticles(r.x, r.y, et) playExplosion(et.intensity) } } else { // Update particles let alive = 0 for (let pi = 0; pi < r.particles.length; pi++) { const p = r.particles[pi] if (p.life <= 0) continue alive++ p.x += p.vx p.y += p.vy p.vy += p.gravity p.vx *= 0.992 p.life-- p.alpha = p.life / p.maxLife // Trail p.trail.push({ x: p.x, y: p.y }) if (p.trail.length > 8) p.trail.shift() // Draw trail for (let ti = 0; ti < p.trail.length; ti++) { const pt = p.trail[ti] const a = (ti / p.trail.length) * p.alpha * 0.35 ctx.globalAlpha = a ctx.fillStyle = p.color ctx.beginPath() ctx.arc(pt.x, pt.y, p.size * 0.4, 0, Math.PI * 2) ctx.fill() } // Sparkle flicker if (p.sparkle && Math.random() < 0.25) { ctx.globalAlpha = p.alpha ctx.shadowBlur = 6 ctx.shadowColor = "#fff" ctx.fillStyle = "#ffffff" ctx.beginPath() ctx.arc(p.x, p.y, p.size * 1.8, 0, Math.PI * 2) ctx.fill() ctx.shadowBlur = 0 } // Main dot ctx.globalAlpha = p.alpha ctx.shadowBlur = 4 ctx.shadowColor = p.color ctx.fillStyle = p.color ctx.beginPath() ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2) ctx.fill() ctx.shadowBlur = 0 } if (alive === 0) toRemove.push(ri) } } ctx.globalAlpha = 1 // Remove dead rockets (in reverse so indices stay valid) for (let i = toRemove.length - 1; i >= 0; i--) { rockets.splice(toRemove[i], 1) } animationRef.current = requestAnimationFrame(loop) } animationRef.current = requestAnimationFrame(loop) return () => { window.removeEventListener("resize", resize) if (animationRef.current) cancelAnimationFrame(animationRef.current) } }, [playExplosion]) // ── UI ───────────────────────────────────────────────────────────────────── return (

) }