First Person Perspective Rendering Chrono-Lock
Side View Seated Interaction Radius

Inspiration

The core inspiration for Chrono-Lock stemmed from a desire to strip away traditional VR hardware abstractions and lean completely into natural human physics. Traditional gaming reliance on plastic controllers can break immersion. By observing how time dilation concepts are traditionally visualized in science fiction, we wanted to build a world where a player could literally reach out and grab a vector of time using nothing but their own hands.

The aesthetic design was inspired by minimalist architectural spaces—stark, high-gloss laboratory horizons that keep the user's cognitive load entirely focused on the floating mechanical puzzle pieces. We aimed to create a comfortable, seated interaction matrix that brings complex temporal mechanics directly to the user's immediate two-foot workspace.

What it does

Chrono-Lock is an immersive, hands-first WebXR puzzle experience where players step into a high-fidelity laboratory environment to solve modular temporal escape rooms. A geometric, highly polished obsidian puzzle apparatus hovers dynamically in front of the player.

By utilizing physical hand gestures, players interact with the objects. When a user executes a precision pinch gesture, the system reads the tracking points to instantly alter the physics loop. Time smoothly decelerates to a complete freeze, causing the obsidian mechanism to halt its kinetic spin and glow with a vibrant neon cyan energy signature. Players must use these time-freezing fields to realign complex shifting vectors and lock down the puzzle sequences.

How we built it

The application was built from scratch using a modern web development framework designed to run flawlessly inside standalone virtual reality headsets.

Graphics & Architecture: Built natively using Three.js to render a high-performance, responsive WebGL 3D environment optimized for mobile chipsets.
Input Array: Implemented the standardized native WebXR Device API to access the Meta Quest camera tracking arrays without relying on bulky external platform wrappers.
Visual Style: Crafted custom low-roughness, high-specularity structural materials to give the environment a polished, clean-room laboratory aesthetic.
Physics Loop: Developed a specialized animation runtime loop inside our main.js that translates vector positions smoothly using a dynamic timeScale factor.

Challenges we ran into

Building an advanced tracking experience natively on the web presented significant system compatibility hurdles. Initially, local engineering machines running legacy operating systems threw strict framework dependency blocks:

dyld: Symbol not found: __ZNSt3__113basic_filebufIcNS...
Expected in: /usr/lib/libc++.1.dylib

To solve this environment block, we dropped heavy engine installations entirely and pivoted to a lightweight web configuration running an optimized runtime matrix.

Additionally, mapping precise physics gestures mathematically required accounting for human hand jitter. To cleanly smooth out tracking data without causing input lag, we implemented a custom Linear Interpolation (LERP) deceleration formula to smoothly step down time values rather than snapping them instantly:

$$ \text{timeScale} = \text{lerp}(\text{timeScale}, 0.0, 0.1) $$

Accomplishments that we're proud of

We are incredibly proud of achieving an ultra-smooth, lightweight codebase that packs complex volumetric lighting, reflective 3D materials, and full 25-joint structural hand tracking tracking points into a package small enough to be compressed into a minimal zip file.

The project successfully passes the strict physical workspace requirements. It remains completely playable within a comfortable, seated radius of:

$$ r \le 1.2\text{ meters} $$

This eliminates the need for room-scale walking and ensures perfect spatial accessibility.

What we learned

This project provided invaluable insights into structural WebGL matrices and tracking pipelines. We learned the intricate layout of the standardized spatial tracking array. The system evaluates real-time distances between tracking indicators on the fly.

To determine a valid temporal pinch gesture, we utilized the 3D distance equation to continually measure the exact Euclidean space between Joint 4 (Thumb tip) and Joint 8 (Index tip):

$$ d = \sqrt{(x_8 - x_4)^2 + (y_8 - y_4)^2 + (z_8 - z_4)^2} $$

When the system detects that the distance satisfies the mechanical limit threshold of:

$$ d < 0.02\text{ meters} $$

The temporal physics engine safely triggers the time-freeze subroutines.

What's next for Chrono-Lock

The foundational architecture for Chrono-Lock is designed to scale dynamically. Next, we intend to introduce multi-layered interaction puzzles where different joints manipulate separate properties of the timeline. For instance, pinching with the left hand might reverse local object velocities while the right hand locks individual vectors in place. We are also looking into expanding our WebGL shader pipelines to introduce fluid, liquid-chrome visual feedback effects that ripple across the laboratory floor whenever time is altered.