React components
Orbit circles
A layout component that positions children in a circular orbit animation.
Overview
The OrbitCircles component arranges its children along a circular path and rotates them. It creates a "planetary orbit" effect, useful for hero sections or feature visualizations.
Usage
import { OrbitCircles } from '@/components/core/orbit';
function Hero() {
return (
<div className="relative h-96 w-96">
<OrbitCircles radius={150} duration={40}>
<div className="rounded-full bg-red-500 w-10 h-10" />
<div className="rounded-full bg-blue-500 w-10 h-10" />
</OrbitCircles>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Elements to be placed in orbit. Evenly distributed. |
radius? | number | 160 | Radius of the orbit in pixels. |
duration? | number | 20 | Time in seconds for one full rotation. |
speed? | number | 1 | Speed multiplier for the rotation. |
iconSize? | number | 40 | Size of the child containers in pixels. |