Interactive House Construction With X-Ray View

You are an expert Three.js developer specializing in architectural visualization and WebGPU-accelerated graphics.

Create a production-ready, interactive 3D house construction animation that demonstrates the building process through five stages: Foundation → Skeleton (framing) → Systems (plumbing, electrical, HVAC) → Envelope (walls, roof, insulation) → Finished (complete exterior and interior). The animation must include a toggleable X-ray view mode that reveals hidden systems (plumbing pipes in blue, electrical wiring in yellow, HVAC ducts in silver) inside the finished structure.

## Technical Requirements

**Rendering Stack:**
- Three.js with WebGPU backend (use `WebGPURenderer`)
- Implement proper feature detection with graceful WebGL fallback
- Target 60 FPS on modern hardware

**Architecture & Structure:**
- Modular component system: separate classes for Foundation, Frame, Systems, Envelope, and Finish layers
- Each construction stage is a Three.js `Group` that can be shown/hidden independently
- Use realistic proportions for a {{house-type}} (e.g., "two-story suburban home", "single-story ranch", "modern townhouse")

**Materials & Shading:**
- PBR materials (MeshStandardMaterial or custom WebGPU shaders) for realistic surfaces
- X-ray mode: use `MeshPhysicalMaterial` with `transmission: 0.9, opacity: 0.3, roughness: 0.1` for walls/floors, keep systems fully opaque with emissive properties
- Distinct colors: concrete (gray), wood framing (tan), pipes (blue PVC / copper), wires (yellow insulation), ducts (metallic silver), drywall (off-white)

**Animation System:**
- Timeline-based construction sequence: each stage fades in and builds over 2-3 seconds
- Smooth transitions using easing functions (e.g., `TWEEN.js` or custom GSAP integration)
- Camera interpolation: orbit around the house during the build sequence, then allow manual OrbitControls

**Interactivity:**
- GUI controls (dat.GUI or lil-gui): play/pause, stage slider (1-5), X-ray toggle, animation speed
- Mouse hover highlights individual components with outline (use `OutlinePass` or custom shader)
- Click on systems in X-ray mode to display labels ("Main Water Line", "200A Service Panel", etc.)

**Systems Detail (X-ray View):**
- **Plumbing:** main water supply, branch lines to kitchen/bathrooms, drain/waste pipes, water heater
- **Electrical:** service panel, circuit runs to outlets/fixtures, visible junction boxes
- **HVAC:** main unit, supply/return ducts, vents in each room
- Use instanced geometry for repetitive elements (pipes, wires) to optimize performance

## Code Structure

Provide:

1. **index.html** – minimal boilerplate with canvas and script imports
2. **main.js** – scene setup, renderer initialization, animation loop, stage orchestration
3. **HouseBuilder.js** – class managing construction stages and transitions
4. **XRayController.js** – handles material swapping and system visibility
5. **components/** – separate modules for Foundation.js, Frame.js, Systems.js, Envelope.js, Finish.js
6. **README.md** – setup instructions, browser requirements (Chrome Canary / Edge with WebGPU flags), controls documentation

## Output Specifications

- **Code style:** ES6 modules, async/await for asset loading, clear comments for each stage
- **Performance targets:** <50 draw calls in normal mode, <100 in X-ray; monitor with `renderer.info`
- **Responsive:** adapt camera FOV and controls for mobile (touch) vs. desktop
- **Assets:** generate geometry procedurally (no external models required), but structure code to accept GLTF imports if the user wants to substitute detailed meshes later

## Constraints

- Pure Three.js + WebGPU; no Unity/Unreal exports
- Self-contained: all geometry and materials defined in code
- Accessible: include keyboard shortcuts (Space = play/pause, X = toggle X-ray, 1-5 = jump to stage)
- Production-ready: error handling, loading states, FPS counter

Generate clean, well-documented code with inline comments explaining WebGPU-specific optimizations and the construction sequence logic. Prioritize clarity and extensibility so additional building systems or rooms can be added easily.