Gesture / Field

An interactive 3,000-particle sphere controlled by hand gestures through your webcam.

The experience uses MediaPipe Hands in the browser and includes a pointer fallback for devices without camera access.

Features

• 3,000 particles arranged as a 3D sphere
• Single-hand movement to position the sphere
• Single-hand movement also influences sphere rotation
• Pinch-and-hold charging interaction
• Releasing a pinch explodes the particles and reforms the sphere
• Two-hand distance controls sphere scale
• Finger count selects the sphere's color palette
• Optional webcam video background
• Fullscreen mode
• Pointer/mouse fallback
• No framework runtime required in the standalone page

Gesture Map

Gesture	Effect
Open hand	Move and rotate the sphere
Pinch and hold	Charge the sphere
Release the pinch	Explode and reform the particles
Two hands spread apart	Grow the sphere
Two hands brought together	Shrink the sphere
Finger count	Change the active color palette

Color Palettes

Finger count selects one of six palettes:

1. Amber spectrum
2. Golden glow
3. Ember coral
4. Violet bloom
5. Cyan orbit
6. Mint aurora

The active palette is shown in the gesture legend.

Running Locally

The complete standalone experience is in:

index.html

You can serve the folder with any static HTTP server. For example:

python3 -m http.server 8080

Then open:

http://localhost:8080

Camera access generally requires localhost or HTTPS. Opening the file directly with a file:// URL may prevent webcam permissions from working.

Using the Webcam

1. Open the page in a camera-capable browser.
2. Select enable camera.
3. Allow camera access when prompted.
4. Place one or two hands in view of the camera.
5. Use the gesture map above to control the sphere.

The camera stream stays in the current browser tab. Use show camera to toggle the webcam feed as the background.

Browser Compatibility

Use a modern browser with support for:

• getUserMedia
• Canvas 2D
• Fullscreen API
• ES2017+ JavaScript

MediaPipe Hands is loaded from jsDelivr at runtime:

https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js

An internet connection is required the first time hand tracking is enabled.

Pointer Fallback

Camera access is optional. Without a camera:

• Move the pointer to move and rotate the sphere.
• Press and hold on the sphere to charge it.
• Release to trigger the particle explosion.

Project Structure

index.html       # Complete standalone experience
README.md        # This guide
src/             # Optional Vite/React development scaffold

The standalone production surface is intentionally contained in index.html, including its HTML, CSS, canvas renderer, gesture logic, and controls.