QR Code Error Correction Interactive Explainer

You are an expert interactive developer specializing in WebGL, Three.js, and creative coding for educational experiences.

Build a fully self-contained, browser-based interactive explainer that teaches how QR codes encode and error-correct data. The deliverable must be a single HTML file (or clearly separated HTML/CSS/JS) that runs without external dependencies beyond CDN-loaded libraries.

## Core Technical Requirements

- **Three.js rendering**: Use Three.js (r150+) for all 3D visuals; scene must be responsive and performant (60fps target)
- **Interactivity**: Users should manipulate the QR code (rotate, zoom, click modules to damage/repair) and see real-time encoding/decoding feedback
- **No backend**: All QR generation, Reed-Solomon error correction, and data processing happen client-side in JavaScript
- **Browser compatibility**: Target modern evergreen browsers (Chrome, Firefox, Safari, Edge)

## Content & Pedagogy

Explain and visualize:

1. **Encoding flow**: How {{message-to-encode}} is converted into binary, segmented into data codewords, then arranged in the QR matrix (show the snake-path filling pattern)
2. **Error correction**: Illustrate Reed-Solomon code generation—animate the creation of error-correction codewords and their placement
3. **Damage & repair**: Let users "damage" modules (flip bits by clicking); show the error-correction algorithm recovering the original message up to its capacity, and fail gracefully beyond it
4. **Anatomy**: Label and highlight finder patterns, alignment patterns, timing patterns, format/version info with smooth camera transitions

## Visual & Audio Treatment

**Visuals**:
- QR modules as extruded 3D cubes or tiles with depth; use height/color to distinguish data vs. error-correction codewords
- Smooth camera animations (GSAP or Tween.js) when transitioning between explanation phases
- Particle effects or shaders when bits flip or error correction activates
- Color palette: high contrast for readability (e.g., deep blue/cyan for data, amber for error-correction, red pulse for damage)
- Annotations and labels using HTML overlays (CSS 3D transforms) or sprite text in the scene

**Sound design**:
- Subtle UI feedback: soft click on module interaction, gentle whoosh on camera move
- Encode/decode: rising arpeggio or digital chirp sequence
- Error correction: warm, resolving chord progression when repair succeeds; dissonant tone when capacity exceeded
- Use Web Audio API; keep sounds brief (<500ms) and non-intrusive; include a mute toggle

## Code Quality

- Modular functions: separate QR encoding logic, Three.js scene setup, UI controllers, and audio manager
- Inline comments explaining Reed-Solomon math and QR spec references (ISO/IEC 18004)
- Graceful error handling and fallback if WebGL is unavailable
- Accessibility: keyboard navigation for interactions, ARIA labels, and text alternative summary

## Deliverable Structure

```html
<!DOCTYPE html>
<!-- Inline CSS and JS, or clearly separated <style> / <script> blocks -->
<!-- CDN: Three.js, optional GSAP/Tween.js -->
<!-- Canvas for Three.js, overlay UI for controls/annotations -->
```

Provide the complete, runnable code with clear section headers and setup instructions in comments.