Circles

Rotating orbital rings with images and customizable animations

  • Circle 0-0
  • Circle 0-1
  • Circle 0-2
  • Circle 0-3
  • Circle 0-4
  • Circle 0-5
  • Circle 1-0
  • Circle 1-1
  • Circle 1-2
  • Circle 1-3
  • Circle 1-4
  • Circle 1-5
  • Circle 1-6
  • Circle 1-7
  • Circle 1-8
  • Circle 2-0
  • Circle 2-1
  • Circle 2-2
  • Circle 2-3
  • Circle 2-4
  • Circle 2-5
  • Circle 2-6
  • Circle 2-7
  • Circle 2-8
  • Circle 2-9
  • Circle 2-10
  • Circle 2-11
  • Circle 2-12
  • Circle 2-13
  • Circle 2-14
  • Circle 3-0
  • Circle 3-1
  • Circle 3-2
  • Circle 3-3
  • Circle 3-4
  • Circle 3-5
  • Circle 3-6
  • Circle 3-7
  • Circle 3-8
  • Circle 3-9
  • Circle 3-10
  • Circle 3-11
  • Circle 3-12
  • Circle 3-13
  • Circle 3-14
  • Circle 4-0
  • Circle 4-1
  • Circle 4-2
  • Circle 4-3
  • Circle 4-4
  • Circle 4-5
  • Circle 4-6
  • Circle 4-7
  • Circle 4-8
  • Circle 4-9
  • Circle 4-10
  • Circle 4-11
  • Circle 4-12
  • Circle 4-13
  • Circle 4-14

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
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

Default64
baseRadiusnumber

Base radius for the innermost orbit ring in pixels

Default120
orbitGapnumber

Gap between each concentric orbit ring in pixels

Default100
rotationDurationnumber

Duration of one complete rotation in seconds for the first ring

Default20
rowDelaynumber

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

Default0.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)

Defaultfalse
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

Defaultfalse
showPathsboolean

Whether to show dashed orbital path rings

Defaulttrue
animateboolean

Enable entrance animation on mount with scale and fade

Defaulttrue
animationDurationnumber

Duration of entrance animation in seconds

Default0.6
animationStaggernumber

Stagger delay between each row's entrance animation in seconds

Default0.15
staggerScaleFactornumber

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

Default0
classNamestring

Additional CSS classes for the container

Default""