diff --git a/README.md b/README.md
index 719cba6..7267c47 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,8 @@ Transfer files via animated QR codes. No network, no Bluetooth, no USB — just
 2. **Transfer** — Point a phone camera at the screen, or export a GIF/video and send it any way you like.
 3. **Decode** — Open the decoder on the receiving device. Scan with the camera or upload the GIF/video. The file is reassembled.
 
+Each image frame carries **three independent QR codes** — one per RGB colour channel — tripling data density with no increase in image size.
+
 ## Quick start
 
 ```bash
@@ -25,19 +27,50 @@ Open `encoder/index.html` or `decoder/index.html` directly in a browser. Camera
 ## Features
 
 **Encoding:**
+- RGB tri-channel encoding: three QR codes per image frame (~3× data density)
 - Multi-file and folder support (auto-zipped)
 - Gzip compression
 - GIF, MP4, and WebM export
 - Reed-Solomon erasure coding (+2/+5/+10 parity chunks)
-- Adjustable chunk size (100–800 B) and QR error correction level (L/M/Q/H)
+- Adjustable QR version and error correction level (L/M/Q/H)
 
 **Decoding:**
-- Live camera scan with native `BarcodeDetector` (hardware-accelerated) + jsQR fallback
+- Live camera scan with jsQR, including raw binary QR payloads
 - GIF and video upload decoding
+- Per-channel adaptive thresholding (Otsu) for robust red/blue recovery
 - Progressive preview as chunks arrive
 - RS recovery of missing chunks
 - ZIP archive browsing
 
+## RGB channel encoding
+
+Each image frame is a single full-colour image that encodes three logical QR codes simultaneously — one in the red channel, one in green, one in blue. Every pixel is one of eight pure colours (the corners of the RGB cube: black, white, red, green, blue, cyan, magenta, yellow).
+
+```
+Pixel colour = (R_light, G_light, B_light) where each channel is 0 or 255.
+```
+
+**Green** carries the primary (authoritative) channel. Green dominates camera sensor sensitivity (Bayer arrays have 2× green photosites), so it is the most faithfully captured channel and the location for the frame metadata. **Red** and **blue** carry additional data.
+
+Logical chunk numbering maps to image frames as:
+
+```
+Frame 0: chunks 0 (green), 1 (red), 2 (blue)
+Frame 1: chunks 3 (green), 4 (red), 5 (blue)
+…
+```
+
+The decoder grid shows one cell per image. Each cell's colour reflects which channels have been successfully decoded, using additive mixing — the first one is red, green, or blue. When there are two colors complete it will be yellow, cyan, or magenta, all three is white.
+
+## Decoding: adaptive channel scanning
+
+For each image frame the decoder:
+
+1. Extracts the **green channel** as grayscale and runs jsQR. On success this also returns the four corner coordinates of the QR code.
+2. Uses those coordinates to **crop** the red and blue channel images down to just the QR region before scanning — faster and immune to false positives outside the QR area.
+3. Applies **Otsu's thresholding** to the cropped region for red and blue: finds the histogram threshold that maximally separates the dark and light pixel clusters, computes the mean of each cluster, and stretches that range to fill 0–255. This automatically compensates for the lower camera sensitivity in the red and blue channels (the same correction you would do manually with brightness/contrast in an image editor).
+4. Falls back to a full-frame scan for red and blue if the green channel fails.
+
 ## Project structure
 
 ```
@@ -46,38 +79,41 @@ encoder/index.html      Encoder (self-contained)
 decoder/index.html      Decoder (self-contained)
 shared/reedsolomon.js   Reed-Solomon library (source)
 server.js               HTTPS dev server
-test/test.js            Test suite (43 tests)
+test/test.js            Test suite
 ```
 
 Encoder and decoder pages bundle all dependencies locally — no CDN, no build step. They work from `file://`, GitHub Pages, or the dev server.
 
-## Chunk protocol (v2)
+## Chunk protocol (v3)
 
-Each QR code contains a JSON chunk:
+The encoder emits compact binary QR frames. The decoder still accepts the older JSON v1/v2 frames for compatibility.
 
-```json
-{
-  "v": 2, "i": 0, "n": 17,
-  "hash": "a1b2c3d4", "name": "file.txt",
-  "gz": 1, "zip": 0, "rs": 1, "k": 7, "sz": 19721,
-  "t": "d", "d": "base64data..."
-}
+Frame layout:
+
+```text
+"Q3" magic
+flags byte: gzip, zip, Reed-Solomon, parity
+frame index varint
+total frame count varint
+data frame count varint
+binary frame body
 ```
 
-| Field | Description |
-|-------|-------------|
-| `v`   | Protocol version (2) |
-| `i`   | Chunk index (0-based) |
-| `n`   | Total chunks (data + parity) |
-| `hash`| FNV-1a hash of original file |
-| `name`| File name |
-| `gz`  | 1 if gzip-compressed |
-| `zip` | 1 if zip archive |
-| `rs`  | 1 if Reed-Solomon enabled |
-| `k`   | Data chunk count (for RS) |
-| `sz`  | Original file size in bytes |
-| `t`   | `d` = data, `p` = parity |
-| `d`   | Base64 payload |
+Frame 0's body starts with transfer metadata, then binary payload bytes:
+
+```text
+encoded payload size varint
+original file size varint
+frame 0 data byte count varint
+FNV-1a hash uint32
+filename length varint
+filename UTF-8 bytes
+payload bytes
+```
+
+Other data frames contain only binary payload bytes. Parity frames contain Reed-Solomon parity bytes. Reed-Solomon protects data frame bodies, including frame 0 metadata, so a missing metadata frame can be recovered from parity.
+
+With RGB encoding the total logical frame count is approximately 3× what it would be for a single-channel encode of the same file. The frame index field in each QR payload is the absolute logical frame number, so the protocol layer is unaware of the channel grouping — the decoder simply collects frames by index as they arrive from whichever channel decoded them.
 
 ## Testing
 
@@ -85,19 +121,19 @@ Each QR code contains a JSON chunk:
 npm test
 ```
 
-43 tests covering GF(256) arithmetic, Reed-Solomon encode/decode, recovery scenarios, path traversal protection, GIF parser bounds checking, and the full encode→RS→recover→decompress pipeline.
+Tests covering GF(256) arithmetic, Reed-Solomon encode/decode, recovery scenarios, v3 binary framing, path traversal protection, GIF parser bounds checking, and the full encode→RS→recover→decompress pipeline.
 
 ## Camera tips
 
-- **Fast scanning**: chunk size 300 + EC level L = larger cells, easier to scan
-- **Fewer frames**: chunk size 800 + EC level M = fewer QR codes in the sequence
+- **Fast scanning**: lower QR version + EC level L = larger cells, easier to scan
+- **Fewer frames**: higher QR version + EC level M = fewer images in the sequence
 - **Missed chunks**: add +2 or +5 RS parity to recover from dropped frames
 - **Encoder FPS**: start at 3–6 FPS and adjust
 
 ## Requirements
 
 - Node.js (for dev server and tests)
-- Chrome recommended (BarcodeDetector API support)
+- Chrome recommended
 - OpenSSL optional (server falls back to JS cert generation)
 
 ## License
diff --git a/decoder/index.html b/decoder/index.html
index aba4c30..b7667fb 100644
--- a/decoder/index.html
+++ b/decoder/index.html
@@ -8,6 +8,7 @@
   <script src="pako.min.js"></script>
   <script src="jszip.min.js"></script>
   <script src="reedsolomon.js"></script>
+  <script src="../shared/protocol-v3.js"></script>
   <style>
     :root {
       --bg: #1e1e2e;
@@ -379,6 +380,80 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       btnCameraStart.disabled = true;
     }
 
+    function extractChannelImageData(imageData, ch) {
+      var d = imageData.data, n = imageData.width * imageData.height;
+      var out = new Uint8ClampedArray(n * 4);
+      for (var i = 0; i < n; i++) {
+        var v = d[i * 4 + ch];
+        out[i * 4] = v; out[i * 4 + 1] = v; out[i * 4 + 2] = v; out[i * 4 + 3] = 255;
+      }
+      return new ImageData(out, imageData.width, imageData.height);
+    }
+
+    function cropToLocation(imageData, location, pad) {
+      var corners = [location.topLeftCorner, location.topRightCorner,
+                     location.bottomRightCorner, location.bottomLeftCorner];
+      var xs = corners.map(function(c) { return c.x; });
+      var ys = corners.map(function(c) { return c.y; });
+      var x0 = Math.max(0, Math.floor(Math.min.apply(null, xs)) - pad);
+      var y0 = Math.max(0, Math.floor(Math.min.apply(null, ys)) - pad);
+      var x1 = Math.min(imageData.width,  Math.ceil(Math.max.apply(null, xs)) + pad);
+      var y1 = Math.min(imageData.height, Math.ceil(Math.max.apply(null, ys)) + pad);
+      var cw = x1 - x0, ch = y1 - y0;
+      var src = imageData.data, out = new Uint8ClampedArray(cw * ch * 4);
+      for (var row = 0; row < ch; row++) {
+        for (var col = 0; col < cw; col++) {
+          var si = ((y0 + row) * imageData.width + (x0 + col)) * 4;
+          var di = (row * cw + col) * 4;
+          out[di] = src[si]; out[di+1] = src[si+1]; out[di+2] = src[si+2]; out[di+3] = 255;
+        }
+      }
+      return new ImageData(out, cw, ch);
+    }
+
+    function otsuNormalize(imageData, channel) {
+      var d = imageData.data, n = imageData.width * imageData.height;
+      var hist = new Int32Array(256);
+      for (var i = 0; i < n; i++) hist[d[i * 4 + channel]]++;
+
+      // Otsu threshold — finds the split that maximises inter-class variance
+      var sumAll = 0;
+      for (var v = 0; v < 256; v++) sumAll += v * hist[v];
+      var sumB = 0, wB = 0, maxVar = 0, thresh = 128;
+      for (var t = 0; t < 256; t++) {
+        wB += hist[t]; if (wB === 0) continue;
+        var wF = n - wB; if (wF === 0) break;
+        sumB += t * hist[t];
+        var mB = sumB / wB, mF = (sumAll - sumB) / wF;
+        var bvar = wB * wF * (mB - mF) * (mB - mF);
+        if (bvar > maxVar) { maxVar = bvar; thresh = t; }
+      }
+
+      // Mean of each cluster = "most common dark" and "most common light"
+      var darkSum = 0, darkCount = 0, lightSum = 0, lightCount = 0;
+      for (var v = 0; v < 256; v++) {
+        if (v <= thresh) { darkSum += v * hist[v]; darkCount += hist[v]; }
+        else             { lightSum += v * hist[v]; lightCount += hist[v]; }
+      }
+      var darkCenter  = darkCount  ? darkSum  / darkCount  : 0;
+      var lightCenter = lightCount ? lightSum / lightCount : 255;
+      var range = lightCenter - darkCenter || 1;
+
+      // Stretch so dark cluster → 0, light cluster → 255
+      var out = new Uint8ClampedArray(n * 4);
+      for (var i = 0; i < n; i++) {
+        var v = Math.min(255, Math.max(0, Math.round((d[i * 4 + channel] - darkCenter) * 255 / range)));
+        out[i*4] = v; out[i*4+1] = v; out[i*4+2] = v; out[i*4+3] = 255;
+      }
+      return new ImageData(out, imageData.width, imageData.height);
+    }
+
+    function scanChannelWithHint(imageData, channel, location) {
+      var crop = cropToLocation(imageData, location, 20);
+      var normalized = otsuNormalize(crop, channel);
+      return jsQR(normalized.data, normalized.width, normalized.height, { inversionAttempts: 'attemptBoth' });
+    }
+
     // ===================== CAMERA DECODE =====================
 
     var cameraStream = null;
@@ -392,24 +467,14 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     var camIsZipped = false;
     var camRsEnabled = false;
     var camRsK = 0;
+    var camProtocolVersion = 2;
     var camFacingMode = 'environment';
     var camFrameCount = 0;
     var camLastFpsTime = 0;
     var camLastFpsCount = 0;
-    var barcodeDetector = null;
     var camScanning = false;
-    var camFallbackCanvas = document.createElement('canvas');
-    var camFallbackCtx = camFallbackCanvas.getContext('2d', { willReadFrequently: true });
-
-    if ('BarcodeDetector' in window) {
-      BarcodeDetector.getSupportedFormats().then(function(formats) {
-        if (formats.indexOf('qr_code') >= 0) {
-          barcodeDetector = new BarcodeDetector({ formats: ['qr_code'] });
-          cameraScannerBadge.textContent = 'Native';
-          cameraScannerBadge.className = 'badge badge-success';
-        }
-      }).catch(function() {});
-    }
+    var camScanCanvas = document.createElement('canvas');
+    var camScanCtx = camScanCanvas.getContext('2d', { willReadFrequently: true });
 
     btnCameraStart.addEventListener('click', startCamera);
     btnCameraStop.addEventListener('click', stopCamera);
@@ -427,6 +492,10 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       camFileName = null;
       camIsGzipped = false;
       camOriginalSize = null;
+      camIsZipped = false;
+      camRsEnabled = false;
+      camRsK = 0;
+      camProtocolVersion = 2;
       camFrameCount = 0;
       camLastFpsTime = performance.now();
       camLastFpsCount = 0;
@@ -513,35 +582,35 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
 
       camScanning = true;
 
-      if (barcodeDetector) {
-        barcodeDetector.detect(cameraVideo).then(function(barcodes) {
-          camFrameCount++;
-          for (var i = 0; i < barcodes.length; i++) {
-            if (barcodes[i].rawValue) camProcessQR(barcodes[i].rawValue);
-          }
-          camAfterScan();
-        }).catch(function() {
-          camFrameCount++;
-          camFallbackJsQR(vw, vh);
-          camAfterScan();
-        });
-      } else {
-        camFrameCount++;
-        camFallbackJsQR(vw, vh);
-        camAfterScan();
-      }
+      camFrameCount++;
+      camScanJsQR(vw, vh);
+      camAfterScan();
     }
 
-    function camFallbackJsQR(vw, vh) {
+    function camScanJsQR(vw, vh) {
       var scale = Math.min(1, 800 / vw);
-      camFallbackCanvas.width = Math.round(vw * scale);
-      camFallbackCanvas.height = Math.round(vh * scale);
-      camFallbackCtx.drawImage(cameraVideo, 0, 0, camFallbackCanvas.width, camFallbackCanvas.height);
-      var imageData = camFallbackCtx.getImageData(0, 0, camFallbackCanvas.width, camFallbackCanvas.height);
-      var code = jsQR(imageData.data, imageData.width, imageData.height, {
-        inversionAttempts: 'attemptBoth'
+      camScanCanvas.width = Math.round(vw * scale);
+      camScanCanvas.height = Math.round(vh * scale);
+      camScanCtx.drawImage(cameraVideo, 0, 0, camScanCanvas.width, camScanCanvas.height);
+      var imageData = camScanCtx.getImageData(0, 0, camScanCanvas.width, camScanCanvas.height);
+
+      // Green first — most reliable, gives us the QR location for free
+      var greenImg = extractChannelImageData(imageData, 1);
+      var greenCode = jsQR(greenImg.data, greenImg.width, greenImg.height, { inversionAttempts: 'attemptBoth' });
+      var loc = null;
+      if (greenCode) {
+        if (greenCode.data || greenCode.binaryData) camProcessQR(greenCode.data || '', greenCode.binaryData);
+        loc = greenCode.location;
+      }
+
+      // Red and blue: crop to known QR area + Otsu-normalize, fall back to full-frame scan
+      [0, 2].forEach(function(ch) {
+        var code = loc ? scanChannelWithHint(imageData, ch, loc) : (function() {
+          var chData = extractChannelImageData(imageData, ch);
+          return jsQR(chData.data, chData.width, chData.height, { inversionAttempts: 'attemptBoth' });
+        })();
+        if (code && (code.data || code.binaryData)) camProcessQR(code.data || '', code.binaryData);
       });
-      if (code && code.data) camProcessQR(code.data);
     }
 
     function camAfterScan() {
@@ -573,8 +642,42 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       if (cameraStream) cameraAnimFrame = requestAnimationFrame(camScanLoop);
     }
 
-    function camProcessQR(data) {
+    function camProcessQR(data, binaryData) {
       try {
+        var v3Frame = decodeV3Frame(data, binaryData);
+        if (v3Frame) {
+          var v3New = camDecodedChunks[v3Frame.i] === undefined;
+          camDecodedChunks[v3Frame.i] = v3Frame;
+          camProtocolVersion = 3;
+
+          if (!camExpectedTotal) {
+            camExpectedTotal = v3Frame.n;
+            camIsGzipped = v3Frame.gz;
+            camIsZipped = v3Frame.zip;
+            camRsEnabled = v3Frame.rs;
+            camRsK = v3Frame.k;
+            if (v3Frame.meta) {
+              camExpectedHash = v3Frame.meta.hash;
+              camFileName = v3Frame.meta.name;
+              camOriginalSize = v3Frame.meta.originalSize;
+            }
+            camInitGrid(camExpectedTotal);
+          } else if (v3Frame.meta) {
+            camExpectedHash = v3Frame.meta.hash;
+            camFileName = v3Frame.meta.name;
+            camOriginalSize = v3Frame.meta.originalSize;
+          }
+          camUpdateGrid();
+          camUpdatePreview();
+
+          if (v3New) {
+            cameraContainer.classList.remove('flash');
+            void cameraContainer.offsetWidth;
+            cameraContainer.classList.add('flash');
+          }
+          return;
+        }
+
         var chunk = JSON.parse(data);
         if ((chunk.v === 1 || chunk.v === 2) && typeof chunk.i === 'number' && typeof chunk.n === 'number' && chunk.d) {
           var isNew = camDecodedChunks[chunk.i] === undefined;
@@ -608,13 +711,13 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     function camInitGrid(total) {
       cameraChunkGrid.innerHTML = '';
       camGridCells = [];
-      for (var i = 0; i < total; i++) {
+      var numImages = Math.ceil(total / 3);
+      for (var i = 0; i < numImages; i++) {
         var cell = document.createElement('div');
-        var isParity = camRsEnabled && i >= camRsK;
-        cell.className = 'chunk-cell' + (isParity ? ' parity' : '');
+        cell.className = 'chunk-cell';
         cell.textContent = i;
-        cell.dataset.index = i;
-        cell.title = isParity ? 'Parity chunk' : 'Data chunk';
+        cell.dataset.imageIndex = i;
+        cell.title = 'Image ' + i + ' (chunks ' + (i*3) + '-' + Math.min(i*3+2, total-1) + ')';
         cameraChunkGrid.appendChild(cell);
         camGridCells.push(cell);
       }
@@ -622,15 +725,25 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
 
     function camUpdateGrid() {
       var found = Object.keys(camDecodedChunks).length;
+      var total = camExpectedTotal;
       for (var i = 0; i < camGridCells.length; i++) {
-        camGridCells[i].className = 'chunk-cell' + (camDecodedChunks[i] !== undefined ? ' found' : '');
+        var base = i * 3;
+        var hasG = camDecodedChunks[base] !== undefined || (total !== null && base >= total);
+        var hasR = camDecodedChunks[base+1] !== undefined || (total !== null && base+1 >= total);
+        var hasB = camDecodedChunks[base+2] !== undefined || (total !== null && base+2 >= total);
+        camGridCells[i].style.background = 'rgb(' + (hasR?255:40) + ',' + (hasG?255:40) + ',' + (hasB?255:40) + ')';
+        camGridCells[i].style.color = (hasR && hasG && hasB) ? '#111' : '#cdd6f4';
       }
-      if (camExpectedTotal) {
-        cameraProgress.style.width = (found / camExpectedTotal * 100).toFixed(0) + '%';
+      if (total) {
+        cameraProgress.style.width = (found / total * 100).toFixed(0) + '%';
       }
     }
 
     function camUpdatePreview() {
+      if (camProtocolVersion === 3) {
+        camUpdatePreviewV3();
+        return;
+      }
       var found = Object.keys(camDecodedChunks).length;
       var complete = camExpectedTotal && found >= camExpectedTotal;
       var rsEnough = camRsEnabled && found >= camRsK;
@@ -672,7 +785,48 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       }
     }
 
+    function camUpdatePreviewV3() {
+      var found = Object.keys(camDecodedChunks).length;
+      var complete = camExpectedTotal && found >= camExpectedTotal;
+      var rsEnough = camRsEnabled && found >= camRsK;
+      var displayComplete = complete || rsEnough;
+      cameraPreviewBadge.textContent = displayComplete ? (rsEnough && !complete ? 'RS recoverable!' : 'complete!') : found + '/' + (camExpectedTotal || '?') + ' chunks';
+      cameraPreviewBadge.className = 'badge ' + (displayComplete ? 'badge-success' : 'badge-info');
+
+      var first = camDecodedChunks[0];
+      if (!first || !first.meta) {
+        cameraPreviewCode.textContent = '[waiting for metadata frame]';
+        return;
+      }
+
+      try {
+        var bytes = assembleV3PreviewBytes(camDecodedChunks, camRsK, first.meta);
+        if (camIsGzipped) {
+          try { bytes = pako.ungzip(bytes); } catch (e) {
+            cameraPreviewCode.textContent = '[decompressing...]';
+            return;
+          }
+        }
+
+        try {
+          var text = new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+          var lines = text.split('\n');
+          cameraPreviewCode.textContent = lines.length > 20
+            ? lines.slice(0, 20).join('\n') + '\n\n... (' + lines.length + ' lines)'
+            : text;
+        } catch (e) {
+          cameraPreviewCode.textContent = '[Binary — ' + formatSize(bytes.length) + ']';
+        }
+      } catch (e) {
+        cameraPreviewCode.textContent = '[decoding...]';
+      }
+    }
+
     function camFinishDecode(allFound) {
+      if (camProtocolVersion === 3) {
+        camFinishDecodeV3(allFound);
+        return;
+      }
       var base64Chunks = [];
       var hasAll = true;
       for (var i = 0; i < (camExpectedTotal || 0); i++) {
@@ -759,6 +913,68 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       }
     }
 
+    function camFinishDecodeV3(allFound) {
+      resultCard.classList.remove('hidden');
+      resultCode.textContent = '';
+
+      var assembled = assembleV3Result(camDecodedChunks, camExpectedTotal, camRsK, camRsEnabled);
+      if (!assembled) {
+        resultBadge.textContent = 'INCOMPLETE';
+        resultBadge.className = 'badge badge-error';
+        resultCode.textContent = 'Incomplete: missing required chunks.';
+        return;
+      }
+
+      var bytes = assembled.bytes;
+      var meta = assembled.meta;
+      camExpectedHash = meta.hash;
+      camFileName = meta.name;
+      camOriginalSize = meta.originalSize;
+
+      try {
+        if (camIsGzipped) {
+          try { bytes = pako.ungzip(bytes); } catch (e) {
+            resultCode.textContent = 'Error: gzip decompression failed.';
+            resultBadge.textContent = 'ERROR';
+            resultBadge.className = 'badge badge-error';
+            return;
+          }
+        }
+
+        var metaHtml = '<span>' + formatSize(bytes.length) + '</span>' +
+          '<span>' + escapeHtml(camFileName || 'unknown') + '</span>' +
+          '<span>Hash: ' + (camExpectedHash || '?') + '</span>';
+        if (camIsGzipped) metaHtml += '<span class="badge badge-info">gzip</span>';
+        if (camIsZipped) metaHtml += '<span class="badge badge-info">zip archive</span>';
+        if (!allFound && assembled.recovered) metaHtml += '<span class="badge badge-comp">RS recovered</span>';
+        resultMeta.innerHTML = metaHtml;
+        resultBadge.textContent = 'VERIFIED';
+        resultBadge.className = 'badge badge-success';
+
+        if (camIsZipped) {
+          resultCode.textContent = '[' + formatSize(bytes.length) + ' ZIP archive — see files below]';
+          showZipBrowser(bytes);
+        } else {
+          var text;
+          try { text = new TextDecoder('utf-8', { fatal: true }).decode(bytes); } catch (e) { text = '[Binary — use Download]'; }
+          resultCode.textContent = text;
+          btnDownload.onclick = function() {
+            downloadBlob(bytes, camFileName || 'decoded-file');
+          };
+          btnCopy.onclick = function() {
+            navigator.clipboard.writeText(resultCode.textContent).then(function() {
+              btnCopy.textContent = 'Copied!';
+              setTimeout(function() { btnCopy.textContent = 'Copy to Clipboard'; }, 2000);
+            });
+          };
+        }
+      } catch (e) {
+        resultCode.textContent = 'Error: ' + e.message;
+        resultBadge.textContent = 'ERROR';
+        resultBadge.className = 'badge badge-error';
+      }
+    }
+
     function finishCameraDecode(complete) {
       if (complete) {
         camFinishDecode(true);
@@ -803,6 +1019,70 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     // Trailing null stripping above is safe because valid base64 (ASCII subset)
     // never contains \0 — any nulls are RS padding artifacts from uneven chunks.
 
+    function decodeV3Frame(data, binaryData) {
+      try {
+        if (binaryData && binaryData.length >= 2) {
+          var bytes = binaryData instanceof Uint8Array ? binaryData : new Uint8Array(binaryData);
+          var frame = QrProtocolV3.decodeFrame(bytes);
+          if (frame) return frame;
+        }
+        return QrProtocolV3.decodeFrame(data || '');
+      } catch (e) {
+        return null;
+      }
+    }
+
+    function concatByteParts(parts, limit) {
+      var total = 0;
+      for (var i = 0; i < parts.length; i++) total += parts[i].length;
+      if (typeof limit === 'number') total = Math.min(total, limit);
+      var out = new Uint8Array(total);
+      var offset = 0;
+      for (var p = 0; p < parts.length && offset < total; p++) {
+        var slice = parts[p].subarray(0, Math.min(parts[p].length, total - offset));
+        out.set(slice, offset);
+        offset += slice.length;
+      }
+      return out;
+    }
+
+    function assembleV3PreviewBytes(frameMap, k, meta) {
+      var parts = [meta.data];
+      var total = meta.data.length;
+      for (var i = 1; i < k; i++) {
+        if (!frameMap[i]) break;
+        parts.push(frameMap[i].body);
+        total += frameMap[i].body.length;
+        if (total >= meta.encodedSize) break;
+      }
+      return concatByteParts(parts, meta.encodedSize);
+    }
+
+    function assembleV3Result(frameMap, total, k, rsEnabled) {
+      var dataBodies = [];
+      var hasAllData = true;
+      for (var i = 0; i < k; i++) {
+        if (frameMap[i]) dataBodies[i] = frameMap[i].body;
+        else hasAllData = false;
+      }
+
+      var recovered = false;
+      if (!hasAllData && rsEnabled) {
+        var frames = [];
+        for (var f = 0; f < total; f++) frames[f] = frameMap[f] || null;
+        var decoded = QrProtocolV3.recoverBodies(frames, k);
+        if (!decoded) return null;
+        dataBodies = decoded;
+        recovered = true;
+      } else if (!hasAllData) {
+        return null;
+      }
+
+      var assembled = QrProtocolV3.assembleData(dataBodies);
+      assembled.recovered = recovered;
+      return assembled;
+    }
+
     // ===================== FILE UPLOAD DECODE =====================
 
     var decodedChunks = {};
@@ -814,6 +1094,7 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     var isZipped = false;
     var rsEnabled = false;
     var rsK = 0;
+    var protocolVersion = 2;
 
     dropZone.addEventListener('click', function() { fileInput.click(); });
     dropZone.addEventListener('dragover', function(e) { e.preventDefault(); dropZone.classList.add('dragover'); });
@@ -851,6 +1132,10 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       fileName = null;
       isGzipped = false;
       originalSize = null;
+      isZipped = false;
+      rsEnabled = false;
+      rsK = 0;
+      protocolVersion = 2;
       decodeStatus.textContent = 'Ready to decode';
       decodeProgress.style.width = '0%';
       chunkGrid.innerHTML = '';
@@ -997,10 +1282,76 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
         return { frames: frames, width: screenW, height: screenH };
       }
 
-      return { parseFrames: parseFrames };
+      function* parseFramesGen(gifData) {
+        var d = gifData;
+        var pos = 0;
+        if (d[0] !== 0x47 || d[1] !== 0x49 || d[2] !== 0x46) return;
+        pos = 6;
+        var screenW = d[pos] | (d[pos + 1] << 8); pos += 2;
+        var screenH = d[pos] | (d[pos + 1] << 8); pos += 2;
+        var packed = d[pos]; pos++;
+        pos += 2;
+        var gctFlag = (packed >> 7) & 1;
+        var gctSize = gctFlag ? (3 * (1 << ((packed & 7) + 1))) : 0;
+        var gct = null;
+        if (gctFlag) {
+          gct = new Uint8Array(gctSize);
+          for (var gi = 0; gi < gctSize; gi++) gct[gi] = d[pos + gi];
+          pos += gctSize;
+        }
+        yield { type: 'header', width: screenW, height: screenH };
+        var transIdx = -1;
+        while (pos < d.length - 1) {
+          var b = d[pos];
+          if (b === 0x3B) break;
+          if (b === 0x21) {
+            if (pos + 2 > d.length) break;
+            pos++; var label = d[pos]; pos++;
+            if (label === 0xF9) {
+              if (pos + 5 > d.length) break;
+              pos++; var gcPacked = d[pos]; pos++;
+              transIdx = (gcPacked & 1) ? d[pos + 2] : -1;
+              pos += 3; pos++;
+            } else {
+              while (pos < d.length) { var esz = d[pos]; pos++; if (esz === 0) break; if (pos + esz > d.length) break; pos += esz; }
+            }
+          } else if (b === 0x2C) {
+            if (pos + 9 > d.length) break;
+            pos++;
+            var imgL = d[pos] | (d[pos + 1] << 8); pos += 2;
+            var imgT = d[pos] | (d[pos + 1] << 8); pos += 2;
+            var imgW = d[pos] | (d[pos + 1] << 8); pos += 2;
+            var imgH = d[pos] | (d[pos + 1] << 8); pos += 2;
+            var imgPacked = d[pos]; pos++;
+            var lct = gct;
+            if ((imgPacked >> 7) & 1) {
+              var lctSize = 3 * (1 << ((imgPacked & 7) + 1));
+              if (pos + lctSize > d.length) break;
+              lct = new Uint8Array(d.buffer, d.byteOffset + pos, lctSize);
+              pos += lctSize;
+            }
+            if (pos >= d.length) break;
+            var minCodeSz = d[pos]; pos++;
+            var lzwBytes = [];
+            while (pos < d.length) { var fsz = d[pos]; pos++; if (fsz === 0) break; if (pos + fsz > d.length) break; for (var fj = 0; fj < fsz; fj++) lzwBytes.push(d[pos++]); }
+            var pixels = lzwDecode(lzwBytes, minCodeSz, imgW * imgH);
+            var rgba = new Uint8ClampedArray(imgW * imgH * 4);
+            var ct = lct || gct;
+            if (!ct) { yield { type: 'frame', rgba: rgba, width: imgW, height: imgH, left: imgL, top: imgT }; continue; }
+            for (var fp = 0; fp < pixels.length; fp++) {
+              var ci = pixels[fp]; var off = ci * 3;
+              if (off + 2 >= ct.length) continue;
+              rgba[fp * 4] = ct[off]; rgba[fp * 4 + 1] = ct[off + 1]; rgba[fp * 4 + 2] = ct[off + 2]; rgba[fp * 4 + 3] = (ci === transIdx) ? 0 : 255;
+            }
+            yield { type: 'frame', rgba: rgba, width: imgW, height: imgH, left: imgL, top: imgT };
+          } else { pos++; }
+        }
+      }
+
+      return { parseFrames: parseFrames, parseFramesGen: parseFramesGen };
     })();
 
-    function decodeGif() {
+    async function decodeGif() {
       cancelling = false;
       btnDecode.disabled = true;
       btnCancel.classList.remove('hidden');
@@ -1008,37 +1359,62 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       expectedTotal = null;
 
       var reader = new FileReader();
-      reader.onload = function() {
+      reader.onload = async function() {
         var data = new Uint8Array(reader.result);
-        var result = GifParser.parseFrames(data);
 
-        if (!result || result.frames.length === 0) {
+        decodeStatus.textContent = 'Parsing GIF...';
+        await new Promise(function(r) { setTimeout(r, 0); });
+
+        var gen = GifParser.parseFramesGen(data);
+        var first = gen.next();
+        if (first.done || !first.value || first.value.type !== 'header') {
           decodeStatus.textContent = 'Could not parse GIF frames.';
           btnDecode.disabled = false;
           btnCancel.classList.add('hidden');
           return;
         }
 
+        var screenW = first.value.width;
+        var screenH = first.value.height;
         var canvas = document.createElement('canvas');
-        canvas.width = result.width;
-        canvas.height = result.height;
+        canvas.width = screenW;
+        canvas.height = screenH;
         var ctx = canvas.getContext('2d', { willReadFrequently: true });
-        var prevData = ctx.createImageData(result.width, result.height);
+        var prevData = ctx.createImageData(screenW, screenH);
+        var frameCount = 0;
 
-        for (var f = 0; f < result.frames.length && !cancelling; f++) {
-          var frame = result.frames[f];
+        for (var step = gen.next(); !step.done && !cancelling; step = gen.next()) {
+          var frame = step.value;
+          frameCount++;
           ctx.putImageData(prevData, 0, 0);
           var frameImg = new ImageData(frame.rgba, frame.width, frame.height);
           ctx.putImageData(frameImg, frame.left, frame.top);
-          prevData = ctx.getImageData(0, 0, result.width, result.height);
-          var fullImg = ctx.getImageData(0, 0, result.width, result.height);
-          var code = jsQR(fullImg.data, fullImg.width, fullImg.height, { inversionAttempts: 'attemptBoth' });
-          if (code && code.data) processQRData(code.data);
-          var pct = ((f + 1) / result.frames.length * 100).toFixed(0);
-          decodeProgress.style.width = pct + '%';
+          prevData = ctx.getImageData(0, 0, screenW, screenH);
+          var fullImg = ctx.getImageData(0, 0, screenW, screenH);
+          var gImg = extractChannelImageData(fullImg, 1);
+          var gCode = jsQR(gImg.data, gImg.width, gImg.height, { inversionAttempts: 'attemptBoth' });
+          var gifLoc = null;
+          if (gCode) {
+            if (gCode.data || gCode.binaryData) processQRData(gCode.data || '', gCode.binaryData);
+            gifLoc = gCode.location;
+          }
+          [0, 2].forEach(function(ch) {
+            var code = gifLoc ? scanChannelWithHint(fullImg, ch, gifLoc) : (function() {
+              var chImg = extractChannelImageData(fullImg, ch);
+              return jsQR(chImg.data, chImg.width, chImg.height, { inversionAttempts: 'attemptBoth' });
+            })();
+            if (code && (code.data || code.binaryData)) processQRData(code.data || '', code.binaryData);
+          });
+
           var found = Object.keys(decodedChunks).length;
           var total = expectedTotal || '?';
-          decodeStatus.textContent = 'Scanned frame ' + (f + 1) + '/' + result.frames.length + ', found ' + found + '/' + total;
+          if (expectedTotal) decodeProgress.style.width = (found / expectedTotal * 100).toFixed(0) + '%';
+          decodeStatus.textContent = 'Scanned frame ' + frameCount + ', found ' + found + '/' + total;
+
+          if (frameCount % 20 === 0) {
+            await new Promise(function(r) { setTimeout(r, 0); });
+          }
+
           if (expectedTotal && found >= expectedTotal) break;
         }
 
@@ -1082,9 +1458,21 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
         canvas.height = Math.min(vh, 960);
         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        var code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: 'attemptBoth' });
         framesScanned++;
-        if (code && code.data) processQRData(code.data);
+        var vGImg = extractChannelImageData(imageData, 1);
+        var vGCode = jsQR(vGImg.data, vGImg.width, vGImg.height, { inversionAttempts: 'attemptBoth' });
+        var vidLoc = null;
+        if (vGCode) {
+          if (vGCode.data || vGCode.binaryData) processQRData(vGCode.data || '', vGCode.binaryData);
+          vidLoc = vGCode.location;
+        }
+        [0, 2].forEach(function(ch) {
+          var code = vidLoc ? scanChannelWithHint(imageData, ch, vidLoc) : (function() {
+            var chImg = extractChannelImageData(imageData, ch);
+            return jsQR(chImg.data, chImg.width, chImg.height, { inversionAttempts: 'attemptBoth' });
+          })();
+          if (code && (code.data || code.binaryData)) processQRData(code.data || '', code.binaryData);
+        });
         var pct = Math.min((time / duration) * 100, 99);
         decodeProgress.style.width = pct + '%';
         var found = Object.keys(decodedChunks).length;
@@ -1101,8 +1489,34 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       finishDecoding();
     }
 
-    function processQRData(data) {
+    function processQRData(data, binaryData) {
       try {
+        var v3Frame = decodeV3Frame(data, binaryData);
+        if (v3Frame) {
+          decodedChunks[v3Frame.i] = v3Frame;
+          protocolVersion = 3;
+          if (!expectedTotal) {
+            expectedTotal = v3Frame.n;
+            isGzipped = v3Frame.gz;
+            isZipped = v3Frame.zip;
+            rsEnabled = v3Frame.rs;
+            rsK = v3Frame.k;
+            if (v3Frame.meta) {
+              expectedHash = v3Frame.meta.hash;
+              fileName = v3Frame.meta.name;
+              originalSize = v3Frame.meta.originalSize;
+            }
+            initChunkGrid(expectedTotal);
+          } else if (v3Frame.meta) {
+            expectedHash = v3Frame.meta.hash;
+            fileName = v3Frame.meta.name;
+            originalSize = v3Frame.meta.originalSize;
+          }
+          updateChunkGrid();
+          updatePreview();
+          return;
+        }
+
         var chunk = JSON.parse(data);
         if ((chunk.v === 1 || chunk.v === 2) && typeof chunk.i === 'number' && typeof chunk.n === 'number' && chunk.d) {
           decodedChunks[chunk.i] = chunk.d;
@@ -1128,13 +1542,13 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     function initChunkGrid(total) {
       chunkGrid.innerHTML = '';
       fileGridCells = [];
-      for (var i = 0; i < total; i++) {
+      var numImages = Math.ceil(total / 3);
+      for (var i = 0; i < numImages; i++) {
         var cell = document.createElement('div');
-        var isParity = rsEnabled && i >= rsK;
-        cell.className = 'chunk-cell' + (isParity ? ' parity' : '');
+        cell.className = 'chunk-cell';
         cell.textContent = i;
-        cell.dataset.index = i;
-        cell.title = isParity ? 'Parity chunk' : 'Data chunk';
+        cell.dataset.imageIndex = i;
+        cell.title = 'Image ' + i + ' (chunks ' + (i*3) + '-' + Math.min(i*3+2, total-1) + ')';
         chunkGrid.appendChild(cell);
         fileGridCells.push(cell);
       }
@@ -1143,12 +1557,22 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     function updateChunkGrid() {
       var found = Object.keys(decodedChunks).length;
       chunkInfo.textContent = found + ' / ' + expectedTotal;
+      var total = expectedTotal;
       for (var i = 0; i < fileGridCells.length; i++) {
-        fileGridCells[i].className = 'chunk-cell' + (decodedChunks[i] !== undefined ? ' found' : ' missing');
+        var base = i * 3;
+        var hasG = decodedChunks[base] !== undefined || (total !== null && base >= total);
+        var hasR = decodedChunks[base+1] !== undefined || (total !== null && base+1 >= total);
+        var hasB = decodedChunks[base+2] !== undefined || (total !== null && base+2 >= total);
+        fileGridCells[i].style.background = 'rgb(' + (hasR?255:40) + ',' + (hasG?255:40) + ',' + (hasB?255:40) + ')';
+        fileGridCells[i].style.color = (hasR && hasG && hasB) ? '#111' : '#cdd6f4';
       }
     }
 
     function updatePreview() {
+      if (protocolVersion === 3) {
+        updatePreviewV3();
+        return;
+      }
       var found = Object.keys(decodedChunks).length;
       if (found === 0) return;
       previewSection.classList.remove('hidden');
@@ -1178,6 +1602,36 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       } catch (e) { previewCode.textContent = '[decoding...]'; }
     }
 
+    function updatePreviewV3() {
+      var found = Object.keys(decodedChunks).length;
+      if (found === 0) return;
+      previewSection.classList.remove('hidden');
+      var complete = expectedTotal && found >= expectedTotal;
+      var rsEnough = rsEnabled && found >= rsK;
+      var displayComplete = complete || rsEnough;
+      previewBadge.textContent = displayComplete ? (rsEnough && !complete ? 'RS recoverable' : 'complete') : 'partial (' + found + '/' + expectedTotal + ')';
+      previewBadge.className = 'badge ' + (displayComplete ? 'badge-success' : 'badge-info');
+
+      var first = decodedChunks[0];
+      if (!first || !first.meta) {
+        previewCode.textContent = '[waiting for metadata frame]';
+        return;
+      }
+
+      try {
+        var bytes = assembleV3PreviewBytes(decodedChunks, rsK, first.meta);
+        if (isGzipped) { try { bytes = pako.ungzip(bytes); } catch (e) { previewCode.textContent = '[decompressing...]'; return; } }
+        try {
+          var text = new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+          var lines = text.split('\n');
+          previewCode.textContent = lines.length > 30 ? lines.slice(0, 30).join('\n') + '\n\n... (' + lines.length + ' lines)' : text;
+        } catch (e) { previewCode.textContent = '[Binary — ' + formatSize(bytes.length) + ']'; }
+        previewMeta.innerHTML = '<span>' + formatSize(bytes.length) + '</span>' +
+          (fileName ? '<span>' + escapeHtml(fileName) + '</span>' : '') +
+          (isGzipped ? '<span class="badge badge-info">gzip</span>' : '');
+      } catch (e) { previewCode.textContent = '[decoding...]'; }
+    }
+
     function finishDecoding() {
       var foundCount = Object.keys(decodedChunks).length;
       var allFound = expectedTotal && foundCount >= expectedTotal;
@@ -1198,6 +1652,10 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
     }
 
     function assembleResult(complete, useRS) {
+      if (protocolVersion === 3) {
+        assembleResultV3(complete, useRS);
+        return;
+      }
       resultCard.classList.remove('hidden');
       resultCode.textContent = '';
       if (!complete && !useRS) { resultBadge.textContent = 'INCOMPLETE'; resultBadge.className = 'badge badge-error'; }
@@ -1263,6 +1721,59 @@ <h3 style="font-size:0.95em;margin-bottom:8px;">Files in archive <span class="ba
       }
     }
 
+    function assembleResultV3(complete, useRS) {
+      resultCard.classList.remove('hidden');
+      resultCode.textContent = '';
+
+      var assembled = assembleV3Result(decodedChunks, expectedTotal, rsK, rsEnabled);
+      if (!assembled) {
+        resultBadge.textContent = 'INCOMPLETE';
+        resultBadge.className = 'badge badge-error';
+        resultCode.textContent = 'Incomplete: missing required chunks.';
+        return;
+      }
+
+      var bytes = assembled.bytes;
+      var meta = assembled.meta;
+      expectedHash = meta.hash;
+      fileName = meta.name;
+      originalSize = meta.originalSize;
+
+      try {
+        if (isGzipped) { try { bytes = pako.ungzip(bytes); } catch (e) { resultCode.textContent = 'Error: gzip failed.'; resultBadge.textContent = 'ERROR'; resultBadge.className = 'badge badge-error'; return; } }
+
+        var metaHtml = '<span>' + formatSize(bytes.length) + '</span><span>' + escapeHtml(fileName || 'unknown') + '</span><span>Hash: ' + (expectedHash || '?') + '</span>';
+        if (isGzipped) metaHtml += '<span class="badge badge-info">gzip</span>';
+        if (isZipped) metaHtml += '<span class="badge badge-info">zip archive</span>';
+        if ((useRS || assembled.recovered) && assembled.recovered) metaHtml += '<span class="badge badge-comp">RS recovered</span>';
+        resultMeta.innerHTML = metaHtml;
+        resultBadge.textContent = 'VERIFIED';
+        resultBadge.className = 'badge badge-success';
+
+        if (isZipped) {
+          resultCode.textContent = '[' + formatSize(bytes.length) + ' ZIP archive — see files below]';
+          showZipBrowser(bytes);
+        } else {
+          var text;
+          try { text = new TextDecoder('utf-8', { fatal: true }).decode(bytes); } catch (e) { text = '[Binary — use Download]'; }
+          resultCode.textContent = text;
+
+          btnDownload.onclick = function() {
+            downloadBlob(bytes, fileName || 'decoded-file');
+          };
+          btnCopy.onclick = function() {
+            navigator.clipboard.writeText(resultCode.textContent).then(function() {
+              btnCopy.textContent = 'Copied!';
+              setTimeout(function() { btnCopy.textContent = 'Copy to Clipboard'; }, 2000);
+            });
+          };
+        }
+      } catch (e) {
+        resultCode.textContent = 'Error: ' + e.message;
+        resultBadge.textContent = 'ERROR'; resultBadge.className = 'badge badge-error';
+      }
+    }
+
     var zipBrowser = document.getElementById('zip-browser');
     var zipFileList = document.getElementById('zip-file-list');
     var zipCountBadge = document.getElementById('zip-count');
diff --git a/encoder/index.html b/encoder/index.html
index 72bc3cb..d897df1 100644
--- a/encoder/index.html
+++ b/encoder/index.html
@@ -8,6 +8,7 @@
   <script src="pako.min.js"></script>
   <script src="jszip.min.js"></script>
   <script src="reedsolomon.js"></script>
+  <script src="../shared/protocol-v3.js"></script>
   <style>
     :root {
       --bg: #1e1e2e;
@@ -191,7 +192,7 @@
 </head>
 <body>
   <h1>Code to QR — Encoder</h1>
-  <p class="subtitle">Convert any file into animated QR codes — now with compression and GIF export</p>
+  <p class="subtitle">Convert any file into animated QR codes — RGB tri-channel encoding, compression, and GIF export</p>
 
   <div class="card">
     <h2>1. Select Files</h2>
@@ -232,9 +233,9 @@ <h2>1. Select Files</h2>
     <div class="hidden" id="density-section" style="margin-top:12px;">
       <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;">
         <div style="display:flex;align-items:center;gap:8px;">
-          <label style="font-size:0.9em;">Chunk size:</label>
-          <input type="range" id="chunk-size-slider" min="100" max="800" step="50" value="500" style="width:120px;">
-          <span id="chunk-size-val" style="font-size:0.85em;min-width:50px;">500</span>
+          <label style="font-size:0.9em;">QR version:</label>
+          <input type="range" id="qr-version-slider" min="1" max="40" step="1" value="17" style="width:120px;">
+          <span id="qr-version-val" style="font-size:0.85em;min-width:95px;">v17 · 85x85</span>
         </div>
         <div style="display:flex;align-items:center;gap:8px;">
           <label style="font-size:0.9em;">Error correction:</label>
@@ -247,6 +248,7 @@ <h2>1. Select Files</h2>
         </div>
         <span class="badge" id="density-info">—</span>
       </div>
+      <div class="export-status hidden" id="encoder-error" style="margin-top:8px;"></div>
     </div>
   </div>
 
@@ -282,7 +284,7 @@ <h3>Export</h3>
       <div class="export-options">
         <button id="btn-gif">Export GIF</button>
         <button id="btn-video">Export Video (MP4/WebM)</button>
-        <label>Loops: <input type="number" id="gif-loops" value="2" min="1" max="10"></label>
+        <label>Loops: <input type="number" id="gif-loops" value="1" min="1" max="10"></label>
         <label>Delay (ms): <input type="number" id="gif-delay" value="400" min="100" max="2000" step="50"></label>
       </div>
       <div class="export-status hidden" id="gif-status"></div>
@@ -340,19 +342,44 @@ <h3>Export</h3>
     var playing = false;
     var fps = 3;
     var loopCount = 1;
-    var intervalId = null;
+    var playTimer = null;
     var effectiveChunkSize = 500;
     var fixedSize = { w: 440, h: 440 };
     var rsParity = 0;
 
     var densitySection = document.getElementById('density-section');
-    var chunkSizeSlider = document.getElementById('chunk-size-slider');
-    var chunkSizeVal = document.getElementById('chunk-size-val');
+    var qrVersionSlider = document.getElementById('qr-version-slider');
+    var qrVersionVal = document.getElementById('qr-version-val');
     var ecLevelSelect = document.getElementById('ec-level');
     var densityInfo = document.getElementById('density-info');
-    var userChunkSize = 500;
+    var encoderError = document.getElementById('encoder-error');
+    var userQrVersion = 20;
     var userEcLevel = 'M';
 
+    var QR_BYTE_CAPACITY = {
+      L: [0,17,32,53,78,106,134,154,192,230,271,321,367,425,458,520,586,644,718,792,858,929,1003,1091,1171,1273,1367,1465,1528,1628,1732,1840,1952,2068,2188,2303,2431,2563,2699,2809,2953],
+      M: [0,14,26,42,62,84,106,122,152,180,213,251,287,331,362,412,450,504,560,624,666,711,779,857,911,997,1059,1125,1190,1264,1370,1452,1538,1628,1722,1809,1911,1989,2099,2213,2331],
+      Q: [0,11,20,32,46,60,74,86,108,130,151,177,203,241,258,292,322,364,394,442,482,509,565,611,661,715,751,805,868,908,982,1030,1112,1168,1228,1283,1351,1423,1499,1579,1663],
+      H: [0,7,14,24,34,44,58,64,84,98,119,137,155,177,194,220,250,280,310,338,382,403,439,461,511,535,593,625,658,698,742,790,842,898,958,983,1051,1093,1139,1219,1273]
+    };
+
+    function updateQrVersionLabel() {
+      var modules = userQrVersion * 4 + 17;
+      qrVersionVal.textContent = 'v' + userQrVersion + ' · ' + modules + 'x' + modules;
+    }
+    updateQrVersionLabel();
+
+    function showEncoderError(message) {
+      encoderError.textContent = message;
+      encoderError.classList.remove('hidden');
+      encoderError.style.color = 'var(--error)';
+    }
+
+    function clearEncoderError() {
+      encoderError.textContent = '';
+      encoderError.classList.add('hidden');
+    }
+
     function setRsParity(n) {
       rsParity = n;
       var btns = [btnRsOff, btnRs2, btnRs5, btnRs10];
@@ -368,87 +395,100 @@ <h3>Export</h3>
     btnRs5.addEventListener('click', function() { setRsParity(5); reEncode(); });
     btnRs10.addEventListener('click', function() { setRsParity(10); reEncode(); });
 
-    chunkSizeSlider.addEventListener('input', function() {
-      userChunkSize = parseInt(chunkSizeSlider.value);
-      chunkSizeVal.textContent = userChunkSize;
-      debouncedUpdateDensityInfo();
+    qrVersionSlider.addEventListener('input', function() {
+      stopPlayback();
+      userQrVersion = parseInt(qrVersionSlider.value);
+      updateQrVersionLabel();
+      updateDensityInfo();
+    });
+    qrVersionSlider.addEventListener('change', function() {
+      reEncode();
     });
-    chunkSizeSlider.addEventListener('change', function() { reEncode(); });
     ecLevelSelect.addEventListener('change', function() {
       userEcLevel = ecLevelSelect.value;
       updateDensityInfo();
       reEncode();
     });
 
-    var maxChunkSizeCache = {};
+    function getSelectedQrCapacity() {
+      return QR_BYTE_CAPACITY[userEcLevel][userQrVersion];
+    }
 
-    function getMaxChunkSize(ec) {
-      if (maxChunkSizeCache[ec]) return maxChunkSizeCache[ec];
-      var sizes = [800, 750, 700, 650, 600, 550, 500, 450, 400, 350, 300, 250, 200, 150, 100];
-      for (var s = 0; s < sizes.length; s++) {
-        var payload = JSON.stringify({
-          v: 2, i: 0, n: 999, hash: '12345678', name: 'x'.repeat(40),
-          rs: 1, k: 999, sz: 99999, t: 'd', d: 'A'.repeat(sizes[s])
+    function buildFramesForCapacity(dataBytes, options, capacity) {
+      var low = 1;
+      var high = capacity;
+      var best = null;
+      var bestBodySize = 0;
+      while (low <= high) {
+        var mid = Math.floor((low + high) / 2);
+        var frames = QrProtocolV3.buildFrames(dataBytes, {
+          name: options.name,
+          hash: options.hash,
+          originalSize: options.originalSize,
+          chunkBodySize: mid,
+          gz: options.gz,
+          zip: options.zip,
+          rsParity: options.rsParity
         });
-        try {
-          var qr = qrcode(0, ec);
-          qr.addData(payload);
-          qr.make();
-          maxChunkSizeCache[ec] = sizes[s];
-          return sizes[s];
-        } catch (e) { continue; }
+        var fits = true;
+        for (var i = 0; i < frames.length; i++) {
+          if (frames[i].bytes.length > capacity) {
+            fits = false;
+            break;
+          }
+        }
+        if (fits) {
+          best = frames;
+          bestBodySize = mid;
+          low = mid + 1;
+        } else {
+          high = mid - 1;
+        }
       }
-      maxChunkSizeCache[ec] = 100;
-      return 100;
+      return { frames: best, bodySize: bestBodySize };
     }
 
     function updateDensityInfo() {
-      if (!lastRawBytes) { densityInfo.textContent = '—'; return; }
-      var info = getCompressedBase64();
-      var base64 = info.base64;
-      var k = Math.ceil(base64.length / userChunkSize);
-      var payload = JSON.stringify({
-        v: 2, i: 0, n: k, hash: '12345678', name: 'x'.repeat(40),
-        rs: 1, k: k, sz: 99999, t: 'd', d: 'A'.repeat(userChunkSize)
-      });
-      try {
-        var qr = qrcode(0, userEcLevel);
-        qr.addData(payload);
-        qr.make();
-        var modules = qr.getModuleCount();
-        var cellSize = Math.floor(400 / modules);
-        var ver = Math.round((modules - 17) / 4);
-        densityInfo.textContent = k + ' chunks \u00b7 v' + ver + ' QR \u00b7 ' + cellSize + 'px cells';
-        densityInfo.className = 'badge ' + (cellSize >= 5 ? 'badge-success' : cellSize >= 3 ? 'badge-info' : 'badge-error');
-      } catch (e) {
-        var max = getMaxChunkSize(userEcLevel);
-        densityInfo.textContent = 'too large (max ' + max + ')';
+      var capacity = getSelectedQrCapacity();
+      var modules = userQrVersion * 4 + 17;
+      if (!lastRawBytes) {
+        densityInfo.textContent = 'capacity ' + capacity + ' bytes/frame · ' + modules + 'x' + modules + ' modules';
+        densityInfo.className = 'badge badge-info';
+        return;
+      }
+      var info = getCompressedData();
+      var built = buildFramesForCapacity(info.dataToEncode, {
+        name: lastDisplayName || 'file',
+        hash: '12345678',
+        originalSize: lastRawBytes.length,
+        gz: info.useCompressed,
+        zip: lastIsZip,
+        rsParity: rsParity
+      }, capacity);
+      if (!built.frames) {
+        densityInfo.textContent = 'metadata too large for selected version';
         densityInfo.className = 'badge badge-error';
+        return;
       }
+      var cellSize = Math.floor(400 / modules);
+      densityInfo.textContent = built.frames.length + ' chunks · ' + built.bodySize + ' body bytes/frame · capacity ' + capacity + ' · ' + modules + 'x' + modules + ' modules';
+      densityInfo.className = 'badge ' + (cellSize >= 5 ? 'badge-success' : cellSize >= 3 ? 'badge-info' : 'badge-error');
     }
 
     var lastRawBytes = null;
     var lastDisplayName = '';
     var lastIsZip = false;
     var cachedCompressed = null;
-    var cachedBase64 = '';
-    var densityDebounceId = null;
 
-    function getCompressedBase64() {
+    function getCompressedData() {
       if (cachedCompressed && cachedCompressed.rawBytes === lastRawBytes) return cachedCompressed;
       var compressed = pako.gzip(lastRawBytes);
       var useCompressed = compressed.length < lastRawBytes.length;
       var dataToEncode = useCompressed ? compressed : lastRawBytes;
-      var base64 = bytesToBase64(dataToEncode);
-      cachedCompressed = { rawBytes: lastRawBytes, base64: base64, compressed: compressed, useCompressed: useCompressed };
+      cachedCompressed = { rawBytes: lastRawBytes, dataToEncode: dataToEncode, compressed: compressed, useCompressed: useCompressed };
       return cachedCompressed;
     }
 
-    function debouncedUpdateDensityInfo() {
-      if (densityDebounceId) clearTimeout(densityDebounceId);
-      densityDebounceId = setTimeout(updateDensityInfo, 150);
-    }
-
     function reEncode() {
       if (!lastRawBytes) return;
       encodeBytes(lastRawBytes, lastDisplayName, lastIsZip);
@@ -473,9 +513,9 @@ <h3>Export</h3>
       return btoa(str);
     }
 
-    function drawQrToCanvas(cvs, text, fixedWidth, fixedHeight) {
-      var qr = qrcode(0, userEcLevel);
-      qr.addData(text);
+    function drawQrToCanvas(cvs, data, fixedWidth, fixedHeight) {
+      var qr = qrcode(userQrVersion, userEcLevel);
+      qr.addData(data);
       qr.make();
 
       var moduleCount = qr.getModuleCount();
@@ -505,25 +545,51 @@ <h3>Export</h3>
       }
     }
 
-    function getQrModuleCount(text) {
-      try {
-        var qr = qrcode(0, userEcLevel);
-        qr.addData(text);
-        qr.make();
-        return qr.getModuleCount();
-      } catch (e) {
-        return 0;
+    function chunkPayload(chunk) {
+      return chunk && chunk.bytes instanceof Uint8Array ? chunk.bytes : JSON.stringify(chunk);
+    }
+
+    // Overlays three independent QR codes into a single RGB image.
+    // Each channel is driven by its own QR's dark/light state, so every pixel
+    // is one of 8 pure colours (the corners of the RGB cube). A null channel
+    // contributes all-light (255) to that component, appearing as the
+    // complement of whichever other channels are active.
+    function drawRgbQrToCanvas(cvs, dataG, dataR, dataB, fw, fh) {
+      var qrG = qrcode(userQrVersion, userEcLevel);
+      qrG.addData(dataG); qrG.make();
+      var qrR = null, qrB = null;
+      if (dataR) { qrR = qrcode(userQrVersion, userEcLevel); qrR.addData(dataR); qrR.make(); }
+      if (dataB) { qrB = qrcode(userQrVersion, userEcLevel); qrB.addData(dataB); qrB.make(); }
+
+      var moduleCount = qrG.getModuleCount();
+      var margin = 20;
+      var availSize = Math.min(fw, fh) - margin * 2;
+      var cellSize = Math.max(2, Math.floor(availSize / moduleCount));
+      var qrSize = cellSize * moduleCount;
+      var offsetX = Math.floor((fw - qrSize) / 2);
+      var offsetY = Math.floor((fh - qrSize) / 2);
+
+      cvs.width = fw; cvs.height = fh;
+      var ctx = cvs.getContext('2d');
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, fw, fh);
+
+      for (var row = 0; row < moduleCount; row++) {
+        for (var col = 0; col < moduleCount; col++) {
+          var r = (qrR && qrR.isDark(row, col)) ? 0 : 255;
+          var g = qrG.isDark(row, col) ? 0 : 255;
+          var b = (qrB && qrB.isDark(row, col)) ? 0 : 255;
+          if (r === 255 && g === 255 && b === 255) continue;
+          ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
+          ctx.fillRect(offsetX + col * cellSize, offsetY + row * cellSize, cellSize, cellSize);
+        }
       }
     }
 
     function calcFixedSize(chunksArr) {
-      var maxMod = 0;
-      for (var i = 0; i < chunksArr.length; i++) {
-        var m = getQrModuleCount(JSON.stringify(chunksArr[i]));
-        if (m > maxMod) maxMod = m;
-      }
-      var cellSize = Math.max(4, Math.floor(400 / maxMod));
-      var size = cellSize * maxMod + 40;
+      var modules = userQrVersion * 4 + 17;
+      var cellSize = Math.max(4, Math.floor(400 / modules));
+      var size = cellSize * modules + 40;
       return { w: size, h: size };
     }
 
@@ -532,18 +598,35 @@ <h3>Export</h3>
         drawQrToCanvas(cvs, text, fixedSize.w, fixedSize.h);
         return true;
       } catch (err) {
-        var ctx = cvs.getContext('2d');
-        cvs.width = fixedSize.w;
-        cvs.height = fixedSize.h;
-        ctx.fillStyle = '#FFFFFF';
-        ctx.fillRect(0, 0, cvs.width, cvs.height);
-        ctx.fillStyle = '#FF0000';
-        ctx.font = '14px sans-serif';
-        ctx.fillText('Error: ' + err.message, 20, cvs.height / 2);
+        renderCanvasMessage(cvs, 'Error: ' + (err.message || err));
         return false;
       }
     }
 
+    function renderCanvasMessage(cvs, message) {
+      cvs.width = fixedSize.w;
+      cvs.height = fixedSize.h;
+      var ctx = cvs.getContext('2d');
+      ctx.fillStyle = '#FFFFFF';
+      ctx.fillRect(0, 0, cvs.width, cvs.height);
+      ctx.fillStyle = '#B00020';
+      ctx.font = '14px sans-serif';
+      var words = String(message).split(' ');
+      var line = '';
+      var y = 32;
+      for (var i = 0; i < words.length; i++) {
+        var test = line ? line + ' ' + words[i] : words[i];
+        if (ctx.measureText(test).width > cvs.width - 40 && line) {
+          ctx.fillText(line, 20, y);
+          line = words[i];
+          y += 20;
+        } else {
+          line = test;
+        }
+      }
+      if (line) ctx.fillText(line, 20, y);
+    }
+
     dropZone.addEventListener('dragover', function(e) { e.preventDefault(); dropZone.classList.add('dragover'); });
     dropZone.addEventListener('dragleave', function() { dropZone.classList.remove('dragover'); });
     dropZone.addEventListener('drop', function(e) {
@@ -640,7 +723,7 @@ <h3>Export</h3>
           var rawBytes = new Uint8Array(reader.result);
           encodeBytes(rawBytes, file.name, false);
         } catch (err) {
-          alert('Error: ' + err.message);
+          showEncoderError('Error reading file: ' + (err.message || err));
           console.error(err);
         }
       };
@@ -680,6 +763,7 @@ <h3>Export</h3>
 
     function encodeBytes(rawBytes, displayName, isZip) {
       stopPlayback();
+      clearEncoderError();
       lastRawBytes = rawBytes;
       lastDisplayName = displayName;
       lastIsZip = isZip;
@@ -691,71 +775,35 @@ <h3>Export</h3>
       var compressionFlag = useCompressed ? 1 : 0;
 
       var hash = simpleHash(rawBytes);
-      var base64 = bytesToBase64(dataToEncode);
-
-      effectiveChunkSize = userChunkSize;
-      var maxForEc = getMaxChunkSize(userEcLevel);
-      if (effectiveChunkSize > maxForEc) effectiveChunkSize = maxForEc;
-
-      var dataChunkCount = Math.ceil(base64.length / effectiveChunkSize);
-      var dataChunks = [];
-      for (var i = 0; i < dataChunkCount; i++) {
-        dataChunks.push(base64.slice(i * effectiveChunkSize, (i + 1) * effectiveChunkSize));
-      }
-
-      var parityChunkData = [];
-      if (rsParity > 0 && dataChunkCount > 0) {
-        var chunkBytes = dataChunks.map(function(d) {
-          var b = [];
-          for (var c = 0; c < d.length; c++) b.push(d.charCodeAt(c));
-          return new Uint8Array(b);
-        });
-        parityChunkData = ReedSolomon.encode(chunkBytes, rsParity);
-      }
-
-      var totalCount = dataChunkCount + parityChunkData.length;
-      chunks = [];
-
-      for (var di = 0; di < dataChunkCount; di++) {
-        chunks.push({
-          v: 2,
-          i: di,
-          n: totalCount,
-          hash: hash,
-          name: displayName,
-          gz: compressionFlag,
-          zip: isZip ? 1 : 0,
-          rs: rsParity > 0 ? 1 : 0,
-          k: dataChunkCount,
-          sz: rawBytes.length,
-          t: 'd',
-          d: dataChunks[di]
-        });
-      }
+      var capacity = getSelectedQrCapacity();
+      var built = buildFramesForCapacity(dataToEncode, {
+        name: displayName,
+        hash: hash,
+        originalSize: rawBytes.length,
+        gz: compressionFlag === 1,
+        zip: isZip ? true : false,
+        rsParity: rsParity
+      }, capacity);
+      chunks = built.frames || [];
+      effectiveChunkSize = built.bodySize;
+      fixedSize = chunks.length ? calcFixedSize(chunks) : {
+        w: 440,
+        h: 440,
+        error: 'Metadata is too large for the selected QR version and error correction level.',
+        detail: ''
+      };
 
-      for (var pi = 0; pi < parityChunkData.length; pi++) {
-        var pRaw = '';
-        for (var b2 = 0; b2 < parityChunkData[pi].length; b2++) {
-          pRaw += String.fromCharCode(parityChunkData[pi][b2]);
-        }
-        chunks.push({
-          v: 2,
-          i: dataChunkCount + pi,
-          n: totalCount,
-          hash: hash,
-          name: displayName,
-          gz: compressionFlag,
-          zip: isZip ? 1 : 0,
-          rs: rsParity > 0 ? 1 : 0,
-          k: dataChunkCount,
-          sz: rawBytes.length,
-          t: 'p',
-          d: btoa(pRaw)
-        });
+      if (fixedSize.error) {
+        fileMeta.classList.remove('hidden');
+        fileMeta.innerHTML = '<strong>' + escapeHtml(displayName) + '</strong> &middot; <span class="badge badge-error">' + escapeHtml(fixedSize.error) + '</span>';
+        densitySection.classList.remove('hidden');
+        encodeCard.classList.remove('hidden');
+        qrMeta.innerHTML = '<span class="badge badge-error">' + escapeHtml(fixedSize.error + (fixedSize.detail ? ' ' + fixedSize.detail : '')) + '</span>';
+        showEncoderError(fixedSize.error + (fixedSize.detail ? ' ' + fixedSize.detail : ''));
+        renderCanvasMessage(canvas, fixedSize.error + (fixedSize.detail ? ' ' + fixedSize.detail : ''));
+        return;
       }
 
-      fixedSize = calcFixedSize(chunks);
-
       fileMeta.classList.remove('hidden');
       fileMeta.innerHTML = '<strong>' + escapeHtml(displayName) + '</strong> &middot; ' + formatSize(rawBytes.length) + ' &middot; ' + chunks.length + ' chunk' + (chunks.length !== 1 ? 's' : '') + ' &middot; Hash: <span style="font-size:1em;color:var(--accent)">' + hash + '</span>';
 
@@ -778,10 +826,15 @@ <h3>Export</h3>
       setRsParity(rsParity);
 
       encodeCard.classList.remove('hidden');
-      var metaParts = ['Base64 payload: ' + formatSize(base64.length) + ' &middot; chunk size: ' + effectiveChunkSize + ' bytes'];
+      var metaParts = [
+        'Binary payload: ' + formatSize(dataToEncode.length),
+        'QR v' + userQrVersion + '-' + userEcLevel,
+        'capacity: ' + capacity + ' bytes/frame',
+        'body: ' + effectiveChunkSize + ' bytes/frame'
+      ];
       if (useCompressed) metaParts.push('<span class="badge badge-comp">gzip compressed</span>');
       if (isZip) metaParts.push('<span class="badge badge-comp">zipped</span>');
-      if (rsParity > 0) metaParts.push('<span class="badge badge-comp">RS +' + parityChunkData.length + ' parity (recover ' + rsParity + ')</span>');
+      if (rsParity > 0) metaParts.push('<span class="badge badge-comp">RS +' + (chunks.length - chunks[0].k) + ' parity (recover ' + rsParity + ')</span>');
       qrMeta.innerHTML = metaParts.join(' &middot; ');
 
       currentFrame = 0;
@@ -791,19 +844,27 @@ <h3>Export</h3>
       startPlayback();
     }
 
-    function renderFrame(index) {
-      var chunk = chunks[index];
-      var payload = JSON.stringify(chunk);
-      renderQrToCanvas(canvas, payload);
+    function getNumImages() { return Math.ceil(chunks.length / 3); }
 
-      var pct = ((index + 1) / chunks.length * 100).toFixed(0);
-      progressFill.style.width = pct + '%';
-      frameInfo.textContent = 'Frame ' + (index + 1) + ' / ' + chunks.length;
+    function renderFrame(imageIdx) {
+      var base = imageIdx * 3;
+      var dataG = chunkPayload(chunks[base]);
+      var dataR = chunks[base + 1] ? chunkPayload(chunks[base + 1]) : null;
+      var dataB = chunks[base + 2] ? chunkPayload(chunks[base + 2]) : null;
+      try {
+        drawRgbQrToCanvas(canvas, dataG, dataR, dataB, fixedSize.w, fixedSize.h);
+      } catch(err) {
+        renderCanvasMessage(canvas, 'Error: ' + (err.message || err));
+        return;
+      }
+      var numImages = getNumImages();
+      progressFill.style.width = ((imageIdx + 1) / numImages * 100).toFixed(0) + '%';
+      frameInfo.textContent = 'Image ' + (imageIdx + 1) + ' / ' + numImages + ' · ' + chunks.length + ' chunks';
     }
 
     function nextFrame() {
       currentFrame++;
-      if (currentFrame >= chunks.length) {
+      if (currentFrame >= getNumImages()) {
         currentFrame = 0;
         loopCount++;
         loopBadge.textContent = 'Loop ' + loopCount;
@@ -816,26 +877,26 @@ <h3>Export</h3>
       playing = true;
       btnPlay.disabled = true;
       btnPause.disabled = false;
-      intervalId = setInterval(nextFrame, 1000 / fps);
+      playTimer = setInterval(nextFrame, 1000 / fps);
     }
 
     function stopPlayback() {
       playing = false;
       btnPlay.disabled = false;
       btnPause.disabled = true;
-      if (intervalId) { clearInterval(intervalId); intervalId = null; }
+      if (playTimer) { clearInterval(playTimer); playTimer = null; }
     }
 
     btnPlay.addEventListener('click', startPlayback);
     btnPause.addEventListener('click', stopPlayback);
     btnNext.addEventListener('click', function() {
       stopPlayback();
-      currentFrame = (currentFrame + 1) % chunks.length;
+      currentFrame = (currentFrame + 1) % getNumImages();
       renderFrame(currentFrame);
     });
     btnPrev.addEventListener('click', function() {
       stopPlayback();
-      currentFrame = (currentFrame - 1 + chunks.length) % chunks.length;
+      currentFrame = (currentFrame - 1 + getNumImages()) % getNumImages();
       renderFrame(currentFrame);
     });
     btnReset.addEventListener('click', function() {
@@ -849,8 +910,8 @@ <h3>Export</h3>
       fps = parseInt(e.target.value);
       fpsVal.textContent = fps;
       if (playing) {
-        clearInterval(intervalId);
-        intervalId = setInterval(nextFrame, 1000 / fps);
+        clearInterval(playTimer);
+        playTimer = setInterval(nextFrame, 1000 / fps);
       }
     });
 
@@ -925,22 +986,24 @@ <h3>Export</h3>
         return output;
       }
 
-      function encode(frames, width, height, delayMs, loops) {
+      function* encode(frames, width, height, delayMs, loops) {
         var buf = [];
 
         writeString(buf, 'GIF89a');
         writeShort(buf, width);
         writeShort(buf, height);
-        writeByte(buf, 0x80);
-        writeByte(buf, 0);
+        // 0x82: GCT present, size field = 2 → 2^(2+1) = 8 colours. Background = 7 (white).
+        writeByte(buf, 0x82);
+        writeByte(buf, 7);
         writeByte(buf, 0);
 
-        writeByte(buf, 0xff);
-        writeByte(buf, 0xff);
-        writeByte(buf, 0xff);
-        writeByte(buf, 0x00);
-        writeByte(buf, 0x00);
-        writeByte(buf, 0x00);
+        // Palette index = R_light | (G_light << 1) | (B_light << 2)
+        // giving: 0=black 1=red 2=green 3=yellow 4=blue 5=magenta 6=cyan 7=white
+        var gifPalette = [
+          0,0,0,       255,0,0,   0,255,0,   255,255,0,
+          0,0,255,     255,0,255, 0,255,255, 255,255,255
+        ];
+        for (var pc = 0; pc < gifPalette.length; pc++) writeByte(buf, gifPalette[pc]);
 
         writeByte(buf, 0x21);
         writeByte(buf, 0xff);
@@ -951,7 +1014,7 @@ <h3>Export</h3>
         writeShort(buf, loops);
         writeByte(buf, 0);
 
-        var minCodeSize = 2;
+        var minCodeSize = 3;
 
         for (var f = 0; f < frames.length; f++) {
           var framePixels = frames[f];
@@ -983,6 +1046,8 @@ <h3>Export</h3>
             }
           }
           writeByte(buf, 0);
+
+          if ((f + 1) % 20 === 0) yield;
         }
 
         writeByte(buf, 0x3b);
@@ -990,11 +1055,21 @@ <h3>Export</h3>
         return new Uint8Array(buf);
       }
 
-      return { encode: encode };
+      async function encodeAsync(frames, width, height, delayMs, loops) {
+        var gen = encode(frames, width, height, delayMs, loops);
+        var step;
+        while (!(step = gen.next()).done) {
+          await new Promise(function(r) { setTimeout(r, 0); });
+        }
+        return step.value;
+      }
+
+      return { encode: encodeAsync };
     })();
 
-    btnGif.addEventListener('click', function() {
+    btnGif.addEventListener('click', async function() {
       if (chunks.length === 0) return;
+      fixedSize = calcFixedSize(chunks);
 
       btnGif.disabled = true;
       gifStatus.classList.remove('hidden');
@@ -1002,7 +1077,8 @@ <h3>Export</h3>
 
       var loops = parseInt(gifLoopsInput.value) || 2;
       var delay = parseInt(gifDelayInput.value) || 400;
-      var totalFrames = chunks.length * loops;
+      var numImages = getNumImages();
+      var totalFrames = numImages * loops;
       var gw = fixedSize.w;
       var gh = fixedSize.h;
 
@@ -1014,44 +1090,65 @@ <h3>Export</h3>
       var frames = [];
 
       for (var loop = 0; loop < loops; loop++) {
-        for (var i = 0; i < chunks.length; i++) {
-          var payload = JSON.stringify(chunks[i]);
-          drawQrToCanvas(tempCanvas, payload, gw, gh);
+        for (var i = 0; i < numImages; i++) {
+          var base = i * 3;
+          var dataG = chunkPayload(chunks[base]);
+          var dataR = chunks[base + 1] ? chunkPayload(chunks[base + 1]) : null;
+          var dataB = chunks[base + 2] ? chunkPayload(chunks[base + 2]) : null;
+          try {
+            drawRgbQrToCanvas(tempCanvas, dataG, dataR, dataB, gw, gh);
+          } catch (err) {
+            gifStatus.textContent = 'Error rendering frame ' + (i + 1) + ': ' + (err.message || err);
+            btnGif.disabled = false;
+            return;
+          }
           var imgData = ctx.getImageData(0, 0, gw, gh);
           var pixels = new Uint8Array(gw * gh);
           for (var p = 0; p < pixels.length; p++) {
-            pixels[p] = (imgData.data[p * 4] < 128) ? 1 : 0;
+            var ri = imgData.data[p * 4] >= 128 ? 1 : 0;
+            var gi = imgData.data[p * 4 + 1] >= 128 ? 1 : 0;
+            var bi = imgData.data[p * 4 + 2] >= 128 ? 1 : 0;
+            pixels[p] = ri | (gi << 1) | (bi << 2);
           }
           frames.push(pixels);
+
+          if (frames.length % 20 === 0) {
+            gifStatus.textContent = 'Captured ' + frames.length + '/' + totalFrames + ' frames...';
+            await new Promise(function(r) { setTimeout(r, 0); });
+          }
         }
-        gifStatus.textContent = 'Captured ' + frames.length + '/' + totalFrames + ' frames...';
       }
 
       gifStatus.textContent = 'Encoding GIF (' + frames.length + ' frames)...';
+      await new Promise(function(r) { setTimeout(r, 0); });
 
-      setTimeout(function() {
-        try {
-          var gifBytes = SimpleGifEncoder.encode(frames, gw, gh, delay, loops);
-          var blob = new Blob([gifBytes], { type: 'image/gif' });
-          var url = URL.createObjectURL(blob);
-          var a = document.createElement('a');
-          a.href = url;
-          var baseName = chunks[0].name || 'file';
-          a.download = baseName + '.qr.gif';
-          a.click();
-          URL.revokeObjectURL(url);
-
-          gifStatus.textContent = 'Done! GIF saved (' + formatSize(blob.size) + ', ' + frames.length + ' frames)';
-        } catch (err) {
-          gifStatus.textContent = 'Error: ' + err.message;
-          console.error(err);
-        }
-        btnGif.disabled = false;
-      }, 50);
+      try {
+        var gifBytes = await SimpleGifEncoder.encode(frames, gw, gh, delay, loops);
+        var blob = new Blob([gifBytes], { type: 'image/gif' });
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement('a');
+        a.href = url;
+        var baseName = chunks[0].name || 'file';
+        a.download = baseName + '.qr.gif';
+        a.click();
+        URL.revokeObjectURL(url);
+
+        gifStatus.textContent = 'Done! GIF saved (' + formatSize(blob.size) + ', ' + frames.length + ' frames)';
+      } catch (err) {
+        gifStatus.textContent = 'Error: ' + err.message;
+        console.error(err);
+      }
+      btnGif.disabled = false;
     });
 
     btnVideo.addEventListener('click', function() {
       if (chunks.length === 0) return;
+      fixedSize = calcFixedSize(chunks);
+      if (fixedSize.error) {
+        videoStatus.classList.remove('hidden');
+        videoStatus.textContent = fixedSize.error;
+        return;
+      }
 
       var mimeType = '';
       var ext = '';
@@ -1070,7 +1167,8 @@ <h3>Export</h3>
       }
 
       if (!mimeType) {
-        alert('Your browser does not support video recording. Try Chrome or Edge.');
+        videoStatus.classList.remove('hidden');
+        videoStatus.textContent = 'Your browser does not support video recording. Try Chrome or Edge.';
         return;
       }
 
@@ -1081,7 +1179,8 @@ <h3>Export</h3>
       var delay = parseInt(gifDelayInput.value) || 400;
       var gw = fixedSize.w;
       var gh = fixedSize.h;
-      var totalFrames = chunks.length * loops;
+      var numImages = getNumImages();
+      var totalFrames = numImages * loops;
 
       var recCanvas = document.createElement('canvas');
       recCanvas.width = gw;
@@ -1116,8 +1215,8 @@ <h3>Export</h3>
 
       var frameQueue = [];
       for (var loop = 0; loop < loops; loop++) {
-        for (var i = 0; i < chunks.length; i++) {
-          frameQueue.push(chunks[i]);
+        for (var i = 0; i < numImages; i++) {
+          frameQueue.push(i);
         }
       }
 
@@ -1128,8 +1227,12 @@ <h3>Export</h3>
           return;
         }
 
-        var payload = JSON.stringify(frameQueue[qi]);
-        drawQrToCanvas(recCanvas, payload, gw, gh);
+        var imgIdx = frameQueue[qi];
+        var base = imgIdx * 3;
+        var dataG = chunkPayload(chunks[base]);
+        var dataR = chunks[base + 1] ? chunkPayload(chunks[base + 1]) : null;
+        var dataB = chunks[base + 2] ? chunkPayload(chunks[base + 2]) : null;
+        drawRgbQrToCanvas(recCanvas, dataG, dataR, dataB, gw, gh);
 
         if (track.requestFrame) {
           track.requestFrame();
diff --git a/encoder/qrcode.js b/encoder/qrcode.js
index 76889b5..ea6352b 100644
--- a/encoder/qrcode.js
+++ b/encoder/qrcode.js
@@ -737,6 +737,12 @@ var qrcode = function() {
   qrcode.stringToBytesFuncs = {
     'default' : function(s) {
       var bytes = [];
+      if (typeof s !== 'string' && s && typeof s.length == 'number') {
+        for (var j = 0; j < s.length; j += 1) {
+          bytes.push(s[j] & 0xff);
+        }
+        return bytes;
+      }
       for (var i = 0; i < s.length; i += 1) {
         var c = s.charCodeAt(i);
         bytes.push(c & 0xff);
diff --git a/index.html b/index.html
index d565e86..0b2fbdc 100644
--- a/index.html
+++ b/index.html
@@ -245,7 +245,7 @@ <h3>GIF & Video Export</h3>
         <div class="feature-card">
           <span class="icon">&#128247;</span>
           <h3>Live Camera Scan</h3>
-          <p>Uses BarcodeDetector API (hardware-accelerated) with jsQR fallback. Real-time chunk tracking with FPS counter and progress grid.</p>
+          <p>Uses jsQR for live camera decoding, including raw binary QR payloads. Real-time chunk tracking with FPS counter and progress grid.</p>
         </div>
         <div class="feature-card">
           <span class="icon">&#9881;&#65039;</span>
diff --git a/shared/protocol-v3.js b/shared/protocol-v3.js
new file mode 100644
index 0000000..1f48a64
--- /dev/null
+++ b/shared/protocol-v3.js
@@ -0,0 +1,229 @@
+var QrProtocolV3 = (function() {
+  var MAGIC_0 = 0x51; // Q
+  var MAGIC_1 = 0x33; // 3
+  var FLAG_GZIP = 1 << 0;
+  var FLAG_ZIP = 1 << 1;
+  var FLAG_RS = 1 << 2;
+  var FLAG_PARITY = 1 << 3;
+
+  function writeVarint(out, value) {
+    value = Number(value);
+    while (value >= 0x80) {
+      out.push((value & 0x7f) | 0x80);
+      value = Math.floor(value / 128);
+    }
+    out.push(value & 0x7f);
+  }
+
+  function readVarint(bytes, pos) {
+    var value = 0;
+    var shift = 0;
+    while (pos < bytes.length) {
+      var b = bytes[pos++];
+      value += (b & 0x7f) * Math.pow(2, shift);
+      if ((b & 0x80) === 0) return { value: value, pos: pos };
+      shift += 7;
+      if (shift > 35) throw new Error('varint too long');
+    }
+    throw new Error('truncated varint');
+  }
+
+  function utf8Encode(str) {
+    if (typeof TextEncoder !== 'undefined') return Array.prototype.slice.call(new TextEncoder().encode(str));
+    var encoded = unescape(encodeURIComponent(str));
+    var bytes = [];
+    for (var i = 0; i < encoded.length; i++) bytes.push(encoded.charCodeAt(i) & 0xff);
+    return bytes;
+  }
+
+  function utf8Decode(bytes) {
+    if (typeof TextDecoder !== 'undefined') return new TextDecoder('utf-8').decode(bytes);
+    var s = '';
+    for (var i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+    return decodeURIComponent(escape(s));
+  }
+
+  function stringToBytes(str) {
+    var bytes = new Uint8Array(str.length);
+    for (var i = 0; i < str.length; i++) bytes[i] = str.charCodeAt(i) & 0xff;
+    return bytes;
+  }
+
+  function concatParts(parts, totalLength) {
+    var out = new Uint8Array(totalLength);
+    var offset = 0;
+    for (var i = 0; i < parts.length; i++) {
+      out.set(parts[i], offset);
+      offset += parts[i].length;
+    }
+    return out;
+  }
+
+  function encodeMetadata(meta, firstDataLen) {
+    var out = [];
+    var nameBytes = utf8Encode(meta.name || 'decoded-file');
+    writeVarint(out, meta.encodedSize);
+    writeVarint(out, meta.originalSize);
+    writeVarint(out, firstDataLen);
+    var hashNum = parseInt(meta.hash || '0', 16) >>> 0;
+    out.push(hashNum & 0xff, (hashNum >>> 8) & 0xff, (hashNum >>> 16) & 0xff, (hashNum >>> 24) & 0xff);
+    writeVarint(out, nameBytes.length);
+    for (var i = 0; i < nameBytes.length; i++) out.push(nameBytes[i]);
+    return new Uint8Array(out);
+  }
+
+  function parseMetadataBody(body) {
+    var pos = 0;
+    var r = readVarint(body, pos); var encodedSize = r.value; pos = r.pos;
+    r = readVarint(body, pos); var originalSize = r.value; pos = r.pos;
+    r = readVarint(body, pos); var firstDataLen = r.value; pos = r.pos;
+    if (pos + 4 > body.length) throw new Error('truncated hash');
+    var hashNum = (body[pos] | (body[pos + 1] << 8) | (body[pos + 2] << 16) | (body[pos + 3] << 24)) >>> 0;
+    pos += 4;
+    r = readVarint(body, pos); var nameLen = r.value; pos = r.pos;
+    if (pos + nameLen > body.length) throw new Error('truncated name');
+    var name = utf8Decode(body.subarray(pos, pos + nameLen));
+    pos += nameLen;
+    var dataEnd = Math.min(body.length, pos + firstDataLen);
+    return {
+      encodedSize: encodedSize,
+      originalSize: originalSize,
+      firstDataLen: firstDataLen,
+      hash: hashNum.toString(16).padStart(8, '0'),
+      name: name,
+      data: body.subarray(pos, dataEnd)
+    };
+  }
+
+  function encodeFrame(frame) {
+    var flags = 0;
+    if (frame.gz) flags |= FLAG_GZIP;
+    if (frame.zip) flags |= FLAG_ZIP;
+    if (frame.rs) flags |= FLAG_RS;
+    if (frame.parity) flags |= FLAG_PARITY;
+
+    var out = [MAGIC_0, MAGIC_1, flags];
+    writeVarint(out, frame.i);
+    writeVarint(out, frame.n);
+    writeVarint(out, frame.k);
+    for (var b = 0; b < frame.body.length; b++) out.push(frame.body[b]);
+    return new Uint8Array(out);
+  }
+
+  function decodeFrame(input) {
+    var bytes = input instanceof Uint8Array ? input : stringToBytes(input || '');
+    if (bytes.length < 3 || bytes[0] !== MAGIC_0 || bytes[1] !== MAGIC_1) return null;
+    var flags = bytes[2];
+    var pos = 3;
+    var r = readVarint(bytes, pos); var i = r.value; pos = r.pos;
+    r = readVarint(bytes, pos); var n = r.value; pos = r.pos;
+    r = readVarint(bytes, pos); var k = r.value; pos = r.pos;
+    var body = bytes.subarray(pos);
+    var frame = {
+      v: 3,
+      i: i,
+      n: n,
+      k: k,
+      gz: (flags & FLAG_GZIP) !== 0,
+      zip: (flags & FLAG_ZIP) !== 0,
+      rs: (flags & FLAG_RS) !== 0,
+      parity: (flags & FLAG_PARITY) !== 0,
+      body: body
+    };
+    if (i === 0 && !frame.parity) frame.meta = parseMetadataBody(body);
+    return frame;
+  }
+
+  function makeDataBodies(dataBytes, meta, chunkBodySize) {
+    var firstDataLen = 0;
+    var metadata = encodeMetadata(meta, firstDataLen);
+    while (true) {
+      firstDataLen = Math.max(0, chunkBodySize - metadata.length);
+      var next = encodeMetadata(meta, Math.min(firstDataLen, dataBytes.length));
+      if (next.length === metadata.length) {
+        metadata = next;
+        firstDataLen = Math.min(firstDataLen, dataBytes.length);
+        break;
+      }
+      metadata = next;
+    }
+
+    var bodies = [];
+    var firstData = dataBytes.subarray(0, firstDataLen);
+    bodies.push(concatParts([metadata, firstData], metadata.length + firstData.length));
+    for (var offset = firstDataLen; offset < dataBytes.length; offset += chunkBodySize) {
+      bodies.push(dataBytes.subarray(offset, Math.min(offset + chunkBodySize, dataBytes.length)));
+    }
+    return bodies;
+  }
+
+  function buildFrames(dataBytes, options) {
+    var meta = {
+      name: options.name,
+      hash: options.hash,
+      originalSize: options.originalSize,
+      encodedSize: dataBytes.length
+    };
+    var dataBodies = makeDataBodies(dataBytes, meta, options.chunkBodySize);
+    var parityBodies = [];
+    if (options.rsParity > 0 && dataBodies.length > 0) {
+      parityBodies = ReedSolomon.encode(dataBodies, options.rsParity);
+    }
+    var total = dataBodies.length + parityBodies.length;
+    var frames = [];
+    for (var i = 0; i < dataBodies.length; i++) {
+      frames.push({ v: 3, i: i, n: total, k: dataBodies.length, gz: options.gz, zip: options.zip, rs: parityBodies.length > 0, parity: false, body: dataBodies[i] });
+    }
+    for (var p = 0; p < parityBodies.length; p++) {
+      frames.push({ v: 3, i: dataBodies.length + p, n: total, k: dataBodies.length, gz: options.gz, zip: options.zip, rs: true, parity: true, body: parityBodies[p] });
+    }
+    return frames.map(function(frame) {
+      var bytes = encodeFrame(frame);
+      frame.bytes = bytes;
+      if (frame.i === 0 && !frame.parity) frame.meta = parseMetadataBody(frame.body);
+      return frame;
+    });
+  }
+
+  function recoverBodies(frames, k) {
+    var available = [];
+    var indices = [];
+    for (var i = 0; i < frames.length; i++) {
+      if (frames[i] !== null && frames[i] !== undefined) {
+        available.push(frames[i].body);
+        indices.push(i);
+      }
+    }
+    if (available.length < k) return null;
+    return ReedSolomon.decode(available, indices, k);
+  }
+
+  function assembleData(dataBodies) {
+    var meta = parseMetadataBody(dataBodies[0]);
+    var parts = [meta.data];
+    var total = meta.data.length;
+    for (var i = 1; i < dataBodies.length; i++) {
+      parts.push(dataBodies[i]);
+      total += dataBodies[i].length;
+    }
+    var joined = concatParts(parts, total);
+    return {
+      meta: meta,
+      bytes: joined.subarray(0, meta.encodedSize)
+    };
+  }
+
+  return {
+    FLAG_GZIP: FLAG_GZIP,
+    FLAG_ZIP: FLAG_ZIP,
+    FLAG_RS: FLAG_RS,
+    FLAG_PARITY: FLAG_PARITY,
+    stringToBytes: stringToBytes,
+    encodeFrame: encodeFrame,
+    decodeFrame: decodeFrame,
+    buildFrames: buildFrames,
+    recoverBodies: recoverBodies,
+    assembleData: assembleData,
+    parseMetadataBody: parseMetadataBody
+  };
+})();
diff --git a/shared/protocol.ts b/shared/protocol.ts
index 63dd1ae..4a5ed1b 100644
--- a/shared/protocol.ts
+++ b/shared/protocol.ts
@@ -1,11 +1,14 @@
-export interface QrChunk {
-  v: number;
+export interface QrFrameV3 {
+  v: 3;
   i: number;
   n: number;
-  hash: string;
-  name: string;
-  d: string;
+  k: number;
+  gz: boolean;
+  zip: boolean;
+  rs: boolean;
+  parity: boolean;
+  body: Uint8Array;
 }
 
-export const CHUNK_VERSION = 1;
+export const CHUNK_VERSION = 3;
 export const MAX_CHUNK_BYTES = 1200;
diff --git a/test/test.js b/test/test.js
index 8378210..e08af5f 100644
--- a/test/test.js
+++ b/test/test.js
@@ -8,6 +8,9 @@ const vm = require('vm');
 const rsPath = path.join(__dirname, '..', 'shared', 'reedsolomon.js');
 const rsCode = fs.readFileSync(rsPath, 'utf8');
 vm.runInThisContext(rsCode);
+const protocolV3Path = path.join(__dirname, '..', 'shared', 'protocol-v3.js');
+const protocolV3Code = fs.readFileSync(protocolV3Path, 'utf8');
+vm.runInThisContext(protocolV3Code);
 
 function strToBytes(s) {
   const b = new Uint8Array(s.length);
@@ -267,6 +270,66 @@ describe('FNV-1a hash', () => {
   });
 });
 
+describe('Protocol v3 binary framing', () => {
+  it('round-trips binary payload without base64 expansion', () => {
+    const data = new Uint8Array(1024);
+    for (let i = 0; i < data.length; i++) data[i] = i & 0xff;
+
+    const frames = QrProtocolV3.buildFrames(data, {
+      name: 'binary.bin',
+      hash: '1234abcd',
+      originalSize: data.length,
+      chunkBodySize: 500,
+      gz: false,
+      zip: false,
+      rsParity: 0
+    });
+
+    assert.strictEqual(frames[0].v, 3);
+    assert.ok(frames.length > 1);
+    assert.ok(!('text' in frames[0]));
+    assert.strictEqual(frames[0].bytes[0], 0x51);
+    assert.strictEqual(frames[0].bytes[1], 0x33);
+    assert.ok(frames[0].bytes.length < 500 + 64);
+
+    const decoded = {};
+    frames.forEach(frame => {
+      const parsed = QrProtocolV3.decodeFrame(frame.bytes);
+      decoded[parsed.i] = parsed;
+    });
+
+    const assembled = QrProtocolV3.assembleData(frames.map(frame => decoded[frame.i].body));
+    assert.strictEqual(assembled.meta.name, 'binary.bin');
+    assert.strictEqual(assembled.meta.hash, '1234abcd');
+    assert.deepStrictEqual(Buffer.from(assembled.bytes), Buffer.from(data));
+  });
+
+  it('recovers missing metadata frame through Reed-Solomon parity', () => {
+    const data = Buffer.from('hello v3 reed-solomon recovery '.repeat(80));
+    const frames = QrProtocolV3.buildFrames(data, {
+      name: 'note.txt',
+      hash: 'a1b2c3d4',
+      originalSize: data.length,
+      chunkBodySize: 300,
+      gz: false,
+      zip: false,
+      rsParity: 2
+    });
+
+    const parsed = new Array(frames.length).fill(null);
+    frames.forEach(frame => {
+      if (frame.i !== 0 && frame.i !== 2) parsed[frame.i] = QrProtocolV3.decodeFrame(frame.bytes);
+    });
+
+    const recovered = QrProtocolV3.recoverBodies(parsed, frames[0].k);
+    assert.ok(recovered);
+    const assembled = QrProtocolV3.assembleData(recovered);
+    assert.strictEqual(assembled.meta.name, 'note.txt');
+    assert.strictEqual(assembled.meta.hash, 'a1b2c3d4');
+    assert.deepStrictEqual(Buffer.from(assembled.bytes), Buffer.from(data));
+  });
+});
+
 describe('bytesToBase64', () => {
   it('round-trips correctly', () => {
     const original = Buffer.from('Hello, World! This is a test of base64 encoding.');