Omni SpatialQR
The Zero-Friction WebAR Framework.
Bridging the Physical and Digital Worlds
The physical world is static. The digital world is limitless. Omni SpatialQR is the bridge between them.
Until now, Augmented Reality required massive friction: forcing users to download heavy apps, scanning weird proprietary markers, or waiting for bloated 3D engines to load. Omni SpatialQR changes the paradigm. It turns standard, everyday QR codes—on business cards, restaurant tables, retail packaging, and real estate signs—into instant, zero-friction spatial interfaces directly in the mobile browser.
Make your print media play video. Turn a coaster into a 3D showroom. Turn a poster into a glassmorphic checkout interface. It’s lightweight, instantly familiar to users, and feels like native magic.
Why Developers Love It
- Zero Bloat: At its core, the library is incredibly tiny. It only fetches heavy 3D engines (Three.js) dynamically if and when a 3D model is actually scanned. It includes a native WebWorker polyfill so it runs perfectly at 60fps even on browsers that lack native Barcode support.
- Dynamic Intelligence: You don’t need to tell it what to do. If it scans an
.mp4, it builds a premium video player. If it scans a .glb, it builds a 3D turntable. If it scans a mailto: or WIFI: string, it formats custom interactive widgets.
- Bring Your Own DOM: It isn't locked into a WebGL canvas. It warps standard HTML/CSS into 3D space, meaning your overlays inherit your website's exact fonts and branding natively.
Quick Start
Include the script and drop this into your app:
const visionAR = new OmniSpatialQR({
container: '#my-div',
type: 'dynamic'
});
visionAR.start();
The Magic: Deep-Linking & Asset Resolving
You want physical QR codes to be as simple as possible (e.g., https://shop.com/?item=42) so they scan instantly from far away. Omni SpatialQR lets you intercept that URL, strip out the ID, and query your database to build rich UI.
const visionAR = new OmniSpatialQR({
type: 'dynamic',
parseParam: ['item'], // Extracts "42"
assetResolver: async (parsedObj) => {
if (parsedObj.item === '42') {
// Return JSON to instantly build a Glassmorphic Card!
return {
title: "Nike Air Max",
description: "Limited Edition",
buttons: [
{ label: "Buy Now", url: "...", color: "#000" }
]
};
}
}
});
Custom HTML Injection
Want to use your own React/Vue/HTML components? Create a hidden div, and link it via the templates config. If the QR code simply says "stars", your custom HTML maps instantly in 3D!
<div id="my-rating" style="display:none;">⭐⭐⭐⭐⭐</div>
const visionAR = new OmniSpatialQR({
templates: {
'stars': '#my-rating'
}
});
// If the QR code contains the exact string "stars", your custom HTML is rendered in 3D!
Full Configuration API
{
container: '#id', // Wrapper div for AR
cameraFacing: 'environment', // or 'user'
overlayResolution: 100, // Base scale for pristine CSS rendering
type: 'dynamic', // square, text, card, video, audio, 3d, youtube
scale: 1.0,
position: 'center', // top, bottom, left, right
gap: 10, // Spacing if position isn't center
autoPlay: true, // Auto-plays media on lock
showControls: true, // Shows premium media seekers
textTruncate: true, // Softens corners if false
enable3D: false, // Allows .glb loading
autoRotate3D: true,
rotateSpeed: 1.0,
// Lifecycle Hooks
onDetect: (data) => {},
onClick: (data) => {},
onTrackingRestored: () => {},
onTrackingLost: () => {},
onError: (err) => {}
}
Built-In Physical QR Generator
Don't use a third-party generator. Our static helper creates beautiful, branded physical anchors instantly.
const qrElement = await OmniSpatialQR.generate({
data: 'https://mysite.com',
type: 'soft', // standard, soft, dots
size: 300,
color: '#18181b', // Dot color
bgColor: '#ffffff',// Background color
logo: '/logo.png' // Drops icon in the center
});
document.body.appendChild(qrElement);