Living Canvas cover image

Metadata

Sector

  • Developer Tooling

Scope

  • Development

Technologies

  • Angular
  • Phaser
  • Gemini
  • Imagen
  • Veo
  • Firebase Hosting

Living Canvas

Developed in close collaboration between Google and Monogram for Google I/O 2025, Living Canvas is a fully playable, AI-powered web game that brings generative creativity to life. This open-source experience showcases how Gemini, Imagen, and Veo can be orchestrated with Angular, PhaserJS, and Firebase App Hosting to empower developers building with AI.

Living Canvas cover image
[@portabletext/react] Unknown block type "summaryImage", specify a component for it in the `components.types` prop
Case study image 0

Think outside the lines

Each level begins with the simple goal of getting the key to the keyhole, but the path is entirely up to the player. By drawing objects infused with traits like gravity, magnetism, buoyancy, or fire, the challenge is to creatively manipulate these traits to guide the key without destroying it. Whether it’s a magnet, rain cloud, or bolt of lightning, every sketch becomes a playful experiment in physics and problem-solving; turning AI into a collaborator and more than just a tool.

The creative stack

Angular provides a solid foundation for managing UI and state, while PhaserJS handles the dynamic physics and drawing mechanics that make gameplay feel fluid and responsive. Gemini, Imagen, and Veo each bring unique generative capabilities by drawings into objects and text into actions. Firebase App Hosting ties it all together, offering seamless deployment, live updates, and low-latency performance around the globe. Together, these tools form a flexible blueprint for building AI-powered experiences that feel both magical to users and manageable to developers.

Case study image 1
Case study image 0

Pick your palette

Each puzzle in Living Canvas begins with a scene generated by Gemini, with players able to toggle between styles like realistic, cartoon, pixelated, and even reveal the underlying mask used to create the background, offering developers insight into the world’s structure. The selected style carries through to all drawn objects, ensuring that everything from cars to clouds matches the chosen scene and highlights how generative models can adapt the overall environment in real time.

For builders, by design

Published in the Google for Developers Solutions Catalog, this project ultimately showcases what’s possible when cutting-edge AI models are combined with modern web technologies. Designed to be explored, remixed, and extended, the project gives developers a hands-on starting point for building their own AI-powered experiences. Whether you're experimenting with generative art, dynamic physics, or interactive storytelling, Living Canvas serves as an open invitation to build creatively starting with with Gemini, Imagen, and Veo.

Case study image 1