How I Built a Scannable 3D QR Code Generator | Every QR Code

I built Every QR Code as a scannable 3D QR code generator: enter a URL and it grows into a Tree or Terrain world, then reveal the standard QR code that points to the same destination. The complete Studio is embedded above. You can replace the URL, switch between Tree and Terrain, and download or share the result.

One link, one visual identity

A conventional QR code solves machine recognition first, but people rarely remember a link from its black-and-white grid alone. I wanted to try a different approach: let the link itself determine a recognizable world without giving up the QR code’s original scannability.

Every QR Code normalizes the URL, generates a standard QR matrix, and derives a deterministic Link DNA. The same identity always produces the same seeds. Tree and Terrain are two visual expressions of that identity; neither changes the URL stored in the QR code. When the 3D world reveals its QR form, the blocks return to that standard matrix instead of approximating it with a decorative image.

The 3D renderer uses WebGPU and loads only the model that is currently needed. When WebGPU is not available, the component falls back to a static SVG QR code, so the link remains visible and scannable. The Studio also lets you choose a theme, weather, and light or dark mode before copying a share link or downloading the image.

A different kind of artistic QR code generator

Many artistic QR code generators restyle the modules, blend an image into the grid, or ask an AI model to reinterpret the code. Every QR Code keeps the standard QR matrix separate and derives the Tree or Terrain world from the URL’s deterministic Link DNA. The artwork can become expressive without asking a decorative image to carry the link.

That separation also makes the behavior easier to reason about. The URL creates both a conventional QR code and a repeatable visual identity; revealing the code returns to the original matrix rather than generating a visually similar approximation.

Use it as a React QR code component or Web Component

I published the identity protocol, renderer, and React and Web Component adapters on GitHub under the MIT License. A React project can install the public component directly:

pnpm add @every-qrcode/react

import { EveryQRCode } from '@every-qrcode/react';

export function WebsiteIdentity() {
	return <EveryQRCode url="https://example.com" />;
}

For pages that do not use React, the same system is available as @every-qrcode/web-component. The public components generate the QR code and render the 3D world in the browser rather than sending that work to a server. Tree and Terrain are loaded only when they are actually selected.

The Gallery and Studio are free to use. You can browse the Gallery or put your own URL into the Studio and see what kind of world it grows into.

For another browser-rendering system built around deterministic source data, read how I designed the OpenStreetMap data pipeline behind EveryCityMap.