CREATIVE / AI STORYTELLING
Dream2World
Turning dreams into places to explore.
Personal project · In progress
- Type
- CREATIVE · AI · 3D
- Stack
- React
- TypeScript
- Tailwind CSS
- Framer Motion
- Three.js
- Next.js App Router (Vinext)
- Vite
- Cloudflare Workers
- Supabase
- OpenAI API
- Web Audio API
- Source
- GitHub
A personal project I’m building just for fun — immersive web design, creative storytelling and AI, still growing.
p. 01 — the question
What if a dream could become somewhere you return to?
Dream2World is a personal creative project that turns descriptions of dreams into imaginative worlds with landscapes, characters, stories, and places to discover. I built it for fun, to experiment with immersive web design, creative storytelling, and AI integrations.
Dreams leave fragments behind — a strange city, an unfamiliar person, a landscape that feels impossible yet familiar.
p. 02 — from fragments to a world
Not a paragraph. A small fictional world.
Instead of presenting a dream as one paragraph or one image, Dream2World organizes it into locations, characters, symbols, story fragments and an overall atmosphere.
The aim: make it feel like opening a doorway into a memory.
p. 03 — describe a dream
One box, one button, a few examples to start.
The homepage keeps the main interaction simple. Example prompts help when a blank box feels like a barrier, and an animated sequence — understanding the world, creating locations, finding characters, connecting symbols — builds anticipation. Try the paper version:
your world will appear here
p. 04 — the world explorer
Six tabs, one dream.
- Maplocations on a stylized map
- Characterswho they are and how they connect
- Symbolsthe things that keep coming back
- Storyfragments to discover
- Atmospheremood, palettes, optional ambient sound
- Interpretationa creative reading — a reflection, not a diagnosis
p. 05 — the design challenge
Cinematic, but still easy to use.
Large fantasy landscapes, dark backgrounds, soft lighting and luminous accents set a mysterious, inviting mood. But a rich background can’t cost readability.
Each part of the world gets its own space, the controls stay consistent and the primary actions stay visible — exploration without absorbing everything at once.
p. 06 — motion & sound
Atmosphere without a game engine.
Framer Motion handles entrances, Three.js a subtle particle atmosphere, and pointer movement adds depth. The optional soundscape synthesizes an ambient chord with the Web Audio API. Reduced-motion preferences are respected, and particles stop drawing when the tab is hidden.
a chord in the same spirit, made on this page:
p. 07 — gallery, archive & universe
Dreams that find each other.
A gallery of featured worlds, searchable by title, mood or symbol, and a personal Dream Archive saved in the browser — no account needed to try it.
The Dream Universe view connects saved dreams that share symbols: an early look at how separate dreams could form a collection of recurring ideas.
p. 08 — under the hood
Works without keys. Honest about what’s live.
p. 09 — where it is now
Built for fun, still being dreamed up.
Dream2World brings together frontend development, visual storytelling, interaction design and creative technology. The challenge is making artwork, transitions, sound and writing share one atmosphere while staying simple to navigate.
Next: better personalized generation, wider exploration, and more meaningful links between dreams.
- Creative preview of the full flow
- World exploration & search
- Local saving & Dream Universe
- OpenAI generation — needs config & validation
- Supabase cloud archive — needs config
- Deeper, more varied worlds
— E.H.
Use the arrows, swipe, or the tabs to turn pages. Grab the red pen to mark things up.
{
"TypeScript",
"React 19",
"vinext",
"Vite",
}Gamifying the debugging experience.
