# Map Route Navigation: motion graphics style

> On a clean city map, a navigation route is laid out in the shape of the word and a location puck drives along it. Turn-by-turn and ETA cards update live; made for travel, delivery, mobility and journey stories.

- Category: [Sci-fi UI & Modern Web](https://aimotions.art/category/sci-fi-ui-modern-web/)
- Also known as: gps route animation, map navigation text, route line animation, travel map animation, directions ui, map path drawing, turn by turn navigation
- Demo built with: SVG · Energy: Lively · Background: Light bg
- Live demo: https://aimotions.art/styles/map-route-navigation/
- Spanish version: https://aimotions.art/es/estilos/map-route-navigation/

## Prompt (replace [TEXT] with your text)

```text
Turn a navigation app into a typographic animation of [TEXT]. Show a light top-down city map: beige land, a slightly rotated white street grid with a few wider avenues, a winding blue canal, green parks and tiny place labels. A route is planned in the shape of [TEXT], written as rounded single-stroke letters: driving legs are thick pale-blue lines with white casing, and the gaps between letters are dotted walking links. A blue location puck with a white ring, a heading cone and a soft pulse travels the whole route, turning the line it passes bold blue. A dark turn-by-turn banner at the top and a white ETA sheet at the bottom update as it goes; on arrival a destination pin bounces. Reset and loop.
```

## Visual DNA

- Light top-down map: beige land, white street grid, a canal and green parks
- Route preview in pale blue with white casing, traversed part in bold blue
- Letters written as driving legs, joined by dotted walking connectors
- Glowing location puck with a heading cone and a soft pulse
- Dark turn-by-turn banner and a white ETA sheet that update live

The prompts are free to copy, adapt and use in personal and commercial projects, with no credit required. Republishing the collection or a substantial part of it (for example as another library or a dataset) requires written permission.

How to cite: Map Route Navigation, aimotions, https://aimotions.art/styles/map-route-navigation/