OrbitingCircles
orbiting-circles轨道环绕 · 子元素沿圆周匀速公转 + 自身反旋正立(纯 CSS·RSC)
用法
基础用法
子元素沿圆周匀速环绕，中心放置标识/Logo。
瑚琏
tsx
<div className="relative flex size-[340px] items-center justify-center">
<span className="text-sm font-medium text-muted">瑚琏</span>
<OrbitingCircles radius={140} duration={20}>
<Chip c="A" />
<Chip c="B" />
<Chip c="C" />
<Chip c="D" />
</OrbitingCircles>
</div>反向旋转
reverse 让轨道逆向公转，常用于内外双环对冲增强层次。
瑚琏
tsx
<OrbitingCircles radius={140} duration={20} reverse>
<Chip c="A" />
<Chip c="B" />
</OrbitingCircles>单环 · 隐藏轨道
showPath=false 去掉虚线轨道，配合 iconSize 调子元素方框大小。
tsx
<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>何时用
想让一组图标/头像沿圆形轨道围着中心匀速公转（技术栈环绕、集成生态、品牌 logo 群）时用。子元素按数量均匀分布到圆周、自身反旋保持正立；纯 CSS、可在 RSC 渲染。可叠多个不同 radius/duration 做多层轨道。要把两个具体节点用流光连起来用 AnimatedBeam。
导入
ts
import { OrbitingCircles } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| radius | number | — | 轨道半径 px |
| duration | number | — | 一圈时长 s |
| reverse | boolean | false | 反向旋转 |
| iconSize | number | — | 子元素方框尺寸 px |
| showPath | boolean | — | 是否画出轨道虚线圆环 |
| className | string | — | 透传 className |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| children | ReactNode | 环绕的子元素（图标等），按数量均匀分布到圆周 |
禁忌 / 坑
- 放在居中的
relative容器内，且容器尺寸需 ≥ 2×radius，否则轨道被裁。 - 纯 CSS 实现，可在 RSC 直接用，无需
"use client"。 - reduced-motion 偏好下公转会被弱化/停止，不要把它当唯一的信息载体。
相关
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>