Animated Circle

Animated circles with drawing outline and fill effects.

Installation

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

npx shadcn@latest add https://www.terrae.dev/map.json

Then install the animated circle component:

npx shadcn@latest add https://www.terrae.dev/animated-circle.json

Use strokeDashArray to create a dashed outline effect.

Set animationMode="fill" to animate the fill opacity instead of the outline.

Enable loop to continuously repeat the animation. Use loopDelay to control the pause between iterations.

Use onComplete callbacks to chain animations. This example animates circles from inner to outer, creating an expanding ripple effect.

Property	Type	Default	Description
`id`	string	required	Unique identifier for the animated circle
`center`	[number, number]	required	Center point [longitude, latitude] of the circle
`radius`	number	required	Radius of the circle in meters
`strokeColor`	string	"#3b82f6"	Stroke/outline color
`strokeWidth`	number	2	Stroke width in pixels
`strokeOpacity`	number	1	Stroke opacity (0-1)
`strokeDashArray`	number[]	-	Dash pattern [dash, gap] for dashed outline
`fillColor`	string	"#3b82f6"	Fill color of the circle
`fillOpacity`	number	0.3	Target fill opacity (0-1)
`duration`	number	2000	Outline drawing duration in milliseconds
`fillDuration`	number	1000	Fill animation duration in milliseconds
`animationMode`	"draw" \| "fill"	"draw"	Animation mode: outline only or outline then fill
`autoStart`	boolean	true	Start animation automatically on mount
`loop`	boolean	false	Loop the animation continuously
`loopDelay`	number	1000	Delay before restarting loop in milliseconds
`segments`	number	64	Number of segments for circle smoothness
`onDrawComplete`	() => void	-	Callback when outline drawing completes
`onFillComplete`	() => void	-	Callback when fill animation completes
`onComplete`	() => void	-	Callback when entire animation completes

Visualize search radius expanding from a point

Animate blast radius or impact zones