Circles
circles-tw
Customize
64
120
100
20
0.5
0.6
0.15
0
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 |