[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" import Component from "../alarm-clock-3d" export default function Page() { return } [V0_FILE]typescriptreact:file="alarm-clock-3d.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useRef, useState, useEffect, Suspense } from "react" import { Canvas, useFrame } from "@react-three/fiber" import { OrbitControls, Environment, Text, Float, RoundedBox, Cylinder, Torus, Sphere } from "@react-three/drei" import { EffectComposer, DepthOfField, Bloom } from "@react-three/postprocessing" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import { Clock, Settings, Volume2, VolumeX } from "lucide-react" import type * as THREE from "three" export default function Component() { const [currentTime, setCurrentTime] = useState(new Date()) const [alarmTime, setAlarmTime] = useState("07:00") const [isAlarmSet, setIsAlarmSet] = useState(false) const [showSettings, setShowSettings] = useState(false) const [isAlarmRinging, setIsAlarmRinging] = useState(false) const audioContextRef = useRef(null) const alarmIntervalRef = useRef(null) // Initialize audio context useEffect(() => { audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() return () => { if (audioContextRef.current) { audioContextRef.current.close() } } }, []) // Create powerful alarm sound const createPowerfulAlarm = () => { if (!audioContextRef.current) return const ctx = audioContextRef.current const now = ctx.currentTime // Create multiple oscillators for rich sound const frequencies = [440, 554, 659, 880] // A4, C#5, E5, A5 chord const duration = 0.8 frequencies.forEach((freq, index) => { const oscillator = ctx.createOscillator() const gainNode = ctx.createGain() const filterNode = ctx.createBiquadFilter() oscillator.connect(filterNode) filterNode.connect(gainNode) gainNode.connect(ctx.destination) oscillator.frequency.setValueAtTime(freq, now) oscillator.type = index % 2 === 0 ? "sawtooth" : "square" // Filter for warmth filterNode.type = "lowpass" filterNode.frequency.setValueAtTime(2000, now) // Envelope gainNode.gain.setValueAtTime(0, now) gainNode.gain.exponentialRampToValueAtTime(0.15, now + 0.05) gainNode.gain.exponentialRampToValueAtTime(0.1, now + 0.3) gainNode.gain.exponentialRampToValueAtTime(0.001, now + duration) oscillator.start(now) oscillator.stop(now + duration) }) // Add some noise for urgency const bufferSize = ctx.sampleRate * 0.1 const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate) const data = buffer.getChannelData(0) for (let i = 0; i < bufferSize; i++) { data[i] = (Math.random() - 0.5) * 0.1 } const noiseSource = ctx.createBufferSource() const noiseGain = ctx.createGain() const noiseFilter = ctx.createBiquadFilter() noiseSource.buffer = buffer noiseSource.connect(noiseFilter) noiseFilter.connect(noiseGain) noiseGain.connect(ctx.destination) noiseFilter.type = "highpass" noiseFilter.frequency.setValueAtTime(1000, now) noiseGain.gain.setValueAtTime(0, now) noiseGain.gain.linearRampToValueAtTime(0.05, now + 0.1) noiseGain.gain.linearRampToValueAtTime(0, now + 0.3) noiseSource.start(now) noiseSource.stop(now + 0.3) } useEffect(() => { if (isAlarmRinging) { const playAlarmPattern = () => { createPowerfulAlarm() setTimeout(() => createPowerfulAlarm(), 300) setTimeout(() => createPowerfulAlarm(), 600) } playAlarmPattern() alarmIntervalRef.current = setInterval(playAlarmPattern, 1500) } else { if (alarmIntervalRef.current) { clearInterval(alarmIntervalRef.current) alarmIntervalRef.current = null } } return () => { if (alarmIntervalRef.current) { clearInterval(alarmIntervalRef.current) } } }, [isAlarmRinging]) useEffect(() => { const timer = setInterval(() => { const now = new Date() setCurrentTime(now) if (isAlarmSet && !isAlarmRinging) { const currentTimeStr = formatTime(now) if (currentTimeStr === alarmTime) { setIsAlarmRinging(true) } } }, 1000) return () => clearInterval(timer) }, [alarmTime, isAlarmSet, isAlarmRinging]) const formatTime = (date: Date) => { return date.toLocaleTimeString("en-US", { hour12: false, hour: "2-digit", minute: "2-digit", }) } const stopAlarm = () => { setIsAlarmRinging(false) setIsAlarmSet(false) } return (

{/* Animated background elements */}

{/* Header */}

Vertex Camon Clock

Your colorful wake-up companion

{/* Main Stop Button - Prominent when alarm is ringing */} {isAlarmRinging && (

🚨

ALARM RINGING!

{alarmTime}

)} {/* Settings Panel */} {showSettings && (

Alarm Settings

Current Time

{formatTime(currentTime)}

Set Alarm Time setAlarmTime(e.target.value)} className="font-mono text-lg border-purple-200 focus:border-purple-400" />

{isAlarmSet && (

✓ Alarm set for {alarmTime}

)} )} {/* Footer */}

🌈 Colorful 3D Alarm Clock - Wake up in style! 🌈

) } function Scene({ currentTime, alarmTime, isAlarmSet, isAlarmRinging, }: { currentTime: string; alarmTime: string; isAlarmSet: boolean; isAlarmRinging: boolean }) { return ( <> {/* Enhanced Lighting Setup */} {/* Main Alarm Clock */} {/* Colorful Background Elements */} {/* Environment */} {/* Colorful Ground */} ) } function AlarmClock({ currentTime, alarmTime, isAlarmSet, isAlarmRinging, }: { currentTime: string; alarmTime: string; isAlarmSet: boolean; isAlarmRinging: boolean }) { const clockRef = useRef(null) const glowRef = useRef(null) useFrame((state) => { if (glowRef.current && isAlarmSet) { glowRef.current.material.opacity = 0.4 + Math.sin(state.clock.elapsedTime * 4) * 0.3 } if (clockRef.current && isAlarmRinging) { clockRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 25) * 0.08 clockRef.current.position.x = Math.sin(state.clock.elapsedTime * 20) * 0.15 clockRef.current.position.y = Math.sin(state.clock.elapsedTime * 18) * 0.1 } else if (clockRef.current) { clockRef.current.rotation.z = 0 clockRef.current.position.x = 0 clockRef.current.position.y = 0 } }) return ( {/* Main Clock Body - Gradient colors */} {/* Colorful Screen Bezel */} {/* Digital Display Background */} {/* Time Display - Colorful */} {currentTime} {/* Alarm Indicator */} {isAlarmSet && ( <> {isAlarmRinging ? "🚨 RINGING! 🚨" : `⏰ ALARM ${alarmTime}`} {/* Enhanced Alarm Glow Effect */} )} {/* Colorful Control Buttons */} {/* Colorful Clock Feet */} ) } function ColorfulBackgroundElements() { return ( {/* Rainbow Wristwatch */} {/* Golden Pocket Watch */} {/* Colorful Wall Clock */} {/* Rainbow Scattered Gears */} {Array.from({ length: 12 }).map((_, i) => ( ))} {/* Floating Colorful Spheres */} {Array.from({ length: 6 }).map((_, i) => ( ))} ) }