[V0_FILE]typescriptreact:file="app/components/BreathCounter.tsx" isMerged="true" import { motion } from 'framer-motion' const BreathCounter = ({ count }: { count: number }) => { return ( {count} breaths ) } export default BreathCounter [V0_FILE]typescriptreact:file="app/hooks/useTheme.ts" isMerged="true" import { useState, useEffect } from 'react' export const useTheme = () => { const [theme, setTheme] = useState('light') useEffect(() => { const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)') const handleChange = (e: MediaQueryListEvent) => { setTheme(e.matches ? 'dark' : 'light') } setTheme(mediaQuery.matches ? 'dark' : 'light') mediaQuery.addEventListener('change', handleChange) return () => mediaQuery.removeEventListener('change', handleChange) }, []) return theme } [V0_FILE]typescriptreact:file="components/BreathingApp.tsx" isMerged="true" "use client" import { useState, useEffect } from 'react' import { motion } from 'framer-motion' import BreathingVisualization from './BreathingVisualization' import BreathCounter from './BreathCounter' import { useTheme } from '../hooks/useTheme' export default function BreathingApp() { const [isBreathing, setIsBreathing] = useState(false) const [breathCount, setBreathCount] = useState(0) const theme = useTheme() useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.code === 'Space') { setIsBreathing(true) if (!isBreathing) { setBreathCount(0) } } } const handleKeyUp = (e: KeyboardEvent) => { if (e.code === 'Space') { setIsBreathing(false) } } window.addEventListener('keydown', handleKeyDown) window.addEventListener('keyup', handleKeyUp) return () => { window.removeEventListener('keydown', handleKeyDown) window.removeEventListener('keyup', handleKeyUp) } }, [isBreathing]) return (

setBreathCount(prev => prev + 1)} /> {isBreathing ? "Release space to pause" : "Press and hold space to start breathing"}

) } [V0_FILE]typescriptreact:file="components/BreathingVisualization.tsx" isMerged="true" "use client" import { useRef } from 'react' import { Canvas, useFrame, useThree } from '@react-three/fiber' import { motion } from 'framer-motion-3d' import * as THREE from 'three' const BREATH_DURATION = 5.5 // seconds for inhale or exhale const SineWave = ({ isBreathing, onBreathComplete }) => { const meshRef = useRef(null) const timeRef = useRef(0) const breathRef = useRef(0) useFrame((state, delta) => { if (!meshRef.current) return if (isBreathing) { timeRef.current += delta if (timeRef.current >= BREATH_DURATION * 2) { timeRef.current = 0 breathRef.current += 1 onBreathComplete() } } const positions = (meshRef.current.geometry as THREE.BufferGeometry).attributes.position.array as Float32Array for (let i = 0; i < positions.length; i += 3) { const x = positions[i] positions[i + 1] = Math.sin(x + timeRef.current) * 0.2 } (meshRef.current.geometry as THREE.BufferGeometry).attributes.position.needsUpdate = true }) return ( ) } const BreathingCircle = ({ isBreathing }) => { const { viewport } = useThree() return ( ) } const Scene = ({ isBreathing, onBreathComplete }) => { return ( <> ) } const BreathingVisualization = ({ isBreathing, onBreathComplete }) => { return (

) } export default BreathingVisualization [V0_FILE]typescriptreact:file="components/BreathCounter.tsx" isMerged="true" import { motion } from 'framer-motion' const BreathCounter = ({ count }: { count: number }) => { return ( {count} ) } export default BreathCounter [V0_FILE]typescriptreact:file="hooks/useTheme.ts" isMerged="true" import { useState, useEffect } from 'react' export const useTheme = () => { const [theme, setTheme] = useState('light') useEffect(() => { const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)') const handleChange = (e: MediaQueryListEvent) => { setTheme(e.matches ? 'dark' : 'light') } setTheme(mediaQuery.matches ? 'dark' : 'light') mediaQuery.addEventListener('change', handleChange) return () => mediaQuery.removeEventListener('change', handleChange) }, []) return theme } [V0_FILE]typescriptreact:file="app/components/AppStateLabel.tsx" isMerged="true" import { motion } from 'framer-motion' const AppStateLabel = ({ isBreathing }: { isBreathing: boolean }) => { return ( {isBreathing ? "Release space to pause" : "Press space to start breathing"} ) } export default AppStateLabel [V0_FILE]typescriptreact:file="app/components/BreathingText.tsx" isQuickEdit="true" isMerged="true" import { motion, Transition, Variants } from "framer-motion"; interface TextProps { label: string; fromFontVariationSettings: string; toFontVariationSettings: string; transition?: Transition; staggerDuration?: number; staggerFrom?: "first" | "last" | "center" | number; repeatDelay?: number; className?: string; onClick?: () => void; } const BreathingText = ({ label, fromFontVariationSettings, toFontVariationSettings, transition = { duration: 1.5, ease: "easeInOut", }, staggerDuration = 0.1, staggerFrom = "first", repeatDelay = 0.1, className, onClick, ...props }: TextProps) => { const letterVariants: Variants = { initial: { fontVariationSettings: fromFontVariationSettings }, animate: (i) => ({ fontVariationSettings: `${toFontVariationSettings}, 'slnt' -15`, transition: { ...transition, repeat: Infinity, repeatType: "mirror", delay: i * staggerDuration, repeatDelay: repeatDelay, }, }), }; const getCustomIndex = (index: number, total: number) => { if (typeof staggerFrom === "number") { return Math.abs(index - staggerFrom); } switch (staggerFrom) { case "first": return index; case "last": return total - 1 - index; case "center": default: return Math.abs(index - Math.floor(total / 2)); } }; const letters = label.split(""); return ( {letters.map((letter: string, i: number) => ( ))} {label} ); }; export default BreathingText; [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import './globals.css' import { Source_Serif_4 } from 'next/font/google' const sourceSerif4 = Source_Serif_4({ weight: ['200', '300', '400', '500', '600', '700', '900'], style: ['normal', 'italic'], subsets: ['latin'], variable: '--font-source-serif-4', }) export const metadata = { title: 'Guided Breathing Visualization', description: 'A relaxing breathing exercise with visual guidance', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useCallback } from 'react' import BreathingVisualization from './components/BreathingVisualization' import { useTheme } from './hooks/useTheme' export default function Home() { const [isBreathing, setIsBreathing] = useState(false) const theme = useTheme() const toggleBreathing = useCallback(() => { setIsBreathing(prev => !prev) }, []) return (

{}} onToggleBreathing={toggleBreathing} />

) } [V0_FILE]typescriptreact:file="app/components/BreathingVisualization.tsx" isEdit="true" "use client" import { useRef, useEffect, useState } from "react" import { motion, useSpring, useMotionValue, useAnimationFrame, AnimatePresence } from "framer-motion" import ExerciseTimer from "./ExerciseTimer" const BREATH_DURATION = 5.5 // seconds for inhale or exhale const BASE_RADIUS = 3 // base radius of the circle const MAX_RADIUS_MULTIPLIER = 20 // maximum multiplier for the radius const SINE_WAVE_STROKE_WIDTH = 2 const SINE_WAVE_STROKE_COLOR = "#9CA3AF" const EXERCISE_DURATION = 180 // 3 minutes in seconds const BreathingVisualization = () => { const svgRef = useRef(null) const pathRef = useRef(null) const circleRef = useRef(null) const [time, setTime] = useState(0) const [isResetting, setIsResetting] = useState(false) const [elapsedTime, setElapsedTime] = useState(0) const [isBreathing, setIsBreathing] = useState(false) const lastStopTime = useRef(0) const offsetX = useMotionValue(0) const springOffsetX = useSpring(offsetX, { stiffness: 50, damping: 10, restDelta: 0.001, mass: 1.5, }) useAnimationFrame((t, delta) => { if (isBreathing) { setTime((prevTime) => { const newTime = prevTime + delta / 1000 if (newTime >= BREATH_DURATION * 2) { return newTime % (BREATH_DURATION * 2) } return newTime }) setElapsedTime((prev) => prev + delta / 1000) offsetX.set(0) setIsResetting(false) if (elapsedTime >= EXERCISE_DURATION) { setIsBreathing(false) } } else if (!isResetting) { const currentPhase = (time / BREATH_DURATION) % 2 const targetPhase = Math.ceil(currentPhase) * 2 // Always move to the next exhale bottom const difference = targetPhase - currentPhase offsetX.set(difference * BREATH_DURATION) setIsResetting(true) lastStopTime.current = time + difference * BREATH_DURATION } }) useEffect(() => { if (!svgRef.current || !pathRef.current || !circleRef.current) return const updateVisualization = () => { const svgWidth = svgRef.current!.clientWidth const svgHeight = svgRef.current!.clientHeight const centerX = svgWidth / 2 const centerY = svgHeight / 2 const totalTime = time + (isBreathing ? 0 : springOffsetX.get()) const path = generateSinePath(totalTime, svgWidth, svgHeight, centerX, centerY) pathRef.current!.setAttribute("d", path) const { y, radius } = getCircleProperties(totalTime, svgHeight, centerY) circleRef.current!.setAttribute("cy", (y - radius).toString()) // Adjust y to position bottom of circle circleRef.current!.setAttribute("r", radius.toString()) } const unsubscribe = springOffsetX.on("change", updateVisualization) updateVisualization() return () => { unsubscribe() } }, [time, springOffsetX, isBreathing]) const generateSinePath = (time: number, width: number, height: number, centerX: number, centerY: number) => { let path = `M 0 ${height}` for (let x = 0; x <= width; x += 10) { const relativeX = x - centerX const y = Math.sin((relativeX / width) * Math.PI * 2 + (time * Math.PI) / BREATH_DURATION + Math.PI / 2) * (height / 8) + centerY path += ` L ${x} ${y}` } path += ` L ${width} ${height} Z` return path } const getCircleProperties = (time: number, height: number, centerY: number) => { const y = Math.sin((time * Math.PI) / BREATH_DURATION + Math.PI / 2) * (height / 8) + centerY // Calculate radius based on breath cycle const breathCycle = (time % (BREATH_DURATION * 2)) / BREATH_DURATION let radiusMultiplier if (breathCycle <= 1) { // Inhale: grow from 1 to MAX_RADIUS_MULTIPLIER radiusMultiplier = 1 + (MAX_RADIUS_MULTIPLIER - 1) * breathCycle } else { // Exhale: shrink from MAX_RADIUS_MULTIPLIER to 1 radiusMultiplier = MAX_RADIUS_MULTIPLIER - (MAX_RADIUS_MULTIPLIER - 1) * (breathCycle - 1) } const radius = BASE_RADIUS * radiusMultiplier return { y, radius } } const handleToggle = () => { if (!isBreathing) { setElapsedTime(0) setTime(lastStopTime.current) offsetX.set(0) } setIsBreathing((prev) => !prev) } return (

{ if (e.key === "Enter" || e.key === " ") { e.preventDefault() handleToggle() } }} tabIndex={0} role="button" aria-pressed={isBreathing} aria-label={isBreathing ? "Stop breathing exercise" : "Start breathing exercise"} >

{isBreathing && ( )}

) } export default BreathingVisualization [V0_FILE]typescriptreact:file="app/components/ExerciseTimer.tsx" isEdit="true" import type React from "react" import { motion } from "framer-motion" interface ExerciseTimerProps { elapsedTime: number totalDuration: number sineWaveStrokeColor: string isBreathing: boolean } const ExerciseTimer: React.FC = ({ elapsedTime, totalDuration, isBreathing }) => { if (!isBreathing) return null const remainingTime = Math.max(0, totalDuration - elapsedTime) const minutes = Math.floor(remainingTime / 60) const seconds = Math.floor(remainingTime % 60) return ( {minutes.toString().padStart(2, "0")}:{seconds.toString().padStart(2, "0")} ) } export default ExerciseTimer

About

Tags

Share

More from peetzweg

More Templates Like This

About

Tags

Share

About

Tags

Share

More from peetzweg

More Templates Like This