Circles

Rotating orbital rings with images and customizable animations

circles-tw

Customize

Tweak the props live

Layout

Circle Size64

Base Radius120

Orbit Gap100

Stagger Scale Factor0

Show Paths

Rotation

Rotation Duration (s)20

Row Delay (s)0.5

Direction

Alternate Direction

Fade

Fade Mode

Fade Blur

Entrance Animation

Animation Duration (s)0.6

Animation Stagger (s)0.15

Props

Name	Type	Default	Description
`rows`	string[][]	`[[...], [...], [...]]`	Array of rows, where each row is an array of image URLs. Each row creates a concentric orbit ring with evenly distributed circles.
`circleSize`	number	`64`	Size of each circle/image in pixels
`baseRadius`	number	`120`	Base radius for the innermost orbit ring in pixels
`orbitGap`	number	`100`	Gap between each concentric orbit ring in pixels
`rotationDuration`	number	`20`	Duration of one complete rotation in seconds for the first ring
`rowDelay`	number	`0.5`	Additional duration added to each subsequent ring's rotation (creates staggered speed)
`direction`	"clockwise" \| "counterclockwise"	`"clockwise"`	Direction of rotation for the orbiting circles
`alternateDirection`	boolean	`false`	If true, alternates direction for each row (odd rows go opposite direction)
`fadeMode`	"in" \| "out" \| "none"	`"none"`	Fade mode for rows. 'in' fades from outside to inside, 'out' fades from inside to outside, 'none' disables fading
`fadeBlur`	boolean	`false`	Apply incremental blur along with fade effect for more depth
`showPaths`	boolean	`true`	Whether to show dashed orbital path rings
`animate`	boolean	`true`	Enable entrance animation on mount with scale and fade
`animationDuration`	number	`0.6`	Duration of entrance animation in seconds
`animationStagger`	number	`0.15`	Stagger delay between each row's entrance animation in seconds
`staggerScaleFactor`	number	`0`	Scale factor for each additional row. Negative values shrink outer rows, positive values grow them. Example: 0.1 = 10% larger per row
`className`	string	`""`	Additional CSS classes for the container

rowsstring[][]

Array of rows, where each row is an array of image URLs. Each row creates a concentric orbit ring with evenly distributed circles.

Default:[[...], [...], [...]]

circleSizenumber

Size of each circle/image in pixels

Default:64

baseRadiusnumber

Base radius for the innermost orbit ring in pixels

Default:120

orbitGapnumber

Gap between each concentric orbit ring in pixels

Default:100

rotationDurationnumber

Duration of one complete rotation in seconds for the first ring

Default:20

rowDelaynumber

Additional duration added to each subsequent ring's rotation (creates staggered speed)

Default:0.5

direction"clockwise" | "counterclockwise"

Direction of rotation for the orbiting circles

Default:"clockwise"

alternateDirectionboolean

If true, alternates direction for each row (odd rows go opposite direction)

Default:false

fadeMode"in" | "out" | "none"

Fade mode for rows. 'in' fades from outside to inside, 'out' fades from inside to outside, 'none' disables fading

Default:"none"

fadeBlurboolean

Apply incremental blur along with fade effect for more depth

Default:false

showPathsboolean

Whether to show dashed orbital path rings

Default:true

animateboolean

Enable entrance animation on mount with scale and fade

Default:true

animationDurationnumber

Duration of entrance animation in seconds

Default:0.6

animationStaggernumber

Stagger delay between each row's entrance animation in seconds

Default:0.15

staggerScaleFactornumber

Scale factor for each additional row. Negative values shrink outer rows, positive values grow them. Example: 0.1 = 10% larger per row

Default:0

classNamestring

Additional CSS classes for the container

Default:""