DEV Community

Cover image for SoulScape AI: Every Passion Leaves a World Behind

SoulScape AI: Every Passion Leaves a World Behind

DEV Weekend Challenge: Passion Edition Submission

This is a submission for the Weekend Challenge: Passion Edition.

Live experience: soulscape-ai.vercel.app

Source code: github.com/Sherman95/soulscape-ai

![SoulScape AI — an emotional world generated from a

What I Built

Passion is rarely just a hobby.

It can be the sound that carries someone back to a room that no longer exists. The discipline required to take a rally corner at full speed. The quiet obsession of turning an empty code file into a working universe.

I built SoulScape AI to make that invisible emotional landscape visible.

The user writes the story behind something they genuinely care about: where it began, what it gives them, what it costs, and why they keep returning to it. From that story, SoulScape AI creates a complete symbolic world:

  • a memorable world name;
  • a dominant emotion and calibrated energy level;
  • terrain, climate, sky, creatures, and symbolic objects;
  • a cinematic origin narration;
  • a shareable Passion Passport;
  • and, most importantly, a living procedural 3D diorama assembled in real time.

This is not an image generator and it is not a decorative sphere with a new color palette. The generated meaning changes the physical grammar of the scene.

A story about rally becomes an elongated floating rock formation with a closed luminous track, dust, arches, flags, and aggressive motion. A story about nostalgic music becomes a quiet circular island with a reflective lake, drifting memory orbs, mist, and slow movement. A story about software becomes a hexagonal system of code towers, circuit rivers, ordered light, and orbital structures.

The result is an emotional atlas: a place where a personal obsession can be seen, heard, revisited, and shared.

Why I built it

Most AI experiences answer a prompt and then disappear into a chat history. I wanted to build something that felt more permanent and personal—closer to a digital artifact than a generated response.

The challenge prompt describes passion as fire: rivalry, devotion, obsession, romance, and the energy that keeps people building. SoulScape AI treats those forces as worldbuilding material.

My intended goal was simple to describe and difficult to execute:

If someone tells the truth about what they love, can software give that feeling a landscape?

Demo

Live application

👉 Open SoulScape AI

You can create a new SoulScape from your own story, or enter one of three curated worlds immediately:

Passion World Direct link
Rally The Dust Circuit Enter world
Music The Lake of Returning Songs Enter world
Software The Compiler Garden Enter world

Three passions, three physical laws

The Dust Circuit is built around determination and competitive fire. Its visual language is directional: a closed rally track, perimeter structures, sharp illumination, electrical weather, high particle velocity, and a world that feels under pressure.

The Lake of Returning Songs uses a completely different composition. The scene is organized around a translucent lake, a ring of memory, soft orbs, circular paths, low fog, and slower camera movement. It is designed to feel remembered rather than conquered.

The Compiler Garden is ordered and architectural: a hexagonal base, geometric towers, a luminous grid, circuit lines, floating blocks, and concentrated orbital motion. The world expresses the particular obsession of building structured systems from nothing.

Code

The complete source is available here:

👉 Sherman95/soulscape-ai on GitHub

The project is built with:

  • Next.js 15 and the App Router;
  • TypeScript;
  • Three.js directly—without React Three Fiber;
  • Google Gemini through @google/genai;
  • ElevenLabs Text to Speech through a protected server route;
  • Supabase for shareable persistent worlds;
  • Framer Motion and Tailwind CSS;
  • Vercel for deployment.

How I Built It

1. Gemini generates meaning, not pixels

Google AI is the narrative and art-direction engine of the project.

Instead of asking Gemini to produce a generic description, I designed a structured worldbuilding prompt that looks for:

  • concrete memories and sensory details;
  • what the passion gives the user;
  • what it costs, repairs, protects, or risks;
  • the emotional contradiction inside the story;
  • physical symbols that can be rendered with procedural geometry;
  • and an energy score derived from the language and stakes—not a random default.

Gemini returns a validated JSON contract containing the world name, emotion, energy, terrain, climate, sky, creatures, symbols, color palette, narration, and quote.

Visual fields are returned with a vocabulary the procedural engine can interpret, while the narration and quote preserve the language of the user's story.

type SoulScape = {
  id: string;
  userInput: string;
  worldName: string;
  dominantEmotion: string;
  passionType: string;
  energyLevel: number;
  terrain: string;
  climate: string;
  sky: string;
  creatures: string[];
  symbols: string[];
  colorPalette: {
    primary: string;
    secondary: string;
    accent: string;
  };
  narrationText: string;
  quote: string;
};
Enter fullscreen mode Exit fullscreen mode

The response is normalized and validated server-side. Invalid colors, missing arrays, malformed JSON, and out-of-range energy values are repaired or replaced safely.

2. A procedural world grammar in Three.js

The most important technical decision was to separate semantic interpretation from rendering:

Personal story
     ↓
Google Gemini — emotional meaning and symbols
     ↓
soulscape-visuals.ts — emotion and energy
     ↓
soulscape-diorama.ts — terrain, climate and world archetype
     ↓
SoulScapeWorld.tsx — direct Three.js rendering
Enter fullscreen mode Exit fullscreen mode

The diorama engine classifies each result into a physical archetype:

  • race
  • memory
  • system
  • nature
  • monument
  • cosmic

Each archetype changes more than color. It controls island silhouette, geometry segments, spatial layout, landmark placement, paths, architectural density, floating fragments, and movement.

The scene is made entirely from lightweight Three.js primitives:

  • CylinderGeometry and ConeGeometry for floating terrain;
  • TubeGeometry for roads and rivers of light;
  • TorusGeometry for portals, memory rings, and orbits;
  • BoxGeometry for towers and circuit systems;
  • OctahedronGeometry for symbolic crystals;
  • THREE.Points for stars and atmospheric particles.

No external models or heavy 3D assets are downloaded.

3. Emotion and energy become motion

The emotional profile affects rotation, particles, lighting, aura, camera movement, and density.

For example:

  • Determination creates firm rotation, ordered fast particles, and strong directional light.
  • Nostalgia slows the world, softens stars, and increases atmospheric diffusion.
  • Obsession concentrates structures, closes orbital rings, and introduces restless motion.
  • Hope raises particles vertically and creates an ascending light language.

Energy changes the scale of that behavior. A low-energy world remains sparse and meditative. A high-energy world gains more structures, denser particles, dramatic lighting, and orbital elements.

4. ElevenLabs gives the world an origin voice

The generated world appears first. Audio never blocks creation.

When the user presses Play Voice, the client requests /api/generate-audio. The server sends narrationText to ElevenLabs using the multilingual text-to-speech model and returns an audio/mpeg response.

The API key never reaches the browser. The frontend manages the response as a Blob, supports Play/Pause, and releases the Object URL when the component unmounts.

If ElevenLabs is unavailable, the written world remains fully usable and the interface shows a quiet, non-blocking fallback message.

5. Supabase makes worlds shareable

Every generated SoulScape is saved immediately to localStorage, then the application attempts to persist it through a protected Next.js API route using Supabase.

This creates a resilient flow:

Generate world
  ├─ Save locally immediately
  ├─ Attempt Supabase persistence
  └─ Navigate regardless of external service status
Enter fullscreen mode Exit fullscreen mode

When someone opens /soulscape/[id], the application tries Supabase first, then curated demos, then local storage, and finally a deterministic fallback world.

That means a judge can open a shared link in another browser, while the experience still survives network or configuration failures.

6. Failure was designed as a product state

Hackathon demos often depend on several external services. I did not want one API outage to erase the experience.

  • Gemini failure → deterministic local world generation.
  • ElevenLabs failure → written narration remains available.
  • Supabase failure → localStorage preserves the generated world.
  • Invalid AI colors → safe palette normalization.
  • Reduced-motion preference → animation intensity is minimized.
  • Component unmount → animation frames, listeners, geometries, materials, renderer, and WebGL context are cleaned up.

Resilience is not hidden infrastructure here; it is part of the user experience.

Prize Categories

Best Use of Google AI

Google Gemini is the core intelligence of SoulScape AI. It does not merely summarize the user's text or decorate a template. It converts an unstructured personal story into a strongly typed symbolic world model that directly controls procedural geometry, atmosphere, motion, color, and narration.

The quality of the final 3D experience depends on Gemini identifying the emotional contradiction and the story-specific symbols correctly. Google AI is therefore not an add-on—it is the bridge between human meaning and the rendering system.

Best Use of ElevenLabs

ElevenLabs turns the generated origin story into a cinematic voice that makes the reveal feel like entering an artifact with its own mythology.

The integration is intentionally user-triggered and server-side. It supports multilingual stories, Play/Pause controls, loading states, Blob-based playback, resource cleanup, and graceful failure. The voice enriches the emotional experience without ever becoming a requirement for it to function.

The hardest part

The hardest part was not generating text or drawing geometry independently. It was designing a reliable translation layer between them.

If the AI said “obsession,” what should physically change? If the story mentioned software, how could that become a place without loading a premade model? How could nostalgia and competition produce scenes with different spatial logic instead of the same world in different colors?

The solution was to build a constrained visual vocabulary and an intermediate procedural grammar. Gemini has creative freedom inside a contract; the renderer has deterministic rules capable of expressing that contract.

That balance—open-ended meaning entering a bounded real-time system—is the idea at the center of SoulScape AI.

What I learned

  • Structured AI output becomes far more powerful when it controls a real system instead of ending as text.
  • Procedural art needs compositional rules, not just randomized objects.
  • Emotional differentiation must affect silhouette, space, motion, and light—not only palette.
  • Audio is most effective when it is optional, contextual, and timed after the visual reveal.
  • External-service fallbacks make a demo feel more trustworthy, not less ambitious.

What's next

I would like to continue developing SoulScape AI into a larger emotional atlas with:

  • more procedural world archetypes;
  • richer symbolic interactions;
  • voice selection based on emotional profile;
  • private collections and revisitable worlds;
  • cinematic camera journeys;
  • and a public gallery where people can explore the many different landscapes created by human passion.

For this weekend, however, I wanted to prove one focused idea:

The things we love already contain worlds. AI can help us enter them.


Thank you for exploring SoulScape AI. If you create a world, I would love to know what passion you gave it.

👉 Launch the live experience

👉 Explore the source code

Top comments (0)