DreamScape: Your Dreams Become Worlds

An AI-powered platform that transforms any dream description into an explorable 3D world with cinematic visuals, AI narration, and an immersive museum gallery

Comment

Inspiration

Everyone dreams — vivid, strange, beautiful, sometimes terrifying. But dreams fade the moment we wake up. We asked ourselves: What if you could step back into your dream? What if AI could not only remember it, but rebuild it as a living, explorable world?

DreamScape was born from that idea — a platform that bridges imagination and reality by transforming dreams into immersive cinematic experiences users can relive, explore, and share with others.

What We Learned

Generative AI Workflows

We learned how to orchestrate multiple AI systems into a single seamless pipeline, including dream analysis, image generation, cinematic video creation, and narration synthesis. This taught us the importance of:

  • Robust error handling
  • Async task orchestration
  • Progress tracking
  • Graceful degradation

3D on the Web

Building a cinematic 3D dream museum using React Three Fiber pushed us to deeply understand:

  • WebGL rendering optimization
  • Scene graph management
  • Dynamic lighting systems
  • Browser performance balancing

User-Centric Authentication

Implementing secure authentication with per-user dream isolation reinforced the importance of:

  • Clean backend architecture
  • Secure session handling
  • Row Level Security (RLS)
  • Scalable user data separation

Full-Stack AI Integration

Connecting a modern frontend with Supabase, PostgreSQL, Edge Functions, and external AI APIs gave us hands-on experience building a truly AI-native full-stack application.

How We Built It

Frontend

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Shadcn UI

We designed a dark, cinematic interface that feels like entering another dimension.

3D Experience

Using React Three Fiber and Drei, we created:

  • Interactive dream museums
  • Cinematic intro sequences
  • Dynamic camera rigs
  • Immersive gallery-style dream exploration

Backend

We used Supabase for:

  • PostgreSQL database storage
  • Authentication
  • Edge Functions
  • Secure Row Level Security (RLS)

AI Pipeline

The DreamScape AI pipeline combines multiple AI systems:

Dream Input
   ↓
Gemini 2.5 Flash → Dream Analysis
   ↓
AI Image Generation → Dream Concept Art
   ↓
Kling Omni → Cinematic Video Intro
   ↓
Text-to-Speech → AI Dream Narration
   ↓
Interactive 3D Dream Museum

AI Services Used

  • Gemini 2.5 Flash → Symbolic lore, emotional analysis, quest generation
  • AI Image Generation → Dream visuals and environments
  • Kling Omni → Cinematic animated intros
  • Text-to-Speech AI → Immersive dream narration

Database Design

We implemented a secure multi-user architecture using:

  • PostgreSQL
  • Supabase Auth
  • Row Level Security Policies

Each dream is securely scoped to its authenticated user, ensuring complete privacy and isolation.

Challenges We Faced

AI Pipeline Orchestration

Coordinating asynchronous AI tasks such as:

  • Image generation
  • Video generation
  • Narration synthesis

required advanced state management and timeout handling.

3D Museum Performance

Balancing cinematic quality with browser performance forced us to optimize:

  • Lighting systems
  • Geometry complexity
  • Texture loading strategies

Authentication UX

We focused heavily on creating a seamless login experience supporting:

  • Email/password authentication
  • Social login providers
  • Stable navbar rendering without layout shifting

Data Isolation & Security

Ensuring users could only access their own dream archives required careful:

  • RLS policy design
  • Query filtering
  • Backend validation

Vision

DreamScape transforms dreams into living worlds. By combining AI, cinematic storytelling, and immersive 3D experiences, we are building a future where imagination is no longer temporary — it becomes explorable, shareable, and unforgettable.

Built With

  • auth
  • drei
  • edge-functions
  • image-generation
  • kling-omni-video
  • react
  • row-level-security)-framer-motion-(animations-and-transitions)-ai-services:-gemini-2.5-flash
  • tailwind
  • three.js
  • typescript
  • vite
Share this project:

Updates