127 Components
Black Hole
BackgroundsInterstellar-inspired gravitational lensing black hole background powered by a WebGL relativistic ray-marching shader with a pitch-black event horizon, incandescent photon ring, bent upper and lower lensing arcs, and Doppler-beamed accretion plasma.
Relativistic Singularity
Event Horizon
Kerr spacetime curvature with gravitational lensing
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/black-hole.json"
Props
TypeScript props supported by <BlackHole />.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 95 | Radius scale of the central event horizon void in pixels. |
| diskColor | string | "#FF7A18" | Primary hex color of the glowing accretion disk and lensing halo. |
| spinSpeed | number | 1.2 | Angular velocity and relativistic Doppler beaming multiplier for orbiting matter. |
| particleCount | number | 260 | Filament resolution scale in the relativistic accretion disk. |
| pull | number | 0.35 | Radial inward gravitational pull and spacetime curvature strength. |
| lensing | boolean | true | Whether to enable full relativistic gravitational light bending. |
| children | React.ReactNode | — | Optional foreground content rendered above the black hole canvas. |
| className | string | — | Additional CSS classes applied to the root container. |
Key Features
- Real-time WebGL geodesic light-bending ray marcher around a Schwarzschild/Kerr event horizon
- True 3D tilted accretion disk with multi-octave FBM spiraling plasma filaments and bent upper/lower gravitational lensing arches
- Relativistic Doppler beaming that shifts the approaching disk toward incandescent white-gold and the receding side toward deep amber-crimson
- Gravitationally lensed background starfield and razor-sharp incandescent photon sphere ring
- Interactive telemetry HUD with live presets (Gargantua, Quasar Jet, Crimson Singularity) when children are omitted
Keyboard & Accessibility
- Decorative WebGL canvas is marked aria-hidden so screen readers focus on foreground content
- High-contrast translucent HUD controls with keyboard-focusable buttons and range sliders