Chrono-Tactile: Hands-First 4D WebXR Spatial Optics Engine

A contactless WebXR spatial puzzle engine blending Cauchy chromatic dispersion with 4D temporal rewinds and an autonomous 3-tier AI Chrono-Architect solver for Meta Quest 3.

Comment

Inspiration

What it does

How we built it

Challenges we ran into

💡 Inspiration

Most VR puzzle games still treat hand tracking as an afterthought—merely emulating physical controller grips or laser pointers. We asked a foundational question: What if spatial interaction felt completely natural without physical hardware, relying purely on optical physics, pseudo-haptic audio-visual resonance, and temporal manipulation?

Chrono-Tactile was engineered from the ground up for the Meta VR Start Developer Competition 2026 to push the boundaries of pure WebXR and contactless spatial immersion on Meta Quest 3.

✨ What It Does

Chrono-Tactile places the player before an interactive holographic tabletop where photons, crystals, and time converge:

  • Cauchy Chromatic Dispersion: Monochromatic white laser beams split into precise RGB vectors (#ff3366, #00ff88, #33aaff) upon entering Crown (IOR 1.54) and Diamond (IOR 2.42) optical prisms.
  • 4D Chrono-Dial (Time Dilation): Players scrub reality between -1.0x REW (rewinding past beam paths), 0x STASIS (freezing photons mid-flight), and 1.0x REAL, allowing players to reposition optical apertures through frozen light corridors.
  • Autonomous AI Chrono-Architect: Powered by a 3-tier cascade (Nebius Nemotron-4 340B, Google Gemini 1.5 Flash fallback, and local deterministic regex), the AI provides real-time spatial hint vectors, executes multi-step optical alignments, and generates procedural sandbox puzzles on demand.
  • Seated-First Ergonomic Horizon: Designed within a comfortable 0.6m reach envelope with magnetic snapping (0.14m proximity lerp) and acoustic micro-haptics (65Hz sub-bass thump on pinch, 1200Hz chime on snap).
  • 5 Progressive Stages + Infinite Sandbox: From simple dual-beam reflections to complex chromatic multi-receiver routing, plus an unrestricted sandbox to build custom optical experiments.

🛠️ How We Built It

  • Frontend & WebXR Core: Next.js 15 (App Router), Three.js, React Three Fiber, and WebXR Device API using native hand-joint meshes.
  • Optics & Dispersion Engine: Custom WebGL raycasters simulating Snell's law of refraction, total internal reflection (TIR), and Cauchy wavelength equations.
  • 3-Tier AI Spatial Cascade: Serverless Next.js edge route orchestrating Nebius Nemotron-4 340B for complex spatial reasoning, failing over seamlessly to Gemini 1.5 Flash, with an air-gapped local parser ensuring zero downtime.
  • Audio Synthesis: Web Audio API procedural oscillator engine synthesizing acoustic feedback dynamically without heavy audio asset loads.

🛡️ The "Take It Away" Test Compliance

  • Take away controllers: Chrono-Tactile is strictly controller-free, built 100% for index-and-thumb optical pinch mechanics.
  • Take away API connectivity: If offline or token-limited, Tier 3 rule-based parser immediately handles hint generation and physics verification.
  • Take away physical space: Fully playable seated on a sofa within a compact 0.6m desk radius without boundary recalibration.

⚡ Challenges We Ran Into

Balancing dynamic multi-bounce laser raycasting with additive bloom passes on Meta Quest’s mobile Snapdragon chipset while holding a rigid 90 FPS was challenging. We solved this by lowering cylinder radial segments on mobile XR, culling unnecessary overdraw passes, and optimizing collision spatial hashes.

🏆 Accomplishments That We're Proud Of

  • Achieved zero-latency, rock-solid 90 FPS performance on the Meta Quest 3 browser.
  • Built a complete, self-healing 3-tier AI pipeline that guarantees sub-second spatial suggestions.
  • Crafted a rich 5-stage progression complemented by an Infinite Procedural Sandbox Mode.

🔮 What's Next for Chrono-Tactile

  • WebXR Colocation Multiplayer: Real-time multi-user optical puzzle solving over WebRTC.
  • Mixed Reality (MR) Passthrough Anchoring: Projecting the chronotable directly onto real-world desks using WebXR Plane Detection. ## Accomplishments that we're proud of

What we learned

What's next for Chrono-Tactile: Hands-First 4D WebXR Spatial Optics Engine

Built With

  • gemini-1.5-flash
  • meta-quest-3
  • nebius-ai
  • nemotron-4-340b
  • next.js-15
  • react-three-fiber
  • three.js
  • typescript
  • web-audio-api
  • webxr
Share this project:

Updates