New Element · Iron Man
Real-time face and hand tracking, in your browser
New Element turns your webcam into a controller. Move your head to explore a 3D sci-fi grid room, then pinch your thumb and index finger to zoom a glowing particle sphere. Everything runs live in the browser with Three.js and Google MediaPipe - no install, no sign-up, and the video never leaves your device.
The experience is a fan tribute to the “new element” laboratory scene from Iron Man 2, rebuilt as a WebGL demo of markerless face and hand tracking on the open web. Loading the interactive experience… If nothing appears, JavaScript may be disabled or your browser may not support WebGL.
How to use it
- Allow camera access when the browser asks. Nothing is recorded or uploaded.
- Move your head left, right, up or down - the camera pans and tilts, and the room parallaxes with you.
- Raise one hand in front of the webcam and spread thumb and index finger to expand the sphere, or bring them together to shrink it.
What it does
- Face tracking - MediaPipe FaceMesh reads facial landmarks each frame and drives the camera perspective of the 3D room in real time.
- Hand tracking - MediaPipe Hands measures the smoothed distance between thumb tip and index tip and maps it to the sphere's scale.
- Hand overlay - a live landmark overlay is drawn on the webcam preview, with highlighted fingertips and connection lines.
- Particle sphere - a glowing tech sphere at the centre of a grid room, post-processed with Unreal Bloom for a cinematic look.
- On-device inference - detection runs client-side through WebAssembly; the webcam stream is never uploaded or stored.
What you need
- A modern desktop or mobile browser with WebGL and camera support - Chrome or Edge recommended.
- A webcam, with permission granted at the browser prompt.
- Even lighting on your face and hand for stable tracking.
Built with
Three.js for WebGL rendering and bloom post-processing, MediaPipe FaceMesh and MediaPipe Hands for landmark detection, React 19 with TypeScript for the interface, and Vite as the build tool.
Questions
Is my webcam video sent to a server?
No. Face and hand detection run entirely on your device through MediaPipe compiled to WebAssembly. No frames are uploaded, recorded or stored anywhere.
Do I need to install anything?
No. It runs in any modern browser with WebGL and camera support. The MediaPipe models are fetched from a CDN the first time the page loads.
Is it free and open source?
Yes. It is free to use, and the source code is published on GitHub under the GNU General Public License v3.0.
Does it work on a phone?
Yes, on modern mobile browsers with WebGL and camera access. On small screens the webcam preview expands to near full width and the 3D canvas fills the visible viewport height.
Why is the tracking not working?
The usual causes are a denied camera permission, another application already using the webcam, poor lighting, or a browser without WebGL support. Reload the page, grant camera access, and make sure your face and hand are well lit and inside the frame.