Back
Orbiting Circles
Satu Visual ComponentNew
Places children on circular orbits around a center.
Core
⚛️
▲
Installation
Add it with the CLI:
Terminal
$
Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.
Usage
Render several with different radius/duration/delay for a solar-system effect. Parent must be relative.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The orbiting element. |
| radius | number | 80 | Orbit radius, px. |
| duration | number | 20 | Seconds per orbit. |
| reverse | boolean | false | Orbit the other way. |
| delay | number | 0 | Start delay, seconds. |
Requirements
No external npm dependencies. ✨
Add this to your Tailwind config:
tailwind.config.ts
// theme.extend
animation: { orbit: "orbit calc(var(--duration,20s)) linear infinite" },
keyframes: {
orbit: {
"0%": { transform: "rotate(0deg) translateY(calc(var(--radius,80px) * 1px)) rotate(0deg)" },
"100%": { transform: "rotate(360deg) translateY(calc(var(--radius,80px) * 1px)) rotate(-360deg)" },
},
},