Kinetiq

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

PropTypeDefaultDescription
pinsRoutePin[]—Ports plotted by normalized x, y across the map.
routesRoute[]—Arcs between pins, referenced by from and to ids.
onRide(routeId | null) => void—Fires the ridden route id, null when it ends.
heightnumber280Map height in px.