This is a submission for the Weekend Challenge: Passion Edition.
Live experience: soulscape-ai.vercel.app
Source code: github.com/Sherman95/soulscape-ai

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;
};
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
The diorama engine classifies each result into a physical archetype:
racememorysystemnaturemonumentcosmic
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:
-
CylinderGeometryandConeGeometryfor floating terrain; -
TubeGeometryfor roads and rivers of light; -
TorusGeometryfor portals, memory rings, and orbits; -
BoxGeometryfor towers and circuit systems; -
OctahedronGeometryfor symbolic crystals; -
THREE.Pointsfor 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
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.





Top comments (0)