OrbitingCircles
orbiting-circlesMoves child items around one or more circular paths.
Usage
Basic usage
Child elements orbit at a constant speed, with a mark or logo in the center.
<div className="relative flex size-[340px] items-center justify-center">
<span className="text-sm font-medium text-muted">Hulian</span>
<OrbitingCircles radius={140} duration={20}>
<Chip c="A" />
<Chip c="B" />
<Chip c="C" />
<Chip c="D" />
</OrbitingCircles>
</div>Reverse rotation
reverse allows the track to rotate in reverse direction, often used for internal and external double ring hedging enhancement levels.
<OrbitingCircles radius={140} duration={20} reverse>
<Chip c="A" />
<Chip c="B" />
</OrbitingCircles>Single loop · Hidden track
showPath=false Remove the dotted track and match the iconSize tone element box size.
<div className="relative flex size-[340px] items-center justify-center">
<OrbitingCircles radius={120} duration={16} showPath={false} iconSize={48}>
<Chip c="React" />
<Chip c="TS" />
<Chip c="CSS" />
</OrbitingCircles>
</div>When to Use
Use it to revolve icons or avatars around a center point at a constant speed, such as a technology-stack or brand ecosystem display. Children are distributed evenly around the circumference and counter-rotate to remain upright. Stack instances with different radius and duration values for multiple tracks. To connect specific nodes with a moving beam, use AnimatedBeam.
Import
import { OrbitingCircles } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| radius | number | 150 | Orbit radius in pixels |
| duration | number | 20 | Duration of one revolution in seconds |
| reverse | boolean | false | Reverse rotation |
| iconSize | number | 40 | Child element box size in pixels |
| showPath | boolean | true | Whether to draw a dotted orbital circle |
| className | string | — | Additional class name for the root element |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Surrounded child elements (icons, etc.), evenly distributed to the circumference by number |
Usage Guidelines
- Place it in a centered
relativecontainer, and the container size needs to be ≥ 2×radius, otherwise the track will be cut. - Pure CSS implementation, can be used directly in RSC without
"use client". - Under the reduced-motion preference, the revolution will be weakened/stopped. Do not use it as the only information carrier.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · ProgressiveBlur
Playground
<div className="relative flex size-[340px] items-center justify-center">
<OrbitingCircles radius={140} duration={20}>
<Icon /><Icon /><Icon />
</OrbitingCircles>
</div>