A hand-illustrated aerial view of the Montreal skyline rendered in WebGL, with a snowy owl perched in the foreground and interactive points of interest scattered across colorful, storybook-style buildings.
A snowy owl is giving you a tour of Montreal. That's the premise. And somehow it works beautifully. MONTREAL is an interactive WebGL experience from Leeroy, the Montreal-based creative agency, and it plays like a love letter to their city disguised as a tech demo. You scroll through a bird's-eye panorama of the skyline, nine points of interest scattered across it, each one unlocking a vignette. The illustrations are all hand-drawn, pulled from the texture of Montreal's actual urban fabric, and the whole thing carries the warmth of a really good picture book. Except the pages move, the owl watches you, and there's a custom cursor that makes you feel like you're holding a quill for some reason.
The stack is Three.js, Angular, GSAP, Lottie, and TypeScript. That's a lot of moving parts, but the result feels light. The custom illustrations sit inside 3D space without any of the usual uncanny disconnect you get when flat art meets WebGL depth. The typography pairing (DaVinci and TAN Waverly) does real narrative work, pushing the experience toward storybook territory while the rendering engine keeps everything feeling alive. Leeroy built this through their internal Playground lab, which they use to let their team experiment outside client constraints. It shows. There's a looseness here, a willingness to let charm lead over spectacle.
Turn your sound on when you visit, poke around the source to see how the illustration layers are composited into the scene, and try to find all nine landmarks. The owl is patient. It'll wait.
- Live Demo: https://montreal.leeroy.ca
- Author: LEEROY (X, Instagram, LinkedIn)