Ember Orbit

import { EmberOrbit } from "@/components/motion/ember-orbit"
import { Orbital } from "@/components/orbs/orbital-v4"

const EMBER = {
  ground: "oklch(0.30 0.07 40)",
  upper:
    "radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.88 0.12 70) 0%, oklch(0.72 0.15 50 / 0.7) 52%, transparent 100%)",
  lower:
    "radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.30 0.09 30) 0%, oklch(0.30 0.09 30 / 0.8) 56%, transparent 100%)",
  glow: "oklch(0.86 0.11 65)",
  form: "strong",
} as const

// The orb is the lamp: warm ground close in, cooling to near-black at the edge.
const LIT_GROUND =
  "radial-gradient(circle at 50% 50%, oklch(0.40 0.09 45 / 0.6) 0%, oklch(0.28 0.06 40 / 0.4) 20%, oklch(0.20 0.03 35 / 0.15) 46%, transparent 70%)"

export default function EmberOrbitDemo({
  animated = false,
}: {
  animated?: boolean
}) {
  return (
    <div
      data-demo="ember-orbit"
      className="relative grid min-h-full w-full flex-1 place-items-center overflow-hidden"
      style={{ backgroundImage: LIT_GROUND }}
    >
      <div className="relative grid size-[min(84vw,600px)] place-items-center">
        <EmberOrbit
          size={600}
          animated={animated}
          className="absolute inset-0"
          style={{ width: "100%", height: "100%" }}
        />
        <EmberOrbit
          size={600}
          duration={38}
          animated={animated}
          className="absolute inset-[13%] rotate-150 opacity-70"
          style={{ width: "74%", height: "74%" }}
        />
        <Orbital palette={EMBER} size={190} grain={0.25} className="relative" />
      </div>
    </div>
  )
}