Black Hole
Black Hole is a particle background in the UI HUB particle backgrounds collection. A 3D black hole accretion disk with particles orbiting in a disk plane, sorted by Z-depth for authentic occlusion behind and in front of the central event horizon.
The component is driven by 11 documented props (showCenter, particleCount, particleSize, colors, outerRadius, tilt and 5 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: HTML5 Canvas 2D; ResizeObserver; requestAnimationFrame.
Preview the particle background in the browser above, copy the source, and paste it into your project. Particle Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Black Hole?
Premium 3D black hole accretion disk with Z-depth sorted particles, relativistic orbital speeds, and 3D sphere center with rim lighting.
Black Hole at a glance
- Category
- Particle Backgrounds
- Pricing
- Free to use
- Libraries
- React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 11
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Black Hole works
A 3D black hole accretion disk with particles orbiting in a disk plane, sorted by Z-depth for authentic occlusion behind and in front of the central event horizon.
Technical information for Black Hole
| Category | Particle Backgrounds |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | HTML canvas |
| State change | static accretion disk to orbiting particles with trail and optional pull |
| Props | 11 configurable |
| Usage example | Included on this page |
What Black Hole requires
- HTML5 Canvas 2D
- ResizeObserver
- requestAnimationFrame
- Z-depth sorting
How to use Black Hole
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <BlackHole /> in your page using that import path.
- Pass any of the 11 documented props to change colours, density, speed or behaviour.
Black Hole questions
What is Black Hole?
Premium 3D black hole accretion disk with Z-depth sorted particles, relativistic orbital speeds, and 3D sphere center with rim lighting.
How does Black Hole work?
A 3D black hole accretion disk with particles orbiting in a disk plane, sorted by Z-depth for authentic occlusion behind and in front of the central event horizon.
Which category does Black Hole belong to?
Black Hole is listed under Particle Backgrounds in the UI HUB catalog. Particle backgrounds render tens of thousands of points on the GPU: spheres, halos, fields and constellations that drift, glow and react to the pointer. They are the heaviest components in the library, so each one lists its rendering approach and requirements before you copy it. Use them as hero backdrops, section backgrounds or full-page intros where a static gradient would fall flat.
What does the showCenter prop do in Black Hole?
Whether to show the central event horizon sphere. It defaults to true.
What does the particleCount prop do in Black Hole?
Number of particles in the accretion disk. It defaults to 1000.
Is Black Hole free to use?
Black Hole is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Black Hole use?
Black Hole uses React and is styled with Tailwind CSS.
What does Black Hole need to run?
Black Hole needs HTML5 Canvas 2D, ResizeObserver, requestAnimationFrame and Z-depth sorting.