---

╔══════════════════════════════════════════════════════════════════════╗
║                                                                      ║
║   Point your phone at a marker.                                      ║
║   Watch a photo gallery appear floating in mid-air.                  ║
║   No app. No install. Just a browser.  — Tcode-Motion ⚡              ║
╚══════════════════════════════════════════════════════════════════════╝

---

✦ About

A universal marker-based AR photo gallery built with A-Frame and AR.js — works in any modern smartphone browser, no app install required. Point your phone camera at the Hiro marker on any screen and watch a full photo gallery materialize floating in 3D space.

🎯 Single file. Zero build tools. Pure web AR magic.

---

🚀 Live Demo

🔗 Link	📖 Description
tcode-motion.github.io/ar-photo	Live AR Gallery — open on your phone
Hiro Marker	Open this on your PC/monitor as the AR target

---

📱 How to Use

Step 1 → Open the Live Demo on your PHONE
         👉 https://tcode-motion.github.io/ar-photo/

Step 2 → Open the Hiro Marker on your PC / monitor
         👉 https://ar-js-org.github.io/AR.js/data/images/HIRO.jpg

Step 3 → Tap "Launch Camera" on your phone
         → Allow camera access when prompted

Step 4 → Point your phone camera at the Hiro Marker on your screen

Step 5 → ✨ AR Gallery appears floating on the marker!
         → Use Prev / Next to browse, or switch to Gallery Mode

---

🖼️ Features

✨ Feature	📖 Description
🖼️ Single Mode	Browse photos one at a time with Prev / Next navigation
🌀 Gallery Mode	All 5 photos in a beautiful fan/ring arrangement
⚡ Ultra Stable	30-frame smoothing algorithm — zero hand-shake jitter
🌍 Universal	Works on Android & iOS — any phone, any modern browser
📦 No App Needed	100% web-based, zero install, zero friction
🎯 Marker-Based AR	Standard Hiro marker for rock-solid tracking
💡 Single File App	Entire gallery in one index.html — no build process

---

🛠️ Tech Stack

Library	Version	Purpose
A-Frame	1.3	WebXR / 3D scene framework — renders the AR world
AR.js	Latest	Marker-based AR tracking in the browser
HTML5 / JavaScript	—	App logic, gallery navigation, image management
GitHub Pages	—	Zero-cost live hosting

🔥 No build tools. No backend. No npm. No app store. Open a browser — it works.

---

📂 Project Structure

ar-photo/
├── index.html              ← 🚀 Entire app — single file, no build
├── images/
│   ├── photo1.jpg          ← Personal photo
│   ├── gallery1.png        ← Mountain Lake
│   ├── gallery2.png        ← Abstract Art
│   ├── gallery3.png        ← Cyberpunk City
│   └── gallery4.png        ← Architecture
├── .nojekyll               ← GitHub Pages config
├── .gitignore
└── README.md

---

➕ Add Your Own Photos

Customizing the gallery takes 4 simple steps:

Step 1 — Drop your image into images/:

images/your-photo.jpg

Step 2 — Register it in <a-assets> inside index.html:

<a-assets>
  <!-- existing images... -->
  <img id="img5" src="images/your-photo.jpg" crossorigin="anonymous">
</a-assets>

Step 3 — Add it to the gallery ring:

<a-entity id="galleryRing">
  <!-- existing images... -->
  <a-image src="#img5" position="0 0 -1" width="0.8" height="0.6"></a-image>
</a-entity>

Step 4 — Update the JavaScript arrays:

const IMAGE_IDS   = ['img1', 'img2', 'img3', 'img4', 'img5'];
const IMAGE_NAMES = ['Personal', 'Mountain Lake', 'Abstract Art', 'Cyberpunk', 'Your Photo'];

Done! ✅ Refresh — your photo is now in the AR gallery.

---

🎯 How AR.js Marker Tracking Works

📱 Phone Camera
      ↓
  Captures live video frame
      ↓
  AR.js scans for HIRO marker pattern
      ↓
  Calculates marker position & orientation in 3D space
      ↓
  A-Frame renders 3D scene anchored to marker coordinates
      ↓
  ✨ Photos appear floating in augmented reality

The Hiro marker is a high-contrast black-and-white pattern AR.js reliably detects even in varying lighting.

---

🌐 Deploy Your Own Fork

# 1. Fork this repo on GitHub

# 2. Clone your fork
git clone https://github.com/YOUR-USERNAME/ar-photo.git
cd ar-photo

# 3. Add your photos to images/
# 4. Edit index.html with your IMAGE_IDS and IMAGE_NAMES

# 5. Push to GitHub
git add .
git commit -m "Add my photos to AR gallery"
git push

# 6. Enable GitHub Pages:
#    Settings → Pages → Source: master branch → / (root)
#    Live URL: https://YOUR-USERNAME.github.io/ar-photo/

---

📜 Requirements

Requirement	Details
Device	Any smartphone (Android or iOS)
Browser	Any modern mobile browser (Chrome, Safari, Firefox)
Camera	Rear camera with camera permission granted
AR Target	Hiro Marker on any screen or printed
Internet	Required to load A-Frame + AR.js from CDN

---

🤝 Contributing

Contributions welcome! Ideas:

• 🎵 Audio / video AR support
• 🎨 Custom marker support (beyond Hiro)
• 📐 More gallery layout modes (grid, stack, spiral)
• 🌙 Dark UI overlay theme

⭐ Star the repo if you find it useful!

---

👨‍💻 Author

Tanmoy — Tcode-Motion

"Predict the future by coding it." ⚡

---

📄 License

MIT — free to use, fork, and modify.

---