Gradient Orb

volumetric x spring

A soft volumetric gradient sphere that slowly breathes — a signature hero accent.

conic-gradientinfiniteblurhero accent

Code

gradient-orb.tsx

export function GradientOrb() {
  return (
    <div className="relative size-40">
      <div
        className="absolute inset-0 animate-[spin_9s_linear_infinite] rounded-full opacity-70 blur-2xl"
        style={{ background: "conic-gradient(from 0deg, #ff2e9a, #7c3aed, #0ea5e9, #ff2e9a)" }}
      />
      <div
        className="absolute inset-3 rounded-full"
        style={{ background: "radial-gradient(circle at 32% 30%, #ff8dc7, #7c3aed 45%, #0a0a0a 82%)" }}
      />
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Gradient Orb component and wire it to my accent.”