Fifth Door
Fifth Door started with a simple question: why does walking into the next room in an escape game feel so exciting?
Inspired by that experience, I built a browser-based 3D world where progression itself becomes the challenge. Players navigate using head movement or keyboard input, and the only way forward is remembering the right sequence of spaces.
The goal wasn’t to design complex puzzles, but to recreate that layered feeling of curiosity, one door at a time.
Tool used:
Project Overview
Design Intent
Core Interaction Concept
Interface & Interaction Planning
Process & Development
Technical Framework
Challenges & Iteration
Future Iterations
Design Intent
The primary goal was to create an experience where progression depends on:
• Physical interaction
• Spatial navigation
• Memory of sequence
• Attention and timing
Instead of relying solely on keyboard input, I wanted to introduce a more embodied interaction model through webcam-based movement detection.
Core Interaction Concept
The experience allows users to navigate through a sequence of digital rooms using head movement detected through their webcam.
Users must:
• Move their head to control direction
• Enter rooms in the correct sequence
• Remember progression order
• Restart if the sequence is incorrect
This introduces both physical engagement and memory-based challenge into the interaction.
To maintain accessibility, keyboard controls were implemented as an alternative input method for users without webcam access.
Interface & Interaction Planning
Before development, I mapped out the interaction flow and defined key screen states to structure the experience clearly.
The wireframes explored:
• Entry and onboarding flow
• Camera permission request screen
• Navigation and UI layout
• Sequence validation states (correct / incorrect feedback)
• Success and replay conditions
This planning helped clarify state transitions and feedback mechanisms before implementation.
Process & Development
The project required both spatial structuring and technical problem-solving.
• Designed room sequencing and validation logic
• Structured event-based progression tracking
• Selected and adapted downloadable Blender assets (due to time constraints)
• Exported environments as GLB files
• Integrated scenes using Three.js
• Implemented webcam-based movement detection
• Added keyboard fallback controls
• Iteratively refined interaction responsiveness and pacing
While the 3D models were sourced, the interaction architecture, progression system, and technical integration were fully developed by me.
Technical Framework
Three.js for 3D rendering and interaction
Threshold-based calibration for head movement sensitivity
Sequence validation logic
Webcam input processing
Event-driven state management
Deployment via Vercel
Challenges & Iteration
.
Future Iterations
The current version follows a fixed sequence, which limits replayability.
Future improvements would include:
• Randomized room sequences per session
• Multiple difficulty levels (easy / medium / hard)
• Varied room types with different interaction rules
• Adaptive progression logic
The aim would be to evolve the system into a more replayable and dynamic interaction experience.
Live Experience
View Fifth Door-
(Best experienced on desktop with webcam enabled)
Sequence Validation Logic
The progression system initially failed to reliably track correct room order. I restructured the state management
logic to ensure accurate tracking and reset conditions.
Webcam Detection Instability
Early versions of the camera input were inconsistent. Small movements were either over-detected or ignored, creating a poor user experience.
To improve this, I calibrated detection thresholds and adjusted sensitivity parameters to balance responsiveness and stability.
Fine-tuning these values significantly improved interaction smoothness.
UX Refinement
Initial transitions felt abrupt and unclear. I refined camera behavior, pacing, and feedback states to create a more coherent progression experience.
Back To Projects