OrbitingCircles

Orbiting Circles creates smooth circular motion by rotating image items around a central element using pure CSS animations. You can display one or two independent orbits, each with its own radius, rotation speed, direction, and start delay.

Each orbit distributes images evenly around the circle, making it perfect for showcasing avatars, logos, or feature highlights in a dynamic and visually balanced layout. Optional dashed paths can be displayed to visually show the orbit tracks.

A center image can be enabled to anchor the animation and act as a focal point. All images support adjustable sizing and object-fit modes, allowing you to control how each item is cropped or scaled inside its circular frame.

This component is fully responsive within its container and works well for hero sections, testimonials, team showcases, and brand ecosystems.

Key Features

Two independent orbit layersCustom radius and rotation speed per orbitReverse direction toggleStart delay for staggered motionEven image distribution around each circleOptional dashed orbit pathsOptional center image with custom sizeObject-fit controls for all imagesPure CSS animation for smooth performance

Use Cases

Team member showcasesCustomer avatar displaysLogo and partner carouselsFeature highlight animationsHero section visual accents

Best Practices / Tips

Use different speeds for each orbit to create depthEnable reverse direction on one orbit for dynamic contrastKeep image sizes small to avoid visual clutterUse dashed paths only when you want to emphasize motionCenter image works best as a logo or main profile

What’s Included

Orbit 1 image ring with full controlsOptional Orbit 2 image ringCenter image elementCustom animation timing and directionOptional orbit path indicators

Who It’s For

Designers building animated hero sectionsProduct teams showcasing users or partnersMarketing pages needing motion and depthNo-code builders adding visual storytelling