Dream weaver

I dream my painting, and I paint my dream. - Van Gogh AI can paint pixels, but can it paint a dream, weave a story from pure, abstract emotion? Dream weaver, where humans and AI dream together.

Comment

DreamWeaver: Where AI Meets Imagination

DreamWeaver Banner

Inspiration

When I am in mid-school I like to go to board game cafe with my friend on weekend and play game like Dixit. I have always been fascinated by board games that rely on abstraction and shared understanding. The magic in these games lies in the ambiguity of the artwork—images that are just vague enough to mean everything and nothing at the same time.

With the rise of Generative AI, I realized we could take this concept a step further. Instead of playing with a pre-printed deck of cards that players eventually memorize, what if the deck was created fresh every single time, woven directly from the players' own subconscious thoughts?

Thus, DreamWeaver was born. A game where players feed abstract concepts into an AI, which then dreams up a surreal, one-of-a-kind deck of cards for that specific session.

What it does

DreamWeaver is a multiplayer, browser-based storytelling game.

  1. Input Phase: Players enter abstract keywords (e.g., "Melting Clock", "Silent Scream", "Neon Labyrinth").
  2. Generation Phase: The AI takes these keywords and generates unique, surrealist artwork using the Google Gemini API (Imagen 3).
  3. The Game:
    • One player (the Narrator) selects a card from their hand and gives a cryptic clue.
    • Other players select cards from their own hands that best match that clue.
    • All cards are shuffled and revealed.
    • Players vote on which card belongs to the Narrator.
    • Points are awarded based on how many people guessed correctly (but not too many!).

It supports solo play with AI bots or local multiplayer (hotseat/pass-and-play).

How I built it

The work flow is urely based on comunication with AI Studio with gemini3 model. And here is how Gemini said about the technical detail.

I built DreamWeaver as a modern Single Page Application (SPA) to ensure a snappy, app-like experience.

  • Framework: I used Angular v21+ with its latest features: Signals for reactive state management, Standalone Components, and the new Control Flow syntax (@if, @for). This made the state handling incredibly clean and performant.
  • AI Power: The core magic comes from Google Gemini.
    • Gemini 2.5 Flash handles the "Dungeon Master" logic: it generates poetic clues for AI bots, decides which card a bot should vote for, and combines player keywords into cohesive image prompts.
    • Imagen 3 (via imagen-4.0-generate-001) is the artist. It takes the text prompts and generates the actual base64 images used on the cards.
  • Styling: Tailwind CSS allowed for rapid UI development, letting me focus on the "glassmorphism" aesthetic and complex animations without fighting CSS files.

Challenges I ran into

  • Prompt Engineering: Getting the AI to generate images that were "surreal but distinct" was tricky. If the prompts were too simple, the cards looked generic. If they were too complex, they became cluttered. I had to refine the "recipe" logic to blend player keywords in a way that created cohesive artistic visions.
  • State Management: coordinating the game phases (Lobby -> Input -> Generation -> Game Loop) while handling async AI requests and bot behaviors required a robust state machine. Angular Signals proved invaluable here, making it easy to track derived state like "Is the Narrator done?" or "Have all bots voted?".
  • Bot Personality: Making the AI bots feel like "real" players was a fun challenge. I didn't want them to be perfect. I had to tune the prompts so the bots would sometimes give vague clues and sometimes be oddly specific, mimicking the human variance in social deduction games.

Accomplishments that I'm proud of

  • The "Flying Dreamcatcher" Animation: I spent a lot of time on the polish. When a player scores, little dreamcatcher icons physically fly from the card they voted for up to their avatar. It adds a tactile satisfaction to the scoring phase.
  • Seamless AI Integration: The transition from "Input" to "Game" feels magical. You type a word, wait a moment, and suddenly see it visualized as a beautiful card in your hand.
  • Zoneless Angular: The app runs entirely without zone.js, relying on Signals for change detection. This results in a smaller bundle size and better performance.

What I learned

  • Generative AI as a Game Mechanic: AI isn't just for chat bots. It can be a core mechanic that generates content (assets) in real-time, effectively creating infinite replayability.
  • UX for Waiting: AI generation takes time. I learned the importance of "perceived performance"—adding loading bars, "dreaming" animations, and flavor text to keep players engaged while the backend crunches numbers.

What's next for DreamWeaver

  • Online Multiplayer: Currently, it supports local play and bots. I plan to add WebSockets (using Firebase or Socket.io) to allow remote play with friends.
  • Thematic Decks: Allowing users to save their favorite generated decks to a gallery so they can play with them again later.
  • Voice Clues: Enhancing the speech-to-text feature to allow for more immersive storytelling.

Built With

Share this project:

Updates