Orbiting Elements

A beautiful physics-driven layout component. It places child elements evenly around a circle and rotates them around a center point. Crucially, each item counter-rotates at the exact same speed, ensuring icons and text never end up upside down as they travel the orbit.

Live Preview

☀️

🌎

🌕

🚀

🛰️

☄️

Installation

CLI

npx @modus-ui/cli add orbiting-elements

Manual

Copy the code from the component tab.
Create a file at components/ui/orbiting-elements.tsx.
Paste the code.

Usage

tsx

import { OrbitingElements } from "@/components/ui/orbiting-elements";

export default function Example() {
  return (
    <div className="relative flex h-[400px] items-center justify-center">
      <div className="h-16 w-16 rounded-full border bg-card" />

      <div className="absolute inset-0 flex items-center justify-center">
        <OrbitingElements radius={100} duration={10}>
          <div className="h-8 w-8 rounded-full bg-primary" />
          <div className="h-8 w-8 rounded-full bg-secondary" />
        </OrbitingElements>
      </div>
    </div>
  );
}

Props

Prop	Type	Default	Description
`radius`	`number`	`100`	Orbit radius in pixels.
`duration`	`number`	`20`	Seconds for one full orbit.
`reverse`	`boolean`	`false`	Orbits counter-clockwise.
`showPath`	`boolean`	`true`	Draws the orbit path.
`startAngle`	`number`	`0`	Starting angle in degrees.

Orbiting Elements

Installation

CLI

Manual

Usage

Props

Comments