Components
Gravitational lensing simulation — a black hole warps spacetime around it, bending starlight into Einstein rings. 500 background stars deflect, amplify, and stretch near the singularity. A spinning accretion disk of 300 hot plasma particles orbits with Doppler brightness shift — the approaching side glows brighter. Photon sphere ring, event horizon, and subtle space distortion rings. Move your mouse to drag the black hole through the star field. Smoothed position tracking. Configurable mass, lensing power, disk speed, star count, and colors. Supports content overlay as children. Zero dependencies.
Loading preview...
import { Component as BlackHole } from "@/components/ui/black-hole";
export default function Demo() {
return (
<div className="flex min-h-screen flex-col items-center justify-center bg-black p-8 gap-8">
<div className="w-full max-w-5xl">
<div className="text-center mb-12">
<h2 className="text-2xl font-bold tracking-tight text-white mb-2">
Black Hole
</h2>
<p className="text-sm text-neutral-400 max-w-lg mx-auto">
Gravitational lensing, spinning accretion disk, photon sphere.
Stars warp around the singularity. Move your mouse — you are the
black hole.
</p>
</div>
<div className="rounded-2xl border border-white/10 overflow-hidden">
<BlackHole
className="w-full h-[520px]"
starCount={600}
mass={1.2}
diskParticles={350}
diskSpeed={1.2}
lensingPower={1.2}
/>
</div>
</div>
{/* As hero background */}
<div className="w-full max-w-5xl rounded-2xl border border-white/10 overflow-hidden">
<BlackHole
className="w-full h-[400px]"
starCount={400}
mass={0.8}
diskParticles={200}
interactive={false}
>
<div className="flex flex-col items-center justify-center h-[400px] px-8 text-center">
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-4 drop-shadow-lg">
Beyond the
<br />
<span className="bg-gradient-to-r from-orange-400 to-amber-300 bg-clip-text text-transparent">
event horizon
</span>
</h1>
<p className="text-sm text-white/50 max-w-md mb-8 drop-shadow-md">
Space bends. Light warps. Stars amplify near the Einstein ring.
Nothing escapes.
</p>
<div className="flex gap-3">
<button className="rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-black">
Enter
</button>
<button className="rounded-full border border-white/20 bg-white/5 backdrop-blur-sm px-6 py-2.5 text-sm font-semibold text-white">
Observe
</button>
</div>
</div>
</BlackHole>
</div>
</div>
);
}