Animated Arc
Draw an animated curved line between two points on the map.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://terrae.vercel.app/maps/map.jsonThen install the animated arc component:
npx shadcn@latest add https://terrae.vercel.app/maps/map-arc-animated.jsonCurve Height
The height prop controls how much the arc curves away from a straight line. It's a multiplier relative to the distance between origin and destination. Use 0 for a straight line, or values like 0.3-0.5 for visible curves.
Custom Styling
Customize the arc appearance with color, width, and markerColor. The marker follows the arc tip during animation.
Dashed Lines
Use dashArray to create dashed line patterns. The array specifies [dash length, gap length] in pixels.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the arc |
origin | [number, number] | required | Starting point [longitude, latitude] |
destination | [number, number] | required | Ending point [longitude, latitude] |
color | string | "#3b82f6" | Arc line color |
width | number | 4 | Line width in pixels |
opacity | number | 1 | Line opacity (0-1) |
dashArray | [number, number] | - | Dash pattern [dash, gap] |
height | number | 0.3 | Curve height multiplier (0 = straight) |
segments | number | 50 | Curve smoothness (more = smoother) |
duration | number | 2000 | Animation duration in ms |
autoStart | boolean | true | Start animation on mount |
loop | boolean | false | Loop the animation |
loopDelay | number | 500 | Delay between loops in ms |
showMarker | boolean | true | Show traveling marker at arc tip |
markerColor | string | - | Traveling marker color (defaults to line color) |
showOriginMarker | boolean | true | Show marker at origin point |
originMarkerColor | string | - | Origin marker color (defaults to line color) |
showDestinationMarker | boolean | true | Show marker at destination when animation completes |
destinationMarkerColor | string | - | Destination marker color (defaults to line color) |
onComplete | () => void | - | Callback when animation completes |
Use Cases
Flight Routes
Visualize flight paths between airports with curved trajectories.
Package Delivery
Show delivery routes from warehouses to customers.
Data Transfer
Illustrate data flowing between servers or data centers.
Network Connections
Show point-to-point connections in network visualizations.