Map Route Navigation text animation: the word aimotions animated in this style
189InterfaceSVG

Map Route Navigation

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.

Prompt · replace [TEXT]

Tool-agnostic
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
Category
Sci-fi UI & Modern Web
Demo built with
SVG
Energy
Lively
Background
Light bg

Also known as

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Map Route Navigation look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥