A circular stage that carries any items around evenly spaced spokes while counter-rotating them to stay upright. Set size, seconds per turn and direction; stops under reduced motion.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/orbit-itemsnpx shadcn add @01orbital/orbit-itemsyarn shadcn add @01orbital/orbit-itemsbunx --bun shadcn add @01orbital/orbit-itemsPart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/motion/orbit-items.tsx, as source you own and edit.
The example also uses orbit-rings and orbital-v4. Install them too:
pnpm dlx shadcn add @01orbital/orbit-rings @01orbital/orbital-v4npx shadcn add @01orbital/orbit-rings @01orbital/orbital-v4yarn shadcn add @01orbital/orbit-rings @01orbital/orbital-v4bunx --bun shadcn add @01orbital/orbit-rings @01orbital/orbital-v4import { OrbitItems } from "@/components/motion/orbit-items"
import {
OrbitRing,
OrbitRings,
} from "@/components/motion/orbit-rings"
import { Orbital } from "@/components/orbs/orbital-v4"
const COLORS = {
alpenglow: {
ground: "oklch(0.340 0.073 58.7)",
upper:
"radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.636 0.144 48.7) 0%, oklch(0.591 0.136 47.1 / 0.75) 54%, transparent 100%)",
lower:
"radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.481 0.140 11.6) 0%, oklch(0.543 0.151 13.5 / 0.75) 55%, transparent 100%)",
glow: "oklch(0.611 0.177 13.3)",
form: "strong",
},
tidepool: {
ground: "oklch(0.179 0.029 240.3)",
upper:
"radial-gradient(ellipse 140% 110% at 50% 45%, oklch(0.413 0.082 166.3) 0%, oklch(0.413 0.082 166.3 / 0.5) 55%, transparent 100%)",
lower:
"radial-gradient(ellipse 130% 100% at 50% 55%, oklch(0.962 0.077 113.3) 0%, oklch(0.962 0.077 113.3 / 0.5) 55%, transparent 100%)",
},
marigold: {
ground: "oklch(0.379 0.076 35.6)",
upper:
"radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.805 0.160 71.9) 0%, oklch(0.805 0.160 71.9 / 0.75) 53%, transparent 100%)",
lower:
"radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.243 0.023 32.4) 0%, oklch(0.243 0.023 32.4 / 0.88) 56%, transparent 100%)",
glow: "oklch(0.829 0.154 76.5)",
form: "strong",
},
apogee: {
ground: "oklch(0.315 0.064 270.3)",
upper:
"radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.875 0.097 100.4) 0%, oklch(0.850 0.101 100.7 / 0.7) 52%, transparent 100%)",
lower:
"radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.365 0.073 269.3) 0%, oklch(0.365 0.073 269.3 / 0.8) 56%, transparent 100%)",
glow: "oklch(0.936 0.055 102.9)",
form: "strong",
},
vermillion: {
ground: "oklch(0.235 0.06 18.06)",
upper:
"radial-gradient(ellipse 130% 100% at 50% 38%, oklch(0.66 0.205 30.97) 0%, oklch(0.619 0.205 30.96 / 60%) 55%, transparent 100%)",
lower:
"radial-gradient(ellipse 130% 90% at 50% 82%, oklch(0.28 0.136 266.87) 0%, oklch(0.25 0.136 267.22 / 70%) 55%, transparent 100%)",
},
delft: {
ground: "oklch(0.376 0.087 261.9)",
upper:
"radial-gradient(ellipse 135% 105% at 50% 35%, oklch(0.905 0.025 104.4) 0%, oklch(0.887 0.026 104.5 / 0.72) 52%, transparent 100%)",
lower:
"radial-gradient(ellipse 130% 95% at 50% 80%, oklch(0.467 0.121 261.9) 0%, oklch(0.467 0.121 261.9 / 0.8) 55%, transparent 100%)",
glow: "oklch(0.978 0.010 261.8)",
form: "strong",
},
} as const
const PALETTES = [
"alpenglow",
"tidepool",
"marigold",
"apogee",
"vermillion",
"delft",
] as const
export default function OrbitItemsDemo() {
return (
<>
<OrbitRings className="inset-0" masked={false}>
<OrbitRing
size={320}
duration={24}
accent="oklch(0.72 0.13 62 / 0.4)"
/>
</OrbitRings>
<OrbitItems
size={320}
duration={24}
items={PALETTES.map((p) => (
<Orbital key={p} palette={COLORS[p]} size={40} grain={0.25} />
))}
/>
</>
)
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
No other registry pieces.
Fish School
A transparent layer of a seeded, depth-layered fish school with rising bubbles, in light or dark inks. Swims across the viewport, its own box, or orbit loops; still under reduced motion.
Orbit Rings
Decorative concentric SVG rings, each a faint circle with a fading quarter-arc that spins at its own speed and direction in currentColor. Static until motion is allowed; optional bottom fade.