A black hole with a glowing accretion disc: particles orbit faster near the centre, spiral inwards and pass behind the dark shadow.
Event horizon
Customize
Usage
import { BlackHole } from "@/components/motionkit/black-hole";
<BlackHole
className="flex h-[36rem] items-end justify-center rounded-3xl pb-20"
>
<h1>Your hero</h1>
</BlackHole>Motion
The exact curves this component runs, plotted with Motion's own maths.
Inner orbit
Runs on its own
Space, physics, AI and deep-tech heroes, launch pages and dramatic section breaks.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/black-hole. It saves the file to components/motionkit and installs its dependencies.
Black Hole is part of MotionKit Plus (£12 / $15 / €14 a month or £96 / $120 / €112 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, it draws one still frame. It also stops drawing off screen.
Star Field
A slow-drifting night sky with twinkling stars, for space, launch and AI product heroes.
Constellation
Drifting stars join into constellations as they pass close, and reach out to the cursor with lines of light.
Flow Field
Generative art: hundreds of particles ride an invisible, shifting current and leave silky trails, curling into a swirl around the pointer.
Event horizon
Customize
Usage
import { BlackHole } from "@/components/motionkit/black-hole";
<BlackHole
className="flex h-[36rem] items-end justify-center rounded-3xl pb-20"
>
<h1>Your hero</h1>
</BlackHole>Motion
The exact curves this component runs, plotted with Motion's own maths.
Inner orbit
Runs on its own
The live preview is free to explore. Plus unlocks the source for Black Hole and every other premium component.