DreamStorm

AI-powered vision board that helps you create the life of your dreams through creative visualization. It offers personalized actions, habits, resources, and meditations to achieve your goals.

Comment

Important Note

DreamStorm is a desktop-only experience (for now).

What Inspired Me

DreamStorm represents the intersection of my passion for technology, AI, meditation, and personal development. As someone who has meditated for over ten years while being deeply invested in cutting-edge tech, I was frustrated with the gap between where my life was and where I wanted it to be. Traditional guided meditations never felt truly personal - hearing someone else's voice telling me about generic scenarios that didn't reflect my actual goals and dreams.

I had this idea for years: what if you could see yourself achieving your goals while hearing your own voice provide the guidance? The concept felt like the missing piece in personal development technology, but the tools didn't exist to make it a reality.

Then I saw new AI models like Flux Kontext and ElevenLabs Voice Cloning become available, suddenly making it possible to bring this long-held vision to life. For the first time, I could generate photorealistic images that preserved my facial features while showing me achieving my dreams, and clone my voice to create truly personalized guided meditations. The technology had finally caught up to the idea.

What I Learned

Building DreamStorm taught me invaluable lessons that go far beyond just coding:

I learned about the immense amount of work it takes to make a product feel cohesive and polished. Every interaction, from recording your voice to generating your personalized vision board, needs to flow seamlessly together. The devil is truly in the details - things like handling audio timing precision, managing API costs, graceful error handling, and creating intuitive user experiences across different devices and browsers.

Most importantly, I learned that combining cutting-edge AI technologies can lead to very compelling results that feel magical. When someone sees a photorealistic image of themselves achieving their goals while hearing their own voice guide them through meditation, the emotional impact is profound. It's not just the sum of its parts - it's something entirely new.

This project made me realize we're at the tip of the iceberg in terms of what new experiences are possible with AI. The combination of voice cloning, image generation, and personalized content creation opens up entirely new categories of applications that simply weren't possible even a year ago.

How I Built It

DreamStorm's architecture combines multiple AI systems through a carefully orchestrated technical stack:

Frontend Architecture: Built on Next.js 14 with TypeScript, featuring a responsive canvas-based vision board using Konva.js for smooth pan/zoom interactions. State management uses Zustand for global state and React Context for component-specific state.

AI Image Generation: Integration with Replicate's Flux Kontext Dev model for face-preserving vision board creation, with intelligent prompt engineering via GPT 4.1 Mini and fallback to curated stock imagery.

Audio System: The core innovation is my Tone.js-based audio engine that generates real-time brainwave entrainment. I implemented:

  • 432Hz sine wave foundation for harmonic alignment
  • Binaural beats with true stereo separation
  • Isochronic tones for theta (6-7Hz), alpha (8-12Hz), and gamma (30+Hz) waves
  • Heart coherence rhythm at 60 BPM
  • Professional gain staging with -6dB headroom and master limiting

Voice Pipeline: Multi-step workflow from recording to personalized meditation:

  1. High-quality voice recording with noise suppression
  2. ElevenLabs instant voice cloning with automatic cleanup
  3. Meditation script generation using AI
  4. Text-to-speech conversion optimized for meditation delivery
  5. Real-time audio mixing of voice with brainwave entrainment

Backend Infrastructure: Supabase edge functions handle all AI API integrations, ensuring security and cost control. PostgreSQL with Row Level Security manages user data and meditation content.

Challenges I Faced

Audio Timing Precision: JavaScript timers proved unreliable for audio applications. I solved this by migrating to AudioContext.currentTime for sample-accurate scheduling, enabling professional-quality audio synthesis.

Cross-Browser Audio Compatibility: Different browsers handle AudioContext initialization differently. I implemented graceful fallbacks and proper audio node disposal to prevent memory leaks across platforms.

Voice Clone Cost Management: ElevenLabs API costs can accumulate quickly. I implemented automatic deletion of previous clones, intelligent caching using IndexedDB with SHA-256 keys, and rate limiting to control expenses.

Complex Coordinate Transformations: Building an interactive canvas with pan/zoom while maintaining precise positioning required implementing custom coordinate transformation systems that work across different screen sizes and touch devices.

Modal Positioning on Transformed Canvases: Displaying edit modals over transformed canvas elements required solving complex positioning calculations that account for zoom levels and pan offsets.

WebM Metadata Issues: Browser-recorded WebM files often report Infinity duration. I solved this by implementing dual validation using both timer-based and actual audio duration analysis.

Real-time Audio Mixing: Combining ElevenLabs voice output with Tone.js-generated brainwave tones required implementing professional audio bus architecture with individual volume controls and master limiting.

Memory Management: Audio applications can quickly consume memory. I implemented comprehensive cleanup systems for MediaStreams, AudioContexts, blob URLs, and Tone.js nodes to prevent memory leaks.

What's Next

I'm planning to integrate DreamStorm with other vibecoded projects like CosmicBlueprint.ai and Biohackers/guide to create a holistic personal development ecosystem. One key feature I want to add is connecting people to human coaches for accountability and complement the AI features.

The ultimate goal is to make personal transformation feel inevitable rather than impossible. When you can see, hear, and feel your future self so vividly that it becomes your new reality, achieving your dreams becomes not just possible, but natural.

Built With

  • bolt
  • chart.js
  • dropzone
  • elevenlabs
  • flux-konext-dev
  • framer
  • gpt-4.1-mini
  • idb
  • konva
  • linkpreview
  • lucide
  • next.js
  • phosphor
  • radix
  • react
  • replicate
  • supabase
  • tailwind
  • tone.js
  • typescript
  • zustand
Share this project:

Updates