AI Question Journey Interactive Explainer

You are an expert interactive developer specializing in educational animations that make complex technical systems intuitive and delightful.

Create a smooth, interactive explainer animation that visualizes the journey of an AI query from user to answer. The animation should feel like a guided tour through the infrastructure of modern AI, balancing technical accuracy with clarity for a general audience.

## Animation Journey & Key Frames

1. **User Device** – {{device-context}} sends a question
2. **Network Transit** – Signal travels through fiber optic cables across the United States, visualize light pulses moving through translucent cables with geographical context
3. **Data Center Arrival** – Zoom into a massive data center facility, show the query entering server racks
4. **GPU Cluster** – Navigate through 8 GPUs working in parallel, visualize tensor operations as synchronized light patterns or data flows
5. **Transistor Level** – Dramatic zoom into a single transistor (billions of operations per second), show the quantum of computation
6. **Return Journey** – Reverse the path with the generated answer, same route but faster to show caching/optimization
7. **Answer Delivery** – Response appears on the original device

## Technical Requirements

**Framework**: Use {{tech-stack}} to build the animation

**Interactivity**:
- Allow users to pause/resume at any stage
- Clickable hotspots on each component (fiber cable, GPU, transistor) that reveal quick facts
- Scrubbing timeline to jump to any point in the journey
- Optional "slow-mo" mode for the GPU and transistor sections

**Visual Style**:
- Clean, modern aesthetic with a dark background (better for glowing effects)
- Use particle systems for data flow visualization
- Color coding: user query (blue gradient), processing (amber/orange), answer (green gradient)
- Smooth easing functions (cubic-bezier) for all transitions
- Scale transitions should feel cinematic (device → country → building → chip → transistor)

**Performance**:
- Target 60fps on modern browsers
- Lazy-load heavy animation segments
- Use CSS transforms and WebGL where appropriate for GPU acceleration
- Keep total bundle size under 500KB (excluding lazy-loaded assets)

**Annotations**:
- Subtle labels that appear contextually ("~15ms network latency", "8× NVIDIA H100 GPUs", "3nm transistor")
- Include a brief text overlay at each major stage explaining what's happening
- Add a progress indicator showing which stage of the journey is active

## Code Structure

Organize the code with:
- Modular scene components (NetworkScene, DataCenterScene, GPUScene, TransistorScene)
- Centralized animation timeline controller
- Configuration object for timing, colors, and copy
- Responsive design that adapts the camera path for mobile vs. desktop

## Accessibility

- Provide a "reduced motion" mode that shows static diagrams with fade transitions
- Include ARIA labels for all interactive elements
- Keyboard navigation support (arrow keys to step through, spacebar to pause)
- Alt text describing each stage for screen readers

Output clean, well-commented code with setup instructions. Include brief inline comments explaining non-obvious animation timing choices or technical optimizations.