What is this?

A privacy-first browser playground under an aurora skin. Start from the chooser: track an aurora jellyfish with webcam gestures, or try the Agent Escape Room — a WebMCP vs brittle-clicking demo.

Privacy first

Camera permission is only asked when you enter Track Jellyfish. Your camera never leaves the device. Nothing is uploaded, stored, or recorded.

Tech stack

• Vanilla HTML, CSS, and JS ES modules — no build step
• Canvas 2D for the underwater scene and jellyfish springs
• MediaPipe Tasks Vision (HandLandmarker + FaceLandmarker) from CDN

Agent Escape Room & WebMCP

The vault paints its riddle on a canvas and fills the DOM with decoys. Each visit (or New puzzle) draws a harder multi-step protocol from a pool. Pages can register clean tools via document.modelContext.registerTool (get_hint, submit_answer) so agents skip scraping. The A/B panel is a scripted comic; the Origin Trial token targets https://dumps.easy-coding.io.

How tracking works

Webcam frames feed MediaPipe, which returns landmark points for eyes or hands. Those points map onto the jellyfish: gaze or palm moves the bell; fingertips pull tentacles; short motion bursts become swipes, waves, pinches, and more.

Modes

• Eyes — gaze drift, edge investigate, blink pulse, nod/shake
• Fingers — tentacles to tips, pinch ink, open/fist, swipe, wave
• Hand — palm guides the body; two hands stretch + buddy jelly

Idle underwater life

When nothing is tracked — or before the camera is on — the jellyfish swims on its own: soft bobbing, casual drifts, and pulse-propels through caustics and bubbles.

Gestures at a glance

Blink for a surprise flash. Pinch for an ink puff. Open palm expands and brightens; fist tucks in. Fast swipes dart; waves twirl. In Hand mode, stretch both palms apart for a buddy jellyfish. Tips live in the corner panel while you play.

Tracking overlay

The bottom-right “Tracking” preview draws aurora-colored skeletons or eye landmarks so you can see what the model sees. Collapse it anytime with the ◉ toggle.