QR Fusion: Turning Functional QR Codes Into *Functional* Design
The technical story behind QR Fusion, an app that blends artwork with QR codes while maintaining 100% scannability through advanced image processing
The technical story behind QR Fusion, an app that blends artwork with QR codes while maintaining 100% scannability through advanced image processing
Blend any artwork with QR codes while keeping them 100% scannable. Perfect for designers who want beautiful, functional QR codes.
View on App StoreDownload on the App Store | Available for iOS & macOS
"Why should a QR code look like a crossword puzzle stapled onto your poster?"
I wrote QR Fusion because I love what QR codes do but hate how they look.
Black-and-white blocks clash with carefully-chosen palettes, so designers either hide them or settle for "good enough." I wanted a third option: blend any artwork with a QR code while keeping it 100 % scannable.
Visual Hacking & Road-Sign Pranks
Researchers have shown that adding a few stickers can trick self-driving cars into mis-reading speed-limit signs (read more here). That got me thinking: What minimal tweaks can I make to a QR code before it breaks?
Matt Parker & Steve Mould's Dual-Image Puzzle
In their YouTube collaboration they morph two AI-generated goals to create one jigsaw that assembles into two pictures. I wondered: Could I morph a QR matrix and a photo the same way?
Designer Pain Points
Many designers I've talked to say they feel stuck when it comes to QR codes. Because there aren't good tools to modify QR codes, any attempts to adjust them in software like Photoshop risk breaking the code. They needed a safe way to integrate QR codes at the very end of their design workflow without losing functionality.
Prepare Both Images
CIImage, origin rebased to (0,0), size n × n.Run a custom CIColorKernel
kernel vec4 combineImages(__sample original, __sample qr) {
float qrBrightness = qr.r; // 0 = dark module, 1 = light
float origBrightness = max(original.r,
max(original.g, original.b));
vec3 newColor = original.rgb;
// Dark QR module: make sure underlying pixel isn't too bright
if (qrBrightness < 0.5 && origBrightness > 0.31415) {
newColor *= 0.31415 / origBrightness;
}
// Light QR module: make sure pixel isn't too dark
if (qrBrightness >= 0.5 && origBrightness < 0.85618) {
newColor = (origBrightness > 0.0)
? original.rgb * (0.85618 / origBrightness)
: vec3(0.85618);
}
return vec4(newColor, original.a);
}
These thresholds come from contrast sensitivity research, ensuring scanners can differentiate modules from the background (Weber contrast). The human eye tolerates small errors in color; computer vision systems, however, rely heavily on contrast.
(Want to dive deeper? Apple's Core Image Programming Guide explains kernels, and this article on How QR Codes Work covers the error-correction magic that makes these tricks possible.)
QR Fusion proves that utility apps can also respect aesthetics.
If your brand palette deserves better than monochrome squares, give it a try, and let me know what you create. Sometimes the smallest design detail turns a curious glance into a confident scan.
Ready to integrate QR Fusion into your design workflow? Check out my guide on QR Fusion for Designers: How to Integrate Beautiful QR Codes into Your Workflow.