The Aviary
Project Details
The Aviary is a web-based AR escape room created by JAN Scape, a three-person team project. The experience drops players into a black-and-white, hand-drawn studio that wraps around them like a 360° sketch. Using simple taps and spatial movement, players solve a short sequence of puzzles to free a bird and escape the room.
Our goal was to see how a single illustration could become an immersive, spatial AR experience without requiring a separate app. We used A-Frame and WebXR to turn a panoramic drawing into an interactive room that runs in the browser and can be launched from a QR code, making it easy for escape-room fans and content creators to try.
Design challenge
Most AR filters on social platforms are either quick visual gags or one-off effects. They are fun to try once, but they rarely feel like a complete experience or a place you can inhabit. At the same time, traditional escape rooms and puzzle games often demand time, money, and dedicated hardware that casual players or content creators do not always have.
Our challenge was to take the short, shareable nature of filters and combine it with the atmosphere of an escape room. We wanted a small experience that felt like stepping into a sketchbook: easy to access, light on hardware requirements, but still driven by puzzles and story rather than just a visual overlay.
Concept & experience
The Aviary lets players stand inside a hand-drawn bird keeper's room. The environment is built from a single panoramic illustration that is wrapped around the viewer as a 360° space. Objects in the room, like the cage, desk, and door, are modelled in 3D and placed in depth so the space feels layered instead of flat.
Players begin at the entrance, read a short set of instructions, and move through two main puzzles. First they unlock the cage and free the bird, then they follow the bird to find the key that opens the exit. Each interaction is driven by simple screen taps and clear visual and audio cues, so the experience feels playful and responsive even though it runs entirely in the browser.
Constraints
- 14-week semester timeline to go from industry research to a working AR prototype
- Small three-person team balancing illustration, 3D modelling, sound, and development
- Learning A-Frame, WebXR, and local server tools while building the experience
- Need to keep performance high so the room runs smoothly on typical laptops and phones
Scope & Limitations
In scope
- Single AR escape room that can be completed in a few minutes
- 360° illustrated environment with two main puzzles and basic sound design
- Web-based AR using A-Frame and WebXR, hosted on GitHub Pages and launched via QR code
Out of scope (for this version)
- Multi-room story progression or branching puzzle paths
- Advanced analytics, accounts, or save systems
- Native TikTok Effect House deployment, although the concept began in that space
Competitive Analysis & The Gap
We looked at existing TikTok filters, AR mini-games, and browser-based escape rooms. Filters tended to be visually polished but shallow, while many escape games demanded longer sessions or full downloads. There was room for a lightweight experience that combined the immediacy of filters with the atmosphere of a room-scale puzzle.
Feature-rich escape games that offer deep puzzles but require installs, longer play sessions, or paid access. Great immersion, but a high barrier for casual players and content creators.
Typical AR filters or lenses that look fun on camera but only react once or loop a single gag. Easy to use, but little sense of progression, story, or discovery.
Personas
Elias Shah
UX researcher & escape-room enthusiast
Elias is a UX research assistant and dedicated escape-room fan who has completed dozens of rooms across Canada. He loves clever puzzles, theatrical spaces, and environmental storytelling, but has often been disappointed by rushed, overpriced rooms that rely on cheap scares.
Goals
- Find high-quality escape experiences that feel immersive and thoughtfully designed
- Discover virtual games that scratch the escape-room itch without the high cost of physical rooms
- Share good recommendations with his Discord and puzzle-solving friends
- Look for experiences with strong narrative, atmospheric art, and logical puzzles
- Support indie creators experimenting with new escape-room formats and AR experiences
Frustrations
- Local escape rooms that are expensive but offer low production value or weak storytelling
- Rooms that lean on jump scares instead of satisfying puzzles
- Physical props that break, bored actors, or shallow narratives that kill immersion
- Virtual escape games and AR filters that do not feel interactive or immersive enough
Joyce Rivera
Illustrator & content creator
Joyce is a freelance illustrator and part-time content creator who posts on TikTok, Instagram, and YouTube. She uses filters that match her style, give her something to react to, and feel worth sharing with her audience.
Goals
- Make visually interesting content that reflects her art style
- Try filters that spark new ideas or give her story moments to react to
- Engage followers through interactive or narrative-driven effects
- Keep her content feeling fresh across platforms
Frustrations
- Filters that look generic or clash with her aesthetic
- Low-quality visuals or assets that break immersion
- Effects that do not give her anything interesting to perform or respond to
Experience goals
The environment should feel hand-crafted and personal, not generic or sterile.
Puzzles should feel logically connected to the story and space, not arbitrary.
The experience should run smoothly in any modern browser without heavy downloads.
My Process
Research & concept
We began by exploring how AR is used in entertainment and social media, zeroing in on filters that encourage repeat plays and sharing.
- Mapped how short-form filters guide attention and replay value
- Studied browser-based escape games for pacing cues
- Defined The Aviary as a "mini escape room filter" inside a 9:16 frame
- Set constraints to keep the experience short, replayable, and QR-launchable
Worldbuilding & illustration
I developed the visual direction around a black-and-white, storybook-like studio inspired by hand-drawn escape games.
- Drew the full 360° panorama that wraps around the room
- Designed character sprites, UI details, and puzzle props
- Locked a palette of paper white, inkwell black, and soft gold
- Ensured every illustrated surface could translate into AR depth
3D assets & symbols
Working from the illustration, we modelled and textured the interactive objects that give the room depth and clarity.
- Modelled the bird, cage, padlock, key, and key props
- Created symbolic leaf, bird, and sun marks to cue puzzles
- Aligned each model with the illustrated surfaces for seamless placement
- Imported the assets into A-Frame with consistent scale and lighting
Development & interaction
I helped set up the A-Frame scene, configured the 360° environment using Antigravity, and coded several of the core interactions.
- Structured the panoramic scene and camera rig in A-Frame
- Coded tap-based state changes like opening the cage or revealing the key
- Layered audio cues and subtle animation for feedback
- Hosted the prototype on GitHub Pages and launched it with a QR code
Paper Prototypes
Early sketches mapped the layout of the room, the camera framing, and the order of each clue. We tested how the furniture, cage, and exit door should sit inside a 9:16 view so objects stayed legible once wrapped into a 360° environment.
These sketches also helped us plan where interactions would happen, such as which surface the player taps, where the bird lands, and how the key is revealed, before committing to 3D assets or code.
Room flow & puzzles
The final room is structured around a clear two-step flow so players always know what to focus on next. Each puzzle builds on the last, using simple visual cues and taps to guide the experience.
Key Improvements
From flat drawing to 360° room
Initial prototypes used flat, scrollable illustrations. Transitioning to a full 360° environment dramatically increased immersion and made spatial puzzle-solving feel natural. Players could physically "look around" the room, which made hidden clues feel earned rather than arbitrary.
Clearer cues and timing
Early testing revealed players missed critical clues due to unclear visual hierarchy. I introduced subtle glow effects, layered audio cues, and staggered puzzle reveals to guide attention without feeling heavy-handed. This improved puzzle completion rates significantly.
Key Learnings
This project made AR feel more approachable. Working inside A-Frame and WebXR showed how far a browser-based experience can go with the right constraints. I learned how to translate a single illustration into a spatial environment, how to build simple AR interactions on top of it, and how important audio and timing are for making those interactions feel responsive.
I also learned a lot about collaboration. Our team divided responsibilities across research, illustration, 3D modelling, sound, and code, but we kept a shared vision for the room's tone and story. That alignment is what made the final experience feel cohesive rather than like separate pieces stitched together.
Impact
While The Aviary was built as a course project, it became a proof-of-concept for how a single illustration can be turned into an AR escape room. Peers and instructors responded strongly to the atmosphere of the room and the way the puzzles unfold through simple interactions. The project has already become a reference point in our program for web-based AR work and is one of the most complete pieces in my portfolio.
- Demonstrated that a 360° illustrated room can feel immersive using only browser-based AR
- Showcased how small puzzles and clear feedback can carry a short, replayable experience
- Created a foundation that future filters or rooms can build on, using the same visual language
Final Design
The final prototype delivers a compact escape room that feels like stepping into a sketch. Players can scan a QR code to enter the room, solve the two-step puzzle, and experience the full sequence of illustration, 3D assets, audio, and interaction working together.