A black hole painted in CSS gradients: a tilted accretion disk, lensed photon rings and a black shadow, with Doppler beaming dimming the receding side. Tilt, thickness, reach and palette adjust.
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/black-hole-orbnpx shadcn add @01orbital/black-hole-orbyarn shadcn add @01orbital/black-hole-orbbunx --bun shadcn add @01orbital/black-hole-orbPart 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/orbs/black-hole-orb.tsx, as source you own and edit.
import {
BlackHole,
type BlackHolePalette,
} from "@/components/orbs/black-hole-orb"
const PALETTES = {
eht: {
core: "oklch(0.973 0.035 91.1)",
hot: "oklch(0.895 0.101 81)",
warm: "oklch(0.788 0.149 68.7)",
outer: "oklch(0.595 0.157 46.8)",
deep: "oklch(0.31 0.089 39.8)",
},
} satisfies Record<string, BlackHolePalette>
// The M87* view: a slight tilt, a thick disc, soft beaming.
export default function Demo() {
return (
<BlackHole
size={280}
tilt={0.16}
thickness={0.3}
beaming={0.22}
reach={0.58}
palette={PALETTES.eht}
/>
)
}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.
Compare
Every Orbs component side by side: whether it follows the theme or stays dark, how many parts and custom props it has, and whether it is free. Open one for its preview, API and install.
Bloom Orb
A pale modelled sphere for light surfaces that blooms to an accent color with a slight lift on hover, its own or its parent group's. The shadow stack derives from the body and shade colors.