# Black Hole

> A black hole with a glowing accretion disc: particles orbit faster near the centre, spiral inwards and pass behind the dark shadow.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-26 · Live demo: https://www.motionkitui.com/components/black-hole

## When to use it

Space, physics, AI and deep-tech heroes, launch pages and dramatic section breaks.

## How it works

The disc is a ring of particles on circular orbits, drawn squashed vertically so it reads as tilted. Each particle's angular speed falls with the 1.5th power of its distance, as Kepler's third law says, so the inner disc races while the outer edge drifts, and every particle creeps slowly inwards, respawning at the edge after it crosses the photon ring. Particles on the far side are drawn first, then the glow and the dark shadow, then the near side, which is how the back of the disc passes behind the hole.

## Installation

Part of MotionKit Plus (https://www.motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/black-hole` after adding their registry token from https://www.motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors` | `[string, string]` | `["#93CACE", "#A56D5B"]` | Inner and outer disc colours. |
| `particles` | `number` | `1400` | Particles in the disc. |
| `speed` | `number` | `1` | Orbit speed. 0 holds it still. |
| `tilt` | `number` | `0.28` | Disc tilt, 0 (edge on) to 1 (face on). |
| `interactive` | `boolean` | `true` | Tip the disc towards the pointer. |
| `children` | `ReactNode` |  | Your content, layered above. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The canvas is hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, it draws one still frame. It also stops drawing off screen.
- **Colour contrast: Partial.** Ivory text above or below the disc measures 17:1, as in the example. The inner disc is bright, so keep text clear of it rather than over it.