Tectonic Sandbox Earthquake Explainer

You are an expert motion graphics developer specializing in real-time scientific visualization and cinematic 3D simulations. Create production-ready code for a 60-second interactive earthquake simulation that renders as a premium educational experience—think Apple Keynote meets high-end science visualization, not a static slideshow.

## Technical Requirements

**Rendering approach:** Real-time 3D simulation with dynamic camera work, particle systems, shader-based effects, and smooth state transitions. The experience must feel continuously alive and exploratory.

**Visual quality bar:** Cinematic motion graphics with satisfying physics, dramatic scale transitions, premium materials (translucent rock layers, glowing stress zones, volumetric particles), minimal sans-serif typography, floating UI labels that elegantly fade in/out, and seamless camera moves.

## Narrative Structure & Timing

The 60-second experience unfolds in clear phases, each visually distinct:

**Phase 1 (0-15s): Setup**
- Open on a clean 3D cross-section of Earth's crust showing two tectonic plates
- Camera slowly orbits the fault line between them
- Plates begin moving horizontally in opposite directions (visual speed exaggerated for clarity)
- Friction locks the plates at the fault—show this with overlapping "teeth" geometry or contact particles
- UI label: "Fault locked—stress accumulating"

**Phase 2 (15-30s): Building Pressure**
- Rock layers visibly deform and bend as stress builds
- Stress zones glow with increasing intensity (cool blue → orange → red gradient)
- Subtle vibrations start in the rock (camera shake begins imperceptibly)
- Inset seismograph in corner shows baseline with small foreshock spikes
- Pacing accelerates—faster cuts, tighter camera moves, audio rises

**Phase 3 (30-42s): Rupture & Wave Propagation**
- Sudden fault slip—explosive particle burst at rupture point
- P-waves (compression) radiate outward as fast ripples through rock layers
- S-waves (shear) follow as slower, larger undulations—use different colors/materials to distinguish
- Camera follows waves upward through cross-section toward surface
- Seismograph spikes violently

**Phase 4 (42-52s): Surface Impact**
- Transition from underground to surface view showing a small city
- Ground surface ripples with arriving seismic waves
- Buildings react with physics-based shaking—those near epicenter sway dramatically, distant ones barely move
- Surface waves (Love/Rayleigh) arrive last as the strongest visible ground motion
- Camera pulls back to show wave propagation across landscape

**Phase 5 (52-60s): Aftermath & System View**
- Zoom back underground to fault zone
- Smaller aftershock events fire off around the main rupture (glowing particle bursts)
- Camera pulls out to reveal the complete tectonic plate system in context
- Final UI overlay: key stats (magnitude, depth, wave types) in clean minimal design
- Elegant fade to end card

## Code Architecture

Structure your implementation with:

1. **Scene graph** for layered 3D elements (crust layers, plates, fault geometry, city models)
2. **Timeline controller** that triggers phase transitions and camera movements
3. **Shader system** for stress visualization (procedural gradients, glow effects, deformation)
4. **Particle systems** for rupture energy, wave propagation, and debris
5. **Physics layer** for building reactions and ground deformation
6. **UI overlay system** for labels, seismograph widget, and data callouts
7. **Camera rig** with smooth interpolated movements, focus targets, and dramatic scale transitions

## Key Implementation Details

**Wave visualization:** Use shader displacement + particle trails to show P/S/surface waves as distinct phenomena. Color-code them (P-waves: blue, S-waves: orange, surface: red) with different speeds and amplitudes.

**Stress accumulation:** Animate a procedural noise texture over time that grows in intensity and color-shifts. Apply subtle vertex displacement to rock geometry.

**Fault slip moment:** Instantaneous geometry offset + radial force explosion + screen shake + particle burst—make this the visual climax.

**Building response:** Simple rigid-body physics with damping based on distance from epicenter. Taller buildings sway more; add slight time offset between buildings for realism.

**Seismograph widget:** Live-updating line graph in corner that reacts to simulation events. Style it as a minimal floating panel with subtle backdrop blur.

## Output Specifications

**Framework/Engine:** {{tech-stack}}

**Resolution & Format:** 1920×1080, 60fps, exactly 60 seconds duration. Export-ready for video rendering or interactive web deployment.

**Code deliverable:**
- Complete, runnable implementation with clear module structure
- Inline comments explaining phase timing, camera keyframes, and wave mechanics
- Configuration object at top for easy timing/color/scale adjustments
- Asset list (if external models/textures needed) with fallback procedural generation

**Polish requirements:**
- Every 3-5 seconds reveals something new (phase change, camera move, or visual intensification)
- No dead time—constant subtle motion even in "calm" phases
- Smooth easing on all transitions (no linear movement)
- Audio hooks/markers for sound design integration (even if silent)

Deliver code that a motion designer could run, tweak timing values, and render a portfolio-quality piece. Prioritize visual impact and clarity of the earthquake mechanics over technical accuracy minutiae.