Animated Radial Lines

Animated lines spreading from a central origin to multiple destinations.

Installation

First, make sure you have the base map component installed:

npx shadcn@latest add https://terrae.vercel.app/maps/map.json

Then install the radial line component:

npx shadcn@latest add https://terrae.vercel.app/maps/map-line-radial.json

Colored Destinations with Dashed Lines

Each destination can have its own color by passing objects with coordinates and color properties. Use dashArray to create dashed line patterns.

Custom Icons and Traveling Marker

Add custom icons to origin and destination markers using originMarkerIcon and destinationMarkerIcon. Enable showTravelingMarker to show a marker traveling along the active line. Set curvature=0 for straight lines.

Auto Curvature

Set curvature="auto" to automatically calculate curvature based on the distance between origin and destination. Longer distances get more curve, shorter distances stay straighter. Adjust curveSegments to control smoothness (lower values for better performance).

Line Curvature

Control the curvature of lines using the curvature prop. A value of 0 creates straight lines, while higher values (0.3-0.5) create more pronounced curves. Set to "auto" to automatically calculate curvature based on distance.

Staggered Animation

Lines animate sequentially with a configurable delay between each. Use staggerDelay to control the timing between lines starting their animation, and duration for how long each line takes to draw.

Origin Marker

The origin point can display a marker with an optional pulse effect. Customize with showOriginMarker, originMarkerColor, and originMarkerPulse. You can also provide a custom icon via originMarkerIcon.

Destination Markers

Destination markers appear when their respective lines complete. Control visibility with showDestinationMarkers and customize appearance with destinationMarkerColor or destinationMarkerIcon.

Properties

Property	Type	Default	Description
`id`	string	required	Unique identifier for the radial lines
`origin`	[number, number]	required	Central origin point [longitude, latitude]
`destinations`	Array	required	Array of destination coordinates or objects with coordinates and optional color
`color`	string	"#3b82f6"	Default line color for all lines
`width`	number	2	Line width in pixels
`opacity`	number	0.8	Line opacity (0-1)
`curvature`	number \| "auto"	0.3	Line curvature (0 = straight, higher = more curved)
`curveSegments`	number	50	Number of segments for curve smoothness
`duration`	number	2000	Animation duration per line in milliseconds
`staggerDelay`	number	200	Delay between each line starting in milliseconds
`autoStart`	boolean	true	Auto-start animation on mount
`loop`	boolean	false	Loop animation continuously
`loopDelay`	number	1000	Delay before restarting loop in milliseconds
`showOriginMarker`	boolean	true	Show marker at the origin point
`originMarkerColor`	string	"#ef4444"	Color of the origin marker
`originMarkerIcon`	ReactNode	undefined	Custom icon for origin marker
`originMarkerPulse`	boolean	true	Show pulse effect around origin marker
`showDestinationMarkers`	boolean	true	Show markers at destinations when lines complete
`destinationMarkerColor`	string	undefined	Color of destination markers (defaults to line color)
`showTravelingMarker`	boolean	false	Show marker traveling along the active line
`onLineComplete`	(index, coords) => void	undefined	Callback when each line completes
`onComplete`	() => void	undefined	Callback when all lines complete

Use Cases

Disease Spread

Visualize how diseases, trends, or information spread from an origin

Flight Routes

Show flight connections from a hub airport to destinations

Supply Chain

Visualize distribution from warehouses to retail locations

Network Topology

Display data flow from central servers to edge nodes

Migration Patterns

Show population movement from a region to various destinations

Trade Routes

Visualize export/import connections from a central port

Performance Tips

Limit destinations to 20-30 for smooth performance
Reduce curveSegments for distant destinations (30-40 is often sufficient)
Increase staggerDelay to reduce simultaneous animations
Disable markers with showDestinationMarkers=false for better performance
Use autoStart=false and trigger manually for user-initiated animations

← PreviousAnimated Lines Next →Animated Markers