Orbit Component

This interactive component displays elements orbiting around a central point on the screen, simulating a solar system. Using the Orbit component in your application, you can adjust the radius prop to control the distance of the orbit.

Decrypt

Usage

To use the Orbit component in your project, simply import it and set the radius prop as shown below:

import Orbit from "./components/Orbit";

function MyApp() {
  return <Orbit />;
}

Source Code

To implement the orbital animation, update your tailwind.config.js as follows:

  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)",
            },
        },
      },
    },
  },

Then, create the Orbit component in @/app/components/Orbit.tsx with the following structure:

"use client";

export default function Orbit({
  className,
  children,
  reverse,
  duration = 20,
  delay = 10,
  radius = 50,
  path = true,
}: {
  className?: string;
  children?: React.ReactNode;
  reverse?: boolean;
  duration?: number;
  delay?: number;
  radius?: number;
  path?: boolean;
}) {
  return (
    <>
      {path && (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
          className="pointer-events-none absolute inset-0 h-full w-full"
        >
          <title>Orbiting Circles</title>
          <circle
            className="stroke-zinc-500/25 stroke-1"
            cx="50%"
            cy="50%"
            r={radius}
            fill="none"
            strokeDasharray={"4 4"}
          />
        </svg>
      )}

      <div
        style={
          {
            "--duration": duration,
            "--radius": radius,
            "--delay": -delay,
          } as React.CSSProperties
        }
        className={`absolute flex h-full w-full transform-gpu animate-orbit items-center justify-center rounded-full border bg-black/10 [animation-delay:calc(var(--delay)*1000ms)] dark:bg-white/10 ${
          reverse ? "[animation-direction:reverse]" : ""
        } ${className}`}
      >
        {children}
      </div>
    </>
  );
}

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