Skip to main content
Nathan Fennel
Sign In
Back to Blog

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

QR Fusion

Design

Blend any artwork with QR codes while keeping them 100% scannable. Perfect for designers who want beautiful, functional QR codes.

πŸ“± View on App Store

Download 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.


Inspiration in Three Acts

  1. 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?

  2. 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?

  3. 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.


How Blending a QR Code and an Image Works

  1. Prepare Both Images

    • QR image β†’ CIImage, origin rebased to (0,0), size n Γ— n.
    • Source artwork β†’ square-cropped & scaled so it exactly matches n Γ— n.
  2. 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);
}
  • Dark modules are forced below a 31 % luminance ceiling.
  • Light modules are lifted above an 85 % floor.

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.

  1. Render & Validate
    After blending, QR Fusion re-scans the result on-device and assigns a readability "grade." Any design that dips below A gets red flags before you export.

(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.)


Why Designers Love It

  • Drop-in Flexibility – Run QR Fusion as the last step; no need to rearrange your canvas.
  • Offline by Design – Like my earlier app RapidReads, no network calls. Infosec teams sleep easy.
  • Live Validator – Real-time feedback means fewer embarrassing "scan fails" in the wild.

Behind the Build

  • Algorithm Variations – QR Fusion ships with multiple blend modes (lighten/darken, average, fade). The validator picks the safest setting for you, but power users can override.
  • AI-Assisted Polish – ChatGPT helped refactor memory-intensive loops, Claude found power-draw hot spots, and Cursor suggested a smarter caching layer.

Final Thoughts

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.

Comments (0)

Sign in to join the discussion