UNDER MAINTAINENCE

This tool is Updating. Please visit “TOOLS” for More tools

import { useEffect, useRef, useState } from 'react'; import { Play, Pause, Volume2, Mic, MicOff, Maximize2, Minimize2 } from 'lucide-react'; // Live guidance messages shown after user presses play const GUIDANCE_STEPS = [ "Breathe in slowly...", "Hold...", "Now breathe out...", "Let your thoughts pass...", "You are safe in this moment..." ]; // Beautiful profound quotes const QUOTES = [ "“Peace comes from within.” — Buddha", "“You have the right to action, not to the fruits.” — Bhagavad Gita", "“Let yourself be silently drawn by the strange pull of what you really love.” — Rumi" ]; // Whispered Affirmations for Voice Mode const AFFIRMATIONS = [ "You are stronger than this moment.", "This feeling will pass.", "Breathe gently. You are protected.", "Your peace is within you." ]; // Mood Cards Definitions const MOODS = [ { id: 'anxiety', title: 'Anxiety Relief', subtitle: 'Slow your thoughts. Return to calm.', gradient: 'linear-gradient(135deg, #0d3b66, #00F5D4)', baseFreq: 396 }, { id: 'stress', title: 'Stress Relief', subtitle: 'Release tension. Find peace.', gradient: 'linear-gradient(135deg, #2a9d8f, #e9c46a)', baseFreq: 432 }, { id: 'fear', title: 'Fear Release', subtitle: 'Let go of worry. You are protected.', gradient: 'linear-gradient(135deg, #41295a, #2F0743)', baseFreq: 174 }, { id: 'confidence', title: 'Confidence Boost', subtitle: 'Inner strength. Rise above.', gradient: 'linear-gradient(135deg, #f7971e, #ffd200)', baseFreq: 528 } ]; export default function App() { // State Management const [selectedMood, setSelectedMood] = useState(MOODS[0]); const [isPlaying, setIsPlaying] = useState(false); const [voiceEnabled, setVoiceEnabled] = useState(false); const [isFullscreen, setIsFullscreen] = useState(false); const [volume, setVolume] = useState(0.5); // Cycling indexes const [currentGuidanceIdx, setCurrentGuidanceIdx] = useState(0); const [currentQuoteIdx, setCurrentQuoteIdx] = useState(0); // Audio/Visual references const canvasRef = useRef(null); const audioCtxRef = useRef(null); const gainNodeRef = useRef(null); const oscRef = useRef(null); // Quotes cycler useEffect(() => { const quoteInterval = setInterval(() => { setCurrentQuoteIdx((prev) => (prev + 1) % QUOTES.length); }, 12000); return () => clearInterval(quoteInterval); }, []); // Live Guidance cycler (only when playing) useEffect(() => { if (!isPlaying) return; const guidanceInterval = setInterval(() => { setCurrentGuidanceIdx((prev) => (prev + 1) % GUIDANCE_STEPS.length); }, 4500); return () => clearInterval(guidanceInterval); }, [isPlaying]); // Voice mode auto-read affirmations softly when enabled and playing useEffect(() => { if (!isPlaying || !voiceEnabled) return; const speakAffirmation = () => { if ('speechSynthesis' in window) { const affirmation = AFFIRMATIONS[Math.floor(Math.random() * AFFIRMATIONS.length)]; const utterance = new SpeechSynthesisUtterance(affirmation); utterance.rate = 0.8; utterance.pitch = 0.9; utterance.volume = 0.6; window.speechSynthesis.speak(utterance); } }; const interval = setInterval(speakAffirmation, 15000); return () => clearInterval(interval); }, [isPlaying, voiceEnabled]); // Canvas visualizer: slow calm breathing wave useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; let animationFrameId: number; let time = 0; const resize = () => { canvas.width = window.innerWidth; canvas.height = 360; }; window.addEventListener('resize', resize); resize(); const draw = () => { ctx.clearRect(0, 0, canvas.width, canvas.height); // Soft neon turquoise primary glow color const glowColor = 'rgba(0, 245, 212, 0.4)'; ctx.shadowBlur = 15; ctx.shadowColor = '#00F5D4'; ctx.strokeStyle = glowColor; ctx.lineWidth = 3; // Draw flowing sine waves ctx.beginPath(); const waveHeight = isPlaying ? 35 : 15; const speed = isPlaying ? 0.02 : 0.005; for (let x = 0; x < canvas.width; x++) { // Multi-frequency wave for an organic, breathing flow const y = canvas.height / 2 + Math.sin(x * 0.008 + time) * waveHeight + Math.sin(x * 0.015 + time * 1.5) * (waveHeight * 0.5); if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); ctx.shadowBlur = 0; time += speed; animationFrameId = requestAnimationFrame(draw); }; draw(); return () => { window.removeEventListener('resize', resize); cancelAnimationFrame(animationFrameId); }; }, [isPlaying]); // Manage Frequency Sound Synthesis const initAudio = () => { if (!audioCtxRef.current) { audioCtxRef.current = new (window.AudioContext || (window as any).webkitAudioContext)(); const gainNode = audioCtxRef.current.createGain(); gainNode.gain.setValueAtTime(0, audioCtxRef.current.currentTime); gainNode.connect(audioCtxRef.current.destination); gainNodeRef.current = gainNode; const osc = audioCtxRef.current.createOscillator(); osc.type = 'sine'; osc.frequency.setValueAtTime(selectedMood.baseFreq, audioCtxRef.current.currentTime); osc.connect(gainNode); osc.start(); oscRef.current = osc; } }; const handleTogglePlay = () => { const nextState = !isPlaying; setIsPlaying(nextState); // Haptic/vibration feedback simulation if ('vibrate' in navigator) { navigator.vibrate(15); } if (nextState) { initAudio(); if (audioCtxRef.current && audioCtxRef.current.state === 'suspended') { audioCtxRef.current.resume(); } if (gainNodeRef.current && audioCtxRef.current) { gainNodeRef.current.gain.linearRampToValueAtTime( volume, audioCtxRef.current.currentTime + 2 ); } } else { if (gainNodeRef.current && audioCtxRef.current) { gainNodeRef.current.gain.linearRampToValueAtTime( 0, audioCtxRef.current.currentTime + 1 ); } } }; const handleVolumeChange = (e: React.ChangeEvent) => { const vol = parseFloat(e.target.value); setVolume(vol); if (gainNodeRef.current && audioCtxRef.current) { gainNodeRef.current.gain.linearRampToValueAtTime( vol, audioCtxRef.current.currentTime + 0.1 ); } }; // Fullscreen management const toggleFullscreen = () => { if (!document.fullscreenElement) { document.documentElement.requestFullscreen().then(() => setIsFullscreen(true)); } else { if (document.exitFullscreen) { document.exitFullscreen().then(() => setIsFullscreen(false)); } } }; return (

{/* Hidden Voice Toggle in Top Right (for affirmations) */}

{/* Main Container */}

{/* Personal Touch / Opening Subtext */}

This space is just for you.

{/* Emotion Check / Top Text */}