Circles
Rings of images orbiting a center
circles-tw
Customize
Circle Size
64
Base Radius
120
Orbit Gap
100
Stagger Scale Factor
0.00
Rotation Duration (s)
20
Row Delay (s)
0.5
Animation Duration (s)
0.6
Animation Stagger (s)
0.15
Props
16| 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
[[...], [...], [...]]circleSizenumberSize of each circle/image in pixels
Default
64baseRadiusnumberBase radius for the innermost orbit ring in pixels
Default
120orbitGapnumberGap between each concentric orbit ring in pixels
Default
100rotationDurationnumberDuration of one complete rotation in seconds for the first ring
Default
20rowDelaynumberAdditional duration added to each subsequent ring's rotation (creates staggered speed)
Default
0.5direction"clockwise" | "counterclockwise"Direction of rotation for the orbiting circles
Default
"clockwise"alternateDirectionbooleanIf true, alternates direction for each row (odd rows go opposite direction)
Default
falsefadeMode"in" | "out" | "none"Fade mode for rows. 'in' fades from outside to inside, 'out' fades from inside to outside, 'none' disables fading
Default
"none"fadeBlurbooleanApply incremental blur along with fade effect for more depth
Default
falseshowPathsbooleanWhether to show dashed orbital path rings
Default
trueanimatebooleanEnable entrance animation on mount with scale and fade
Default
trueanimationDurationnumberDuration of entrance animation in seconds
Default
0.6animationStaggernumberStagger delay between each row's entrance animation in seconds
Default
0.15staggerScaleFactornumberScale factor for each additional row. Negative values shrink outer rows, positive values grow them. Example: 0.1 = 10% larger per row
Default
0classNamestringAdditional CSS classes for the container
Default
""