InstaVerse

Step inside InstaVerse and interact with your Instagram reels in the VR world.

Comment

InstaVerse — A Social Media World Inside VR

Your Instagram-styled world turns into the InstaVerse, where you can upload your customized WebXR Bots and visit them in VR or in 2D.

InstaVerse is a WebXR world built around a fictictious content creator named @xx_variant_xx. It starts as a 2D Instagram-style verse with info walls, reels, and your Bots, then opens into VR where every Bot becomes a portal you can pinch to enter. No app install, no APK, just a link.

The problem it solves: A lot of VR galleries that crash on THREE.js version clashes, show black screens, or trap you in VR with no way out. And most Bot builders make you re-upload everything one file at a time.

InstaVerse was built to fix that: • It leads with a polished 2D look that works everywhere, and can also be ported to VR, • It never draws a Bot as text on a wall. A Bot loads as a real HTML WebXR world • You can pull the customized Bots straight from GitHub, or load a whole folder of Bots at once

What is new: This is the sideloads build.

  1. Pure sideloads, no built-in Bots No Pixel Lab, no demo Bots baked in.
  2. The Verse starts empty. Your Bots are the Verse. Clear Bots returns you to a clean empty state.
  3. GitHub sideloads from the same repo Your Bots live in the same GitHub repo as the InstaVerse.
  4. The end user does not need to download anything.

• Tap Load from GitHub • Repo is pre-filled or auto-detected if hosted on GitHub Pages • Leave Folder empty to scan the repo root on main. No Bots folder required. • It fetches via the GitHub API, lists every .html Bot it finds, lets you check which ones to load, then turns each one into a story, a Your Bots card, and a VR portal. • If a folder or branch is wrong, it does not dead-end. It falls back to main to master to gh-pages, scans the whole repo, and shows you what folders and file types it actually found. • Optional token for private repos. Token stays in the browser.
• Folder upload of Bots: pick a folder, it reads every .html file, shows progress, adds them all at once • Upload Bot File: single file for a quick test • Drag and drop folder: drop a folder onto the page and it loads • Duplicates get (2), so you never overwrite by accident. • Header has Exit VR next to Enter VR • Floating 3D EXIT VR button is always visible at the top of the VR scene,

Every Bot's iframe gets an injected floating Exit VR button that posts back to the parent. How it works for a user 1. Open the GitHub Pages link in Quest Browser or any browser 2. See the Verse: Creator Profile, What I Post About, Top Transmissions, In My Orbit, Reels Grid 3. Load Bots: Load from GitHub, Upload Folder of Bots, or drag a folder in 4. Each Bot appears as a story circle, a Your Bots card, and a VR portal with its own theme color 5. Tap Enter VR, walk to a portal, hover to glow, pinch to enter 6. You enter the Bot's real world, not a screenshot. Pinch EXIT VR to come back How it works for a creator 1. Build any Bot as a single .html file. It can be its own Three.js world, a 2D tool, a game, anything that runs in a browser. 2. Put your .html files in your repo, root or any folder, on main 3. Set DEFAULT_GITHUB_REPO, branch, and path at the top of the file if you want it pre-filled 4. Publish to GitHub Pages. Your link is your store build. 5. Anyone who opens it can pull your Bots from that same repo in one tap.

VR details • Single [email protected] via importmap, no version clash • Info walls as CanvasTexture planes in a circle, reels tiles in an arc, portals with floating animation • Hover: scale, emissive glow, tooltip Pinch to enter [Name], haptic pulse, proximity highlight • Pinch: controller trigger, hand-tracking index-thumb pinch, gaze / air-tap, with debounce after opening • 3D panels show clean preview only: theme, emoji, title, Pinch to Enter. Never raw HTML code. • Entering a world loads its HTML via iframe.srcdoc as a real world. In immersive VR it ends the current XR session so the Bot's own XR can take over. • No black screens in the main Verse UI. White overlays, white loading spinner, drag 3D preview fallback if no headset. Tech • WebXR / Immersive Web SDK, Three.js, HTML, CSS 3D, DOM Overlay • Hosted on GitHub Pages, HTTPS, works in Quest Browser • No backend, no build step. One HTML file, sideloaded worlds • GitHub API for repo sideloading, FileReader + webkitdirectory for folder sideloading

The biggest technical challenge was platform-shaped: File picker dialogs cannot open in Quest's immersive mode (a browser/OS restriction). My solution was a deliberate 2D-to-VR workflow — you upload your reel from the 2D browser page, then enter VR where the reel is already loaded in the viewer. What started as a limitation became a design strength: onboarding happens in 2D where it's easy, and VR is pure immersion.

VR details • Single [email protected] via importmap, no version clash • Info walls as CanvasTexture planes in a circle, reels tiles in an arc, portals with floating animation • Hover: scale, emissive glow, tooltip Pinch to enter [Name], haptic pulse, proximity highlight • Pinch: controller trigger, hand-tracking index-thumb pinch, gaze / air-tap, with debounce after opening • 3D panels show clean preview only: theme, emoji, title, Pinch to Enter. Never raw HTML code. • Entering a world loads its HTML via iframe.srcdoc as a real world. In immersive VR it ends the current XR session so the bot's own XR can take over. • No black screens in the main Verse UI. White overlays, white loading spinner, drag 3D preview fallback if no headset. Tech • WebXR / Immersive Web SDK, Three.js, HTML, CSS 3D, DOM Overlay • Hosted on GitHub Pages, HTTPS, works in Quest Browser • No backend, no build step. One HTML file, sideloaded worlds • GitHub API for repo sideloading, FileReader + webkitdirectory for folder sideloading Why it is different Other entries ship a fixed gallery. InstaBot Verse ships a combiner. It turns any folder of HTML bots, or any GitHub repo of HTML bits, into a VR verse. The Verse is not the content. Your bots are the Verse.

Future Plans & Launch: • Real social layer — connect actual Instagram accounts so users' real feeds populate the world, with real-time reactions from friends

Built With

Share this project:

Updates

Submission history