安装
用法
import { OrbitingCircles } from "@/components/magicui/orbiting-circles";
import { File, Settings, Search } from "lucide-react";
<div className="relative overflow-hidden h-[500px] w-full">
<OrbitingCircles>
<File />
<Settings />
<File />
</OrbitingCircles>
<OrbitingCircles radius={100} reverse>
<File />
<Settings />
<File />
<Search />
</OrbitingCircles>
</div>
属性
| 属性 | 类型 | 默认值 | 描述 |
|---|
className | string | - | 组件的类名 |
children | React.ReactNode | - | 组件的子节点 |
反向 | 布尔值 | 否 | 如果为 true，动画将反向播放 |
持续时间 | number | 20 | 动画持续时间（秒） |
delay | number | 10 | 动画开始前的延迟时间（秒） |
半径 | number | 160 | 轨道半径（像素） |
路径 | 布尔值 | 是 | 如果为 true，将显示轨道路径 |
iconSize | number | 30 | 图标大小（像素） |
速度 | number | 1 | 动画速度 |