Turn QR codes and photos into buildable brick art. Brickify generates a photoreal 3D preview, an optimized parts list with BrickLink part numbers, and step-by-step building instructions for real plates, tiles, and baseplates.
- QR code builder: 8 content types (WiFi, URL, Text, Email, Phone, SMS, Location, Contact card) with per-field validation, a contrast meter, and a simulated phone scan that confirms your exact colors decode
- Mosaic builder: upload, crop, and filter any photo, then map it onto 50 real brick colors across 1 to 9 baseplate panels, with optional dithering and palette limits
- Parts lists that merge single studs into the largest pieces you own, with BrickLink part numbers, print and copy-to-clipboard
- Booklet-style instructions: 10 pieces per step, each new piece drops into place in 3D inside a red callout outline
- 3D preview (see below): orbit, inspect, snapshot, or export the whole build as a 3D model
The preview is a custom three.js renderer (app/features/brickRenderer/) built for brick models:
- Physically based look: studio image-based lighting, soft shadows, ground-truth ambient occlusion (GTAO), 4× MSAA, and Khronos PBR Neutral tone mapping so catalog colors stay accurate
- Real part geometry: 3.2 mm plates, 1.7 mm studs with filleted edges, beveled seams, tiles without studs, and round 1×1 pieces
- Fast at mosaic scale: one instanced draw call per piece shape, geometry level of detail for big builds, and on-demand rendering, so nothing draws while the view is idle
- Inspector: hover any piece to see its size, color, part number, and stud position
- Toolbar: angled and top-down camera presets, turntable, fullscreen, HD/FAST quality toggle (auto-detected, remembered)
- Exports: high-resolution PNG snapshots, and
.glbmodels at real-world scale (1 stud = 8 mm) for Blender, AR viewers, or slicers
https://robokozo.github.io/brickify/
Requires Node.js 22.12+ or 24.11+.
git clone https://github.com/robokozo/brickify.git
cd brickify
npm install
npm run dev # http://localhost:3000/brickify/| Script | What it does |
|---|---|
npm run dev |
Dev server with hot reload |
npm test |
Unit tests (Vitest) |
npm run typecheck |
Type-check the app with vue-tsc |
npm run generate |
Static build into .output/public/ |
npm run preview |
Serve the production build locally |
Coding conventions live in AGENT.md.
Pushing to main runs the GitHub Actions workflow in .github/workflows/deploy.yml, which tests, type-checks, builds, and publishes to GitHub Pages. To enable it, set Settings → Pages → Source to "GitHub Actions".
To host elsewhere, run npm run generate and upload .output/public/.
A greedy tiler covers the grid with as few pieces as possible:
- Scan cells from top-left to bottom-right
- At each uncovered cell, try the largest allowed piece first, in both orientations
- Place it if every cell under it is the same color and still free
- Fall back to smaller pieces, down to 1×1
Every color is tiled in the same pass, and mosaics are tiled per 48×48 panel since pieces can't span baseplates. For QR codes you choose which sizes you own; plates and tiles from 1×1 up to 8×16 are supported.
Photo pixels are matched to the nearest brick color by distance in CIE Lab space. CIE76 was chosen after comparing it with CIEDE2000 and OKLab on this sparse 50-color palette: the others pushed muted tones toward vivid colors and neutral grays toward browns. Dithering spreads the error in linear light (how neighboring bricks blend at a distance) with serpentine scanning to avoid streaks.
| Type | Payload format example |
|---|---|
| WiFi | WIFI:T:WPA;S:mynetwork;P:mypassword;H:true;; |
| URL | https://example.com |
| Text | Hello, world! |
mailto:user@example.com?subject=Hi&body=Hello |
|
| Phone | tel:+15550001234 |
| SMS | smsto:+15550001234:My message |
| Location | geo:48.8584,2.2945?q=Eiffel%20Tower |
| Contact | vCard 3.0 (BEGIN:VCARD … END:VCARD) |
Codes use error correction level H, which tolerates up to 30% damage: helpful when a few bricks end up misaligned.
Color pairs are rated with the WCAG 2.1 contrast ratio: 7:1 or higher is excellent, 4.5:1 is good, and anything below may be hard to scan. The scan check then renders the code in your colors and decodes it with a real QR reader.
- Colors: dark modules on a light background scan most reliably. Black on white is always safe.
- Baseplates: already own a baseplate in your background color? Turn on "Use baseplate for background" and you only buy foreground pieces.
- Pieces: tiles give a smooth finish and scan slightly better; plates are cheaper and easier to adjust. Order 5 to 10% extra.
- Scanning: use even lighting and hold the phone parallel to the build to avoid glare.
QR code won't scan: check that the contrast rating is "Good" or better and the scan check passes, make sure every piece is aligned, and scan in good light.
3D preview is slow or blank: switch the toolbar to FAST, or use the Flat view. The 3D view needs WebGL 2.
Contributions are welcome: fork the repo, create a feature branch, and open a pull request. Commit messages follow Conventional Commits.
MIT
- Rendering by three.js
- QR generation by qr-code-styling, scan simulation by jsQR
- Color data from Rebrickable, part numbers from BrickArchitect
- Built with Nuxt and Nuxt UI