PLAYABLE WORLDS / 02VR GAME / HAND TRACKING / META QUEST2026

WEBXR / META QUEST / 02

VR TETRIS

CATCH
ROTATE
STACK
VR player facing the glowing VR Tetris board in the Neon Ruins

Catch the shape. Build the light.

DEVELOPMENT SYSTEM / 05

SPATIAL INPUT.
ONE WEB BUILD.

VR Tetris is a browser-native Three.js game built around WebXR sessions, tracked hands and Quest-style controllers. One JavaScript rules model drives desktop testing and immersive play, while a deterministic quality system protects the headset frame budget.

JavaScriptGame + interaction logicTypeScriptApp shell + worker typesNode.jsBuild + automated testsThree.js3D scene + renderingWebGLBrowser graphics pipelineWebXRXR session + spatial inputMeta QuestHeadset + hand trackingHTMLGame document surfaceCSSMenus + desktop overlayReactApplication shellNext.jsWeb application frameworkViteDevelopment + buildTone.jsLive audio graphTeder RuntimeAdaptive game soundtrackCloudflareSecure web deploymentCodexAI development agentGitHubSource + version historyCursorAgentic code editingVisual StudioNative IDE + debuggerVS CodeCode editor + tooling
WHAT MADE THE BUILD DIFFERENT

Hands, controllers and mouse input share the same grab, rotate and placement rules. A live Teder score follows menu, run, level, danger, line-clear and game-over state without duplicating loop voices.

THE GAME / 02

VR Tetris is a spatial block puzzle built for Meta Quest and the immersive web. Open it in the headset browser, catch glowing tetrominoes with tracked hands or controllers, rotate them in space and place them into the board to complete lines inside a monumental neon arena.

KEY FEATURES

01Direct hand-tracking and controller input

02Two-handed spatial block placement

03Three.js neon arena with adaptive quality

04Reactive soundtrack built with Teder

THE FLOWOPEN → CATCH → ROTATE → PLACE
  1. 01OPEN

    Launch the live game in Meta Quest Browser, choose tracked hands or controllers and enter the immersive WebXR session.

  2. 02CATCH

    Reach toward a glowing tetromino and grab it with a hand-tracking pinch or the controller trigger.

  3. 03ROTATE

    Twist the tracked hand in 90-degree steps or squeeze the controller grip to turn the piece.

  4. 04PLACE

    Guide the complete shape into an open gap, release it and clear full horizontal lines before time runs out.

WEBXR GAME / META QUEST / 2026

YOUR HANDS.
THE WHOLE BOARD.

VR Tetris turns spatial block placement into a physical puzzle. Catch glowing pieces, rotate them in space and settle them into the board before the stack closes in.

PLAY VR TETRIS ↗
HOW TO ENTER / 01

OPEN IT
IN THE HEADSET.

Open the game URL in the browser inside your VR headset, choose hand tracking or controllers, then enter the immersive WebXR session.

  1. 01Open Meta Quest Browser.
  2. 02Visit the live game and select an input mode.
  3. 03Press Enter VR and step into the Neon Ruins.
OPEN THE LIVE GAME ↗
VR Tetris start screen with hand tracking and controller mode options
LIVE GAME / START SCREEN

Choose tracked hands or controllers before entering the immersive session.

QUEST BROWSER / WEBXR
SPATIAL PLAY / 02

CATCH. ROTATE.
PLACE.

Pieces appear at both sides of the board. Reach toward a shape, grab it with a pinch or trigger, rotate it into position and release only when the complete piece fits.

GESTURE / 01

REACH.
GRAB.

With hand tracking, pinch a block to catch it. With controllers, use the trigger. Two independent hands let you work from either side of the board.

VR player reaching to catch a glowing tetromino
HAND INPUT / CATCH

Select a floating tetromino directly in space.

PINCH / TRIGGER
GESTURE / 02

TURN.
ALIGN.

Twist the tracked hand in 90-degree steps, or squeeze the controller grip, then guide the full shape toward an open space in the grid.

VR player aligning a glowing tetromino with the game board
SPATIAL INPUT / PLACEMENT

The placement preview confirms when the entire shape can fit.

ROTATE / ALIGN / RELEASE
TWO INPUT SYSTEMS / 03

HANDS OR
CONTROLLERS.

Play naturally with tracked hands, or switch to familiar VR controllers. Both modes use the same board rules, timing and spatial placement system.

HAND TRACKINGPinch to grab · twist to rotate · open to release

CONTROLLERSTrigger to grab · grip to rotate · release to place

First-person hand tracking view inside the VR Tetris neon arena
META QUEST / INPUT

Direct hand tracking makes the board feel like a physical object in front of you.

TWO HANDS / NO CONTROLLERS
NEON RUINS / 04

A BOARD
INSIDE A WORLD.

The game runs inside a monumental neon arena rather than a flat screen. The board, score, side racks and environmental tetrominoes share one spatial interface.

Live capture of the VR Tetris neon arena and game board
LIVE CAPTURE / ARENA

The published WebXR build combines the board, HUD and two-sided piece racks in one view.

THREE.JS / WEBXR
STACK PROTOCOL / 05

FILL THE ROW.
CLEAR THE LIGHT.

Complete a horizontal line to clear it, lift the score and open space for the next shapes. The soundtrack rises with the level and reacts when the stack reaches danger.

A bright completed row clearing from the VR Tetris board
GAME STATE / LINE CLEAR

Complete rows break into light while the adaptive score moves into its next intensity state.

STACK / CLEAR / COMBO
META QUESTWEBXRHAND TRACKINGVR CONTROLLERSTWO-HAND PLAYTHREE.JSADAPTIVE TEDER SCORELIVE IN BROWSER
PROJECT ACCESSWEBXR / META QUEST / LIVE

ENTER THE NEON RUINS

Open the live game in Meta Quest Browser, select hand tracking or controllers and enter VR directly from the page.

PLAY VR TETRIS ↗
BACK TO / PLAYABLE WORLDSPLAYABLE WORLDS←