Animated Arc
Visualize point-to-point connections with animated parabolic arcs.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the animated arc component:
npx shadcn@latest add https://www.terrae.dev/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 and width. The head marker follows the arc tip during animation and uses the same color as the arc.
Dashed Lines
Use dashArray to create dashed line patterns. The array specifies [dash length, gap length] in pixels.
Head Types
Use headType to change the shape of the traveling marker. Options are "circle" (default), "arrow", "square", or "none". Control the size with headSize.
Origin & Destination Markers
Enable showOriginMarker and showDestinationMarker to display dots at the start and end points. Customize their colors with originMarkerColor and destinationMarkerColor.
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 |
headType | "none" | "circle" | "square" | "arrow" | "circle" | Shape of the traveling marker |
headSize | number | 16 | Size of the head marker in pixels |
showOriginMarker | boolean | false | Show marker at origin point |
originMarkerColor | string | - | Origin marker color (defaults to line color) |
showDestinationMarker | boolean | false | 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 Tracking
Display aircraft trajectories between airports on a globe.
Trade & Logistics
Visualize import/export flows and supply chain connections.