Enter XR

Inspiration

Traditional VR video apps still treat immersive headsets like flat TV screens. You open a player… and watch a rectangle floating in space. There’s no depth, no context, no interaction, and no true feeling of presence.

We asked a simple question:

What if videos weren’t something you watch, but something you enter?

That question led to Enter XR a spatial, portal-based experience that transforms videos into immersive environments enriched with interactive facts, AI-generated highlights, and intuitive hand interactions.

What It Does

Enter XR is a next-generation immersive entertainment experience that turns ordinary videos into explorable 3D micro-worlds.

Key Features

Portal Entry: A glowing mixed-reality portal appears in your room. Walk through it to “enter” the video world. 3D Curved Video Surface: The video wraps around you on a cinematic curved plane for depth and immersion. AI Fact Cards: When interesting moments occur, floating fact cards appear in spatial space beside the video (like the overlays in high-production podcasts). Hotspots & Highlights: Automatically triggered callouts show key moments or details within the scene. Hand-Tracked Controls: Pinch to scrub, wrist menu to toggle modes, hand ray to interact — no controllers required. Universal Video Support: Paste any public video link Youtube or any other video and Enter XR converts it into an immersive spatial experience instantly.

Enter XR is not a video player. It’s a video-world engine.

How We Built It

We built Enter XR using modern WebXR and Meta Horizon technology:

Frontend

Meta Immersive Web SDK (IWSDK)
Three.js + custom shaders for curved video surfaces
WebXR hand tracking API for pinch interactions and spatial UI
HTMLVideoElement for decoding standard MP4/HLS links
CSS3D + texture mapping for hybrid video rendering in VR

Key Systems

Portal System: A procedural ring mesh with glow shaders, animated using time-based displacement and reflection maps. Video Environment: A curved quad generated with parametric geometry + live video texture mapped dynamically. Fact Cards Engine: Simple JSON-driven timeline triggers spatial 3D cards appear at predetermined timestamps. Hotspot Manager: Places floating markers relative to the video plane and animates them into the user’s field of view.

Tools Used

WebXR Emulator for fast testing without a physical headset

Challenges We Ran Into

1. Mapping 2D Video Into 3D Space

YouTube-like players do not allow direct texture access, so we pivoted to supporting public direct video links, using HTMLVideoElement as a dynamic texture.

2. Spatial UI Placement

Fact cards must remain readable, not jitter, and avoid blocking the video. Designing a stable anchor system that floats cards just outside the curved surface took iteration.

3. Hand Tracking Variability

Pinch detection differs across devices. We built:

fallback pointer mode
stable ray interaction layer
distance-based pinch filtering

4. Portal Entry Transition

Creating a smooth animated experience going into and out of the portal required blending shader animation with camera movement without breaking immersion.

5. Performance (60 FPS requirement)

We optimized by:

using lightweight geometry
reducing overdraw
dynamic texture resolution
offloading UI to CSS3D where possible

Accomplishments That We’re Proud Of

We built a complete portal-based immersive video system in under a week.
Hand tracking interactions feel fluid and futuristic.
Fact cards appear exactly like high-production podcast overlays but generated automatically.
The entry/exit portal experience is magical and consistently gets a wow reaction.
We created a new way of consuming videos not watching but stepping inside them.

What We Learned

Spatial UI requires real design thinking flat UI patterns break immediately in XR.
Immersion isn't about complexity, it’s about presence, readability, and simplicity.
AI doesn’t need to be heavy — even lightweight summary models can enhance storytelling.
Hand interactions require redundant pathways (pinch, ray and fallback pointer).
Testing XR interactions without a headset relies heavily on WebXR emulator discipline.