Orbit Rings

import {
  OrbitRing,
  OrbitRings,
} from "@/components/motion/orbit-rings"

// The copy: change text here, not in the markup.
const COPY = { title: "Rich surfaces, quiet motion." } as const

const ring = "oklch(0.72 0.16 35)"

// Three rings that fit the frame, so the whole set reads: each spins at its
// own speed, the outer one the other way, and the bottom fades out behind a
// line of text, the way they sit behind a hero.
export default function OrbitRingsDemo() {
  return (
    <>
      <OrbitRings className="inset-0 -bottom-24">
        <OrbitRing
          size={300}
          accent={ring}
          ringOpacity={0.9}
          offset={40}
          duration={20}
        />
        <OrbitRing
          size={450}
          accent={ring}
          ringOpacity={0.72}
          direction="ccw"
          offset={150}
          duration={28}
        />
        <OrbitRing
          size={600}
          accent={ring}
          ringOpacity={0.55}
          offset={90}
          duration={36}
        />
      </OrbitRings>
      <p className="absolute inset-0 grid place-items-center text-center text-2xl font-medium tracking-tight text-balance">
        {COPY.title}
      </p>
    </>
  )
}

OrbitRings
└─ OrbitRing