QR City
An isometric 3D city whose rooftops form a QR code you can scan from above: each dark module is a building and the light ones are streets. It is a demo and also a library, with npm packages to drop it into Angular, React and Vue.
Screenshots
What it does
A QR that reads
Rooftops are flat and dark over a light ground, with a quiet zone around them, so any reader can scan it from above. Automated tests decode it with jsQR in every style.
Five styles
Paper, modern, coastal, snowy and cyberpunk, with an adjustable time of day.
Fully configurable
A lab with every setting live and, next to it, the code that reproduces what you see. The link saves your configuration.
Exportable
Checks that the QR reads, reveals it, and downloads the city as a PNG or the printable QR as SVG and PNG.
For any framework
A framework-agnostic core, a Web Component and components for React, Vue and Angular. SSR-safe, with every package’s size checked in continuous integration.
Polished
In Spanish and English, with light, dark or automatic theme. The canvas works with the keyboard and the animation respects “reduce motion”.
Get started
npm i @qr-city/element three
import '@qr-city/element/define';
<qr-city data="https://your-site.dev" style="width: 480px; height: 480px"></qr-city>