Black Hole

Installation

Usage

Copyimport { BlackHole } from "@/components/dithercn/black-hole";
 
export function Hero() {
  return (
    <section className="relative isolate min-h-[480px]">
      <BlackHole className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}

A dark shadow sits at the centre, ringed by a thin, solid photon ring. Around it, a hot accretion disk is seen at a slant: tilt sets how edge-on it is. The lens bends the far half of the disk up into an arc over the top of the shadow and, as a thinner image, under the bottom, so the disk seems to wrap round the hole. The near half crosses in front of the shadow as a band. The disk has some thickness, so the inner edge of that band is shaded rather than cut, and it bows slightly with the curve of the disk. The photon ring fades behind the band where the gas is dense and shows faintly through the thin gas towards the rim. A thin dark gap runs between the photon ring and the disk all the way round. A sparse field of stars sits behind; as the sky drifts, the lens pushes the ones near the hole out and round it.

Lanes of gas orbit the hole, the inner ones several times faster than the rim, each carrying brighter and darker streaks, so the disk visibly turns. The side turning towards you is brighter, as a real disk's is: the right with direction="clockwise", the left with "counterclockwise".

By default the palette maps brightness to colour, from paper to the last colour, so the brightest gas and the photon ring take the last colour. A palette such as ["--dither-paper", "orange", "#ffe9d6"] gives the familiar white-hot disk. Set colorField to colour the dots by temperature instead: the last colour on the photon ring and the hot inner edge, fading through the palette to the first ink colour at the cool rim, with a palette colour for each star.

A black hole should be the darkest thing in the picture, so on a light page the shadow does not stay paper. When the paper is lighter than the last palette colour and there are at least two ink colours, the shadow and the gap round the photon ring are drawn in the last colour, and the gas runs from paper through the others. The demo's last colour is its tint mixed into the page's foreground: on a dark page that is near-white, so the gas burns from the tint to white on a black sky; on a light page it is a deep shade of the tint, so the hole is a dark void inside a tinted disk on a pale sky. With a single ink, or with colorField, the shadow stays paper.

The lens is faked, not traced: each cell works out which part of the disk it shows in polar coordinates round the centre, so it costs about as much as the Galaxy.

Examples

Warm close-up

A larger size crops the disk at the edges of the box, and a slight angle cants it. colorField with explicit colours, from a warm black through red and amber to white, keeps the sky dark in both themes. The 8×8 matrix gives a finer texture.

Beside a headline

The hole sits on the right, canted slightly, and turns clockwise, so its dim side faces the text on the left and the bright side is on the far edge. A soft tint of the ink between paper and ink fills in the outer disk, so it reads as a glow rather than scattered dots. Below 560px wide, the example moves the center to the top middle and the text to the bottom, so the disk stays in frame and clear of the copy.

Props

Notes

• The black hole is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
• With reduced motion turned on, it draws one still frame and stops.
• It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it shows a still SVG of the same scene in smooth gradients: the shadow, the photon ring, the near half of the disk in front with the same soft edge, the lensed arcs over and under the shadow, the brighter side and a scatter of stars, in the same colours, the dark void on a light page included.
• On a light theme the sky stays light and, with two or more inks, the shadow takes the last ink, so the hole still reads as a void (see Usage). Pass a dark first palette colour, as the close-up does, for a black sky on any theme.