◈ RealityFrames — AR Portal Engine

A real-time Augmented Reality web app powered by MediaPipe Hand Tracking — no app install needed, runs straight in the browser.

---

✨ Features

🌀 Portal Mode

• Raise both hands to open a live AR portal between them
• Spread your hands apart to resize the portal
• Pinch left hand to cycle through 4 worlds:
  • 🌌 Space Galaxy — spiral nebula with orbiting stars
  • 🌊 Deep Ocean — bubbles, fish, and wave caustics
  • 💻 Matrix Rain — falling glyph streams on cyber grid
  • 🔮 Nebula Drift — golden cosmic particle mandala

👻 Freeze Mode

• Hold a tight fist for 2 seconds to capture a ghost snapshot of yourself
• Up to 5 layered ghost snapshots stack on screen
• Open palm and hold 3 seconds to clear all ghosts

⚡ Painter Mode

• Point your index finger to draw in AR space
• Pinch to cycle through 4 brush types:
  • ⚡ Lightning — electric jitter strokes
  • 🔥 Fire — flame particles with glow
  • ✨ Neon — rainbow colour-shifting lines
  • 💨 Smoke — soft diffuse trails
• Tap index + middle finger together to wipe the canvas
• Adjust Brush Size and Intensity from the panel

---

🚀 Live Demo

🔗 https://realityframes.vercel.app/

---

🛠️ Tech Stack

Layer	Technology
Hand Tracking	MediaPipe Hands v0.4
Rendering	HTML5 Canvas 2D API
Camera	WebRTC getUserMedia
Audio	Web Audio API
Fonts	Google Fonts — Orbitron, Share Tech Mono
Hosting	Vercel

---

📁 Project Structure

realityframes/
├── index.html        # App shell, UI layout, boot overlay
├── app.js            # Core engine — modes, gestures, rendering
├── styles.css        # Cyberpunk UI design system
├── vercel.json       # Security headers & deployment config
├── .gitignore        # Git ignore rules
└── README.md         # You are here

---

💻 Local Development

Prerequisites

• Node.js (LTS version)
• A modern browser (Chrome / Edge recommended for best MediaPipe support)
• A webcam
• HTTPS or localhost — camera access requires a secure context

Run Locally

# Clone the repo
git clone https://github.com/your-username/realityframes.git
cd realityframes

# Serve locally (no build step needed — pure HTML/JS/CSS)
npx serve .

Then open http://localhost:3000 in your browser.

⚠️ Do not open index.html directly via file:// — the browser will block camera access. Always use a local server.

---

☁️ Deploy to Vercel

Option 1 — GitHub Integration (Recommended)

1. Push this repo to GitHub
2. Go to vercel.com → Add New Project
3. Import your GitHub repository
4. Leave all settings as default (no build command needed)
5. Click Deploy ✅

Every git push to main will auto-deploy.

Option 2 — Vercel CLI

npm install -g vercel
vercel login
vercel        # first deploy
vercel --prod # subsequent deploys

---

🔒 Security

This project ships with a hardened vercel.json security config:

• Content-Security-Policy — strict allowlist for scripts, styles, fonts, media
• Strict-Transport-Security — HSTS with 2-year max-age and preload
• X-Frame-Options — DENY (clickjacking protection)
• X-Content-Type-Options — nosniff
• Cross-Origin-Opener-Policy — same-origin isolation
• Cross-Origin-Embedder-Policy — require-corp
• Permissions-Policy — only camera=(self) allowed; mic, geolocation, payment all blocked

---

⚠️ Browser Support

Browser	Support
Chrome 90+	✅ Full
Edge 90+	✅ Full
Firefox	⚠️ Partial (MediaPipe may be slower)
Safari	⚠️ Limited (WebRTC restrictions on iOS)
Mobile Chrome	✅ Works (use rear/front camera)

---

📄 License

MIT License — free to use, modify, and distribute.

---

© 2026 Ayyappan M. All rights reserved.