Expedition Map
An explorer's chart on parchment: the ink route draws itself, waypoints open journal entries.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Coastlines are roughened with an SVG turbulence filter, rhumb lines radiate from the center, the compass rose turns and a sea serpent lurks. Use it for timelines, company history or onboarding steps.
Installation
$ npx shadcn@latest add https://guetix.com/r/expedition-map.json
Uses the shadcn CLI. It creates components/guetix/expedition-map.tsx and installs nothing else.
Usage
example.tsx
import { ExpeditionMap } from "@/components/guetix/expedition-map";
export default function Example() {
return <ExpeditionMap />;
}
Museum storiesCompany timelineOnboarding stepsTravel blogs
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| waypoints | { x; y; title; year?; text }[] | — | Points in a 600×380 space. |
| title | string | — | Map title. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Every waypoint is a labelled button; the journal is a live region.