Orbiting Circles
A collection of circles which move in orbit along a circular path
Circles
Installation
Copy and paste the following code into your project.
import { cn } from "@/lib/utils"
export interface OrbitingCirclesProps {
className?: string
children?: React.ReactNode
reverse?: boolean
duration?: number
delay?: number
radius?: number
path?: boolean
}
export function OrbitingCircles({
className,
children,
reverse,
duration = 20,
delay = 10,
radius = 50,
path = true,
}: OrbitingCirclesProps) {
return (
<>
{path && (
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
className="pointer-events-none absolute inset-0 size-full"
>
<circle
className="stroke-black/10 stroke-1 dark:stroke-white/10"
cx="50%"
cy="50%"
r={radius}
fill="none"
/>
</svg>
)}
<div
style={
{
"--duration": duration,
"--radius": radius,
"--delay": -delay,
} as React.CSSProperties
}
className={cn(
"absolute flex transform-gpu animate-orbit items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10",
{ "[animation-direction:reverse]": reverse },
className
)}
>
{children}
</div>
</>
)
}Update the import paths to match your project setup.
Update tailwind.config.js
Add the following animations to your tailwind.config.js file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
animation: {
orbit: "orbit calc(var(--duration)*1s) linear infinite",
},
keyframes: {
orbit: {
"0%": {
transform:
"rotate(0deg) translateY(calc(var(--radius) * 1px)) rotate(0deg)",
},
"100%": {
transform:
"rotate(360deg) translateY(calc(var(--radius) * 1px)) rotate(-360deg)",
},
},
},
},
},
}Props
| Prop | Type | Description | Default |
|---|---|---|---|
| className | string | The class name for the component | "" |
| children | React.ReactNode | The children nodes of the component | null |
| reverse | boolean | If true, the animation plays in reverse | false |
| duration | number | The duration of the animation in seconds | 20 |
| delay | number | The delay before the animation starts in seconds | 10 |
| radius | number | The radius of the orbit in pixels | 50 |