For this project, our team — JAN Scape (Jorge, Avilenne, and Natasha) — set out to create a conceptual escape room experience using augmented reality. We developed not only the project itself, but also the JAN Scape brand identity, including our name, logo references, team positioning, and a monochrome visual direction with subtle gold accents.

​

The objective was to transform hand-drawn illustrations into an immersive, browser-based AR world that users could explore and escape from.

​

The Aviary is built around the theme “Escape the Drawing,” blending traditional sketch aesthetics with interactive puzzle mechanics. The visual identity uses IreneFlorentina as the primary font and Gochi Hand as the secondary, inspired by a black-and-white Japanese café line-art aesthetic.

​

Process

Before production, we created the JAN Scape brand, representing our collaborative strengths in illustration, sound, and interaction.
This included:

• The name JAN Scape.

• Brand identity: black-and-white with gold accent.

• Defining our project tone: atmospheric, handcrafted, and slightly surreal.

This became the foundation for The Aviary’s creative direction.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

 

 

We then examined WebXR precedents, AR interactions, and how hand-drawn illustration could translate into 3D space while maintaining the charm of 2D lines. Our goal was to let players step inside a drawing without losing the illustrated texture.

​

To ensure accessibility, we built the experience as a web-based AR escape room, hosted on GitHub Pages and launched through a QR code.

​​​

Visual and Technical Development

I developed several 3D components essential to puzzle solving:

• Bird

• Cage

• Key

• Padlock

The base models were created in Tinkercad, while Tom refined and expanded the models in Maya (portfolio linked below).

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

 

 

I built the full puzzle system and interactions using JavaScript within A-Frame. Avi provided the background setup at the start of the project, and I implemented the room logic, triggers, and object interactions from that foundation.

​

Experience Flow

The Aviary is structured as a short, three-step escape sequence:

1. Entrance

   • Users enter the illustrated room, read instructions, and listen to atmospheric sound selected by Avilenne.

2. Puzzle 1 — The Bird Cage

   • Users find a locked cage marked by the symbols: leaf, sun, bird. Interacting with the padlock reveals the first solution.

3. Puzzle 2 — The Bird in Flight

   • The freed bird appears elsewhere in the space. Users must locate it in AR and retrieve the key on its foot.

4. Exit

   • The key unlocks the door, completing the escape. A final screen congratulates users on escaping the drawing.

​​

​

​

​

​

​

​

​

​

​​

​

​

​

​

​

 

 

 

The puzzles prioritize clarity, strong visual cues, subtle audio feedback, and a consistent narrative flow. Every interaction is designed to feel intentional and meaningful, balancing logical puzzle-solving with visually engaging moments that guide players naturally through the experience.

​

Final Work

The experience supports smartphones and tablets with gyroscopes on both iOS and Android. The complete prototype includes:

• A functioning AR environment hosted on GitHub Pages

• Modeled and animated 3D assets

• Spatial audio and sound effects

• Illustrated environment art

• A short promotional ad created by Jorge

• A puzzle system coded end-to-end, including triggers, interaction zones, and object states

​

​

​

​

​

​

​

​​

​

​​

​

​

​​

​

​

​

​

​

Impact​​

The Aviary demonstrates how AR can bridge traditional illustration and interactive experience design. It highlights:

• How hand-drawn visuals can be transformed into immersive spaces

• The potential of WebXR as an accessible medium for escape rooms

• A research-driven approach to designing for puzzle-oriented and visually driven audiences

• Our team’s ability to combine art, code, sound, and narrative into a cohesive concept

 

The project showcases how low-cost, browser-based AR can deliver meaningful interactive experiences without expensive hardware or studio-level budgets.

​

Escape the puzzle yourself here!

​

Contributing Creatives

This project was a fully collaborative effort, built on the combined strengths of our team, JAN Scape. Each of us contributed a distinct skill set that shaped The Aviary into a cohesive, immersive AR experience. I developed the 3D models, interaction logic, and full puzzle system, while Avilenne crafted the hand-drawn illustration that defined the atmosphere of the room. Jorge created the promotional ad that captured the tone of the experience.

​

Although the core AR build and technical implementation showcased here were created by me, the project would not exist in its current form without the artistic direction my teammates brought. Together, we built not just an escape room, but a unified brand, JAN Scape, with its own identity, tone, and aesthetic. Our collaboration ensured that The Aviary wasn’t only functional, but visually consistent, emotionally engaging, and grounded in a clear, immersive concept.

 

We also had additional 3D support from Thomas Stushnoff, whose Maya expertise helped refine key models used throughout the escape room.​​