🪄 REALITY EDITOR

Select a piece of the world. Rewrite its rules.

Hand-gesture AR that runs entirely in your browser — frame a zone with your hands
and turn it into a black hole, an ocean, frozen time, molten lava…
No install. No account. Nothing recorded or uploaded.

Powers • Gestures • Run it • How it works • Development

---

✨ Powers

Sixteen reality transforms, applied live inside the zone you frame — GRAVITY OFF, FREEZE TIME, SPACE TWIST, BLACK HOLE, OCEAN, NEON CITY, LAVA, PIXEL, VOID, THERMAL, HOLOGRAM, ANIME, MANGA, SKETCH, VHS — switchable by tapping a chip or by voice: "make this anime", "freeze time", "black hole", "clear".

The controls run at camera-native cadence with One-Euro-filtered landmarks — tracking is tuned to stay on MediaPipe's fast ROI path during quick pinch-drags, grabs bind to the hand that grabbed, and brief tracking flickers never drop your zone.

🖐 Gestures

Gesture	Action
✋ Raise an open hand	A zone appears around your palm and follows it
🖐🖐 Both hands	Stretch a panel wide between your palms
✊ Snap a fist (or 🤏 pinch)	Lock the zone onto reality
🤏 Pinch inside	Drag the zone around
🤏🤏 Two-hand pinch	Scale + rotate
🖐 Palm hold	Summon a new zone
✊ Fist hold	Erase

🚀 Run it

Live demo: zakriaz.github.io/reality-editor — allow the camera, raise a hand.

Single file: download Reality Editor - Standalone.html and double-click it. React, the engine, and the runtime are all inlined — only the MediaPipe hand-tracker model loads from a CDN.

Local dev server:

python3 -m http.server 8899
# open http://localhost:8899/Reality%20Editor.dc.html

🧠 How it works

graph LR;
  CAM[📷 getUserMedia] --> MP[MediaPipe HandLandmarker];
  MP --> FSM[Gesture FSM<br/>summon · shape · lock · drag];
  FSM --> GL[WebGL warp pipeline<br/>12 effect shaders];
  CAM --> GL;
  GL --> FX[fx canvas];
  FSM --> UI[ui canvas · zone chrome];
  VOICE[🎙 Web Speech · optional] --> FSM;

Loading

Hand tracking runs locally in the browser via MediaPipe Tasks Vision; a finite-state machine turns landmarks into summon/shape/lock/drag/erase intents; a WebGL fragment-shader pipeline warps the live camera feed inside the selected zone (with a 2D-canvas fallback). Voice is optional Web Speech — nothing ever leaves the machine.

🛠 Development

File	Role
engine.js	Core: camera, hand tracking, gesture FSM, WebGL effects, voice
Reality Editor.dc.html	UI component (template + logic)
support.js	Component runtime (generated — don't edit)
build-standalone.py	Bundles everything into the single-file standalone
docs/index.html	The standalone, deployed to GitHub Pages
original/	Pre-tweak snapshot of the imported design
index.html, css/, js/	Earlier prototype, kept for reference

Rebuild the standalone after touching the engine or UI:

python3 build-standalone.py && cp "Reality Editor - Standalone.html" docs/index.html

---

_{Built by Zakariae Belfkih · @7_akaria · MIT}