A serene, mobile-first cosmic sanctuary designed to help you release overwhelming thoughts, practice guided rhythmic breathing, mix custom ambient soundscapes, and cultivate daily moments of mindfulness.
In a digital landscape filled with endless feeds, notification badges, and cognitive clutter, Tiny Thoughts was created as an intentional antidote. Most digital tools demand your attention; Tiny Thoughts is designed to restore it.
Built with a commitment to zero friction—no accounts, no sign-ups, no data harvesting, and no ads—Tiny Thoughts provides an immediate, safe digital space where users can step away from daily anxiety, put recurring burdens into perspective, and calm their nervous system through scientifically grounded breathing and ambient sound therapy.
When a thought or burden feels too heavy to carry, the Reflection Journey offers a visual release mechanism:
- Thought Input Stage: Express any lingering worry or distracting thought in an intimate, distraction-free text stage.
- Celestial Transformation: Upon release, your words dissolve into a luminous celestial orb that drifts upward into a deep purple-blue starfield.
- Guided Perspective Shift: Over a gentle 60-second meditation cycle, the orb slowly shrinks into the vast cosmos while thoughtfully curated philosophical reflections appear on screen (e.g., "This thought is temporary," "Life is bigger than this moment," "You are safe here"), helping you detach from anxious loops.
Rooted in the scientifically proven 4-7-8 relaxation technique (4 seconds Inhale, 7 seconds Hold, 8 seconds Exhale, 2 seconds Rest), the breathing sanctuary helps regulate your autonomic nervous system:
- 60 FPS Real-Time Waveform: A continuous, infinite conveyor-belt SVG breathing path generated mathematically in real-time.
- The Living Orb: A glowing celestial orb pulses with bloom lighting as it ascends during inhalation, rests at the summit during breath retention, and glides smoothly down during exhalation.
- Synchronized Audio & Ambience: Integrated with high-precision
requestAnimationFrametiming, subtle phase audio cues, and calming river ambience.
Designed like a luxury hardware mixing console, the Focus Sounds Studio lets you compose your own ambient audio environment:
- 7 Custom Ambient Tracks: Mix any combination of Rain, Ocean Waves, Night Crickets, Wind Leaves, Campfire, Tibetan Singing Bowl, and Deep White Noise.
- Optical Glassmorphism Console: Replaced individual cards with one cohesive, frosted optical glass panel (
backdrop-blur-2xl) featuring subtle top-edge reflections and active row illumination. - Precision Synthesizer Controls: Dedicated hardware-style volume sliders with active bloom glow and responsive circular glass play/pause toggles.
Click any screenshot below to open the full high-resolution retina preview natively:
|
🌿 Welcome Sanctuary (`/`) Cosmic entrance and serene typography 
|
💭 Thought Input Stage (`/`) A quiet, distraction-free space to unload worries 
|
|
🌌 60-Second Reflection Journey (`/`) Watching burdens dissolve into celestial starlight 
|
⭐ Sanctuary Hub & Navigation (`/menu`) Minimalist glass navigation menu 
|
|
🎧 Focus Sounds Studio Console (`/focus-sounds`) Precision multi-track frosted glass audio mixer 
|
🌬️ Guided Breathing Session (`/breathing`) Real-time 60 FPS continuous breathing waveform 
|
tiny_thoughts/
├── public/
│ ├── audio/ # Seamlessly looped ambient audio files (.ogg/.mp3)
│ ├── screenshots/ # High-resolution retina screenshots of live Vercel application
│ └── background.png # Atmospheric mountain silhouette backdrop
├── src/
│ ├── app/
│ │ ├── breathing/ # Active Guided 4-7-8 Breathing Session & continuous SVG waveform
│ │ ├── focus-sounds/ # 7-track Ambient Sound Studio Console & Mixer
│ │ ├── menu/ # Centralized minimal sanctuary navigation menu
│ │ ├── globals.css # Custom oklch theme, safe-area utilities, mobile touch optimizations
│ │ ├── layout.tsx # Root application wrapper & Google Fonts optimization
│ │ └── page.tsx # Main Tiny Thoughts experience (Splash -> Input -> Meditate -> Complete)
│ ├── components/
│ │ └── common/ # Reusable UI components (CosmicCircle, BeginButton, ThoughtInput, Starfield)
│ ├── services/
│ │ └── breathing.ts # Singleton high-precision requestAnimationFrame audio engine
│ ├── constants/ # Curated ambient sounds, philosophical reflections, star particle configs
│ └── utils/ # Styling utility helpers (cn)
└── README.md # Premium project documentation
Rather than treating mobile devices as an afterthought, Tiny Thoughts was architected with a strict no-scrolling viewport philosophy:
- Every page is mathematically proportioned to fit 100% inside both desktop viewports and mobile phone screens (
svh/100vh). - Incorporates CSS env-variables (
pt-safe,pb-safe) to support iPhone dynamic islands, notches, and rounded screen cutouts. - All interactive touch targets exceed Apple & Google accessibility guidelines (
≥44px), and text inputs use a minimum font size of16pxto prevent automatic zoom on iOS Safari.
Tiny Thoughts avoids muddy RGB/HSL blends by utilizing modern OKLCH perceptual color palettes in Tailwind CSS v4:
- Delivers rich, vibrant purple-blue cosmic gradients (
from-purple-500/18 via-indigo-500/12 to-purple-900/10) that maintain high visual accessibility and contrast. - Combines multi-layered backdrop blur filters (
backdrop-blur-xl,backdrop-blur-2xl) with specular top-edge border highlights to produce authentic optical glassmorphism.
- Animation Performance: All animations leverage GPU-accelerated CSS properties (
transform,opacity) via Framer Motion, ensuring buttery-smooth 60 FPS transitions without layout thrashing. - Audio Engine: The
audioServicesingleton orchestrates HTML5 Web Audio API nodes with automatic volume ducking, seamless audio track looping, and zero-latency audio cues.
| Technology | Role | Purpose & Implementation |
|---|---|---|
| Next.js 16 | Application Framework | Modern App Router architecture, Server/Client Component optimization, and Turbopack bundler |
| React 19 | Core UI Library | Declarative UI components, custom hooks, and reactive state management |
| TypeScript | Static Typing | Strict end-to-end type safety, clean interface contracts, and zero runtime type errors |
| Tailwind CSS v4 | Styling & Design System | Utility-first styling, OKLCH color palettes, custom slider utilities, and responsive design |
| Framer Motion | Declarative Animations | Silky-smooth stage transitions, spring physics, and animated celestial particles |
| HTML5 & Web Audio API | Audio Processing | Low-latency audio playback, synchronized breathing phase cues, and multi-track mixing |
| Lucide React | Precision Iconography | Crisp, scalable SVG icons tailored to the luxury audio studio aesthetic |
| Vercel | Edge Deployment | Production serverless hosting, edge caching, and automated CI/CD pipeline |
You can run Tiny Thoughts locally on your machine in under two minutes:
- Node.js: v18.17.0 or higher
- Package Manager:
npm,pnpm, oryarn
git clone https://github.com/sujalvk888/tiny_thoughts.git
cd tiny_thoughtsnpm installnpm run devOpen http://localhost:3000 in your browser to enter the local sanctuary.
# Create an optimized production static/dynamic build
npm run build
# Start the production server locally
npm startI am constantly looking for ways to make Tiny Thoughts an even more calming sanctuary. Upcoming planned features include:
- Custom Reflection Cycle Intervals: Allow users to toggle between 30-second, 60-second, and 3-minute deep reflection meditation cycles.
- Expanded Breathing Patterns: Add support for Box Breathing (
4-4-4-4) for stress relief and Coherent Heart Breathing (5.5-5.5) for focus. - Offline Progressive Web App (PWA): Installable PWA support so users can access their breathing sessions and focus sound studio anywhere without an internet connection.
- Personalized Sanctuary Color Themes: Optional user-selectable ambient themes including Aurora Emerald, Deep Twilight, and Solar Amber.
- Optional Gentle Voice Guidance: Ambient, whispering audio cues to guide inhalation, retention, and exhalation without needing to watch the screen.
Contributions from developers, designers, and mindfulness practitioners are warmly welcomed! If you have suggestions for improving accessibility, adding new soothing ambient soundscapes, or refining the animations:
- Fork the Repository on GitHub.
- Create a Feature Branch:
git checkout -b feature/AuroraSanctuaryTheme
- Commit Your Changes:
git commit -m "feat: add Aurora Emerald sanctuary color theme" - Push to Your Fork:
git push origin feature/AuroraSanctuaryTheme
- Open a Pull Request describing your enhancement.
Distributed under the MIT License. See LICENSE for full legal text.
You are free to use, modify, and distribute this project for personal or educational purposes. If you build upon Tiny Thoughts, a link back to this repository is always appreciated!
Built with care to create daily moments of calm, reflection, and mindfulness.
🌿 Pause. Reflect. Breathe.