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
Plaiter
