KQ-143 · ARC/ROUTES
Arc Routes
Great-circle arcs lifting off a flat map — pins plot ports across the panel and each route bows a quadratic arc between two of them, arching higher the longer the hop; hovering or focusing a route brightens its arc and rides a marker along it from origin to destination.
KQ-143 · ARC/ROUTES
FLIGHT MAP · 05 ROUTES
KQ-143
SFOHKXLNDSYDDXBGRU
IDLE
Flight map, 5 routes. SFO to HKX; LND to DXB; HKX to SYD; GRU to LND; DXB to SYD.RIDING · NONE
Hover a route to ride the arc between its ports.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/arc-routes
Props
- pins
- RoutePin[]
- default —
- Ports plotted by normalized x, y across the map.
- routes
- Route[]
- default —
- Arcs between pins, referenced by from and to ids.
- onRide
- (routeId | null) => void
- default —
- Fires the ridden route id, null when it ends.
- height
- number
- default 280
- Map height in px.
| Prop | Type | Default | Description |
|---|---|---|---|
| pins | RoutePin[] | — | Ports plotted by normalized x, y across the map. |
| routes | Route[] | — | Arcs between pins, referenced by from and to ids. |
| onRide | (routeId | null) => void | — | Fires the ridden route id, null when it ends. |
| height | number | 280 | Map height in px. |