# Map Route Animation

Replay of the daily movement of the truck fleet in logistics-fleet (live map with routes).

- id: `map-route-animation`
- Page: https://agentic-ui-kit.com/components/map-route-animation
- Live preview: https://agentic-ui-kit.com/live/component/map-route-animation

## Install

```bash
agentic-ui add map-route-animation
npx shadcn@4.17.0 add @agentic-ui/map-route-animation
```

## Metadata

- **Level:** feature
- **Category:** feature
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** route-replay-animation, play-pause, restart, playback-speed, position-scrubber, multi-route-selection, traveled-vs-pending-path, stop-progress-list, distance-readout, delay-note, static-fallback, empty-state, error-state-retry, loading-skeleton, keyboard-navigation, live-announcements
- **Intents:** monitor-live, track-status, explore-detail
- **Suits domains:** maps-ops, operations, ecommerce, travel, aviation
- **Interaction:** play-pause, scrub, speed-toggle, route-select, retry, keyboard-navigation
- **Screen role:** overview
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** replay of the daily movement of the truck fleet in logistics-fleet (live map with routes), review of a delayed shipment: where the vehicle stopped and which stops remain pending, replay of last-mile delivery trips in an e-commerce operations panel, plotting itineraries or flights with layovers in travel or aviation panels
- **Avoid when:** precise cartography with tiles, zoom and geocoding (use travel-map-explorer or flightops-live-map-console), tracking a single order for an end customer (use commerce-order-tracking), hundreds of simultaneous vehicles (use clustering; map-clustering)
- **Preserve when adapting:** shared-projection-frame, traveled-pending-path-grammar, static-fallback-semantics, playback-controls, live-announcements
- **Replace when adapting:** route-fixtures, stop-codes-and-copy, status-colors, replay-duration, map-background
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 9/10
- **Quality breakdown:** visual 9/10, responsive 8/10, accessibility 9/10, code 9/10
- **Uses primitives:** card, badge, button, progress, alert, skeleton
- **npm dependencies:** lucide-react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 50 fps
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-motion, lib-primitives, lib-tokens