City Bus Service Route Video

# Portland TriMet Bus Network Visualization

You are building an animated transit visualization that brings Portland's public bus system to life. The animation will showcase geographic coverage and movement patterns across a typical weekday.

## Data & Structure Requirements

**Geographic Scope:**
- Organize routes by quadrant: NE (including North Portland), SE, NW, and SW (including South Portland)
- Use accurate TriMet route geometry and stop locations
- Base the map on {{map-region}} boundaries

**Animation Flow:**
1. **Overview phase (0:00-0:15)**: City-wide view showing all quadrants, buses moving at 3-4x real speed, establishing the full network density
2. **Quadrant spotlight phases (0:15-1:30)**: Sequentially zoom into each quadrant (NE → SE → NW → SW), ~18 seconds each
   - Transition smoothly with 1.5s ease-in-out camera movement
   - At quadrant zoom level, reduce bus speed to 1.5-2x real speed so viewers can follow individual routes through neighborhoods and street grids
   - Highlight 2-3 major routes per quadrant with subtle color emphasis or glow
3. **Closing phase (1:30-1:45)**: Zoom back out to city-wide overview

## Visual Design

**Theme:** Light mode throughout
- Background map: Light gray (#F5F5F5) with white streets
- Water bodies: Pale blue (#E3F2FD)
- Parks/greenspace: Soft green (#E8F5E9)
- Bus icons: TriMet red (#D8412A) as primary, secondary routes in muted blue (#5C6BC0)
- Route lines: Semi-transparent colored paths (opacity 0.3) that trace recent bus movement

**Labels:**
- Quadrant names appear during spotlight phases (clean sans-serif, 24pt)
- Optional: Major street names at zoom level (12pt, gray)

## Technical Specifications

- Canvas resolution: 1920×1080 (16:9)
- Frame rate: 30 fps
- Total duration: ~1:45 (105 seconds)
- Time of day simulated: {{time-simulation}} on a typical Tuesday
- Render 20-40 buses per quadrant depending on actual service frequency
- Buses move along actual route paths, not straight lines

## Code Structure

Implement using a mapping library (Mapbox GL JS, Leaflet, or D3.js + TopoJSON). Structure your code with:

1. **Data loader**: Parse TriMet GTFS data or GeoJSON route shapes
2. **Animation controller**: Manage timeline, camera position, and speed multipliers
3. **Render loop**: Update bus positions based on schedule interpolation
4. **Camera system**: Handle smooth zoom transitions between overview and quadrant views

Output production-ready code with comments explaining the speed adjustments and camera keyframes. Include a README with setup instructions and data source links.