animaps

makes animated travel route videos on a map. type in some cities, pick a marker, hit record and you get an mp4 or webm back. good for reels, trip recaps, that kind of thing.

live demo: https://feralui.vercel.app/#/animaps

it's a single react component, maplibre does the map under the hood.

install

npm i animaps-react

react 18 or 19 needs to be there too (peer dep).

use

import { AniMaps } from 'animaps-react'
import 'animaps-react/style.css'

export default function App() {
  return <AniMaps />
}

pass your own stops and route color if you want:

<AniMaps
  routeColor="#0a84ff"
  initialStops={[
    { city: 'New York', country: 'United States', lat: 40.7128, lng: -74.006 },
    { city: 'Reykjavik', country: 'Iceland', lat: 64.1466, lng: -21.9426 },
    { city: 'Paris', country: 'France', lat: 48.8566, lng: 2.3522 },
  ]}
/>

what's in it

• route builder with geocoding, plus gpx / geojson import
• satellite, streets, dark and light map styles
• camera fly through with the trail drawing as it goes
• mp4 / webm export, square / landscape / vertical presets, 30 or 60 fps
• pick the marker sticker and size, change the route color live

notes

export uses webcodecs when the browser has it and falls back to the native recorder otherwise. needs a browser, won't run server side.

MIT