Galaxy

Installation

Usage

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

The galaxy is a flat disc seen at an angle: tilt leans it away from you and angle turns its long axis on the screen. A solid core glows at the centre and fades softly into the disc. Two bright logarithmic arms wind out of it with dark gaps between them and taper to a point, with knots of bright stars along them and a thin dark dust lane running along each one's inner edge, from the core out to near the tip. Sparse stars sit fixed behind it, spaced evenly, the brightest few drawn as small crosses.

The whole pattern turns as one piece, so the spiral keeps its shape however long the page stays open.

By default the palette maps brightness to colour, from paper to the last colour, and the demo draws it in one ink like the other backgrounds. Set colorField to colour the dots by place instead: the last colour where the core's glow outshines the disc, the first ink colour on the arms, and one palette colour for each background star. The handover is a short ordered ramp at the edge of the core; a middle colour, as in ["--dither-paper", "blue", "purple", "orange"], steps through it on the way.

Examples

Nearly edge-on

tilt={76} lays the disc almost flat, so the arms blur into a smooth bright lens and the dust on the near side cuts a dark lane across the core, with the bulge glowing on both sides of it, as in the Sombrero galaxy. The lane fades in past about 60°; at the default tilt and flatter it stays hidden. Three arms and a tighter twist fill the lens out evenly.

Beside a headline

The galaxy sits high on the right and turns counterclockwise, and the text sits in the clear space on the left. Below 560px wide, the example moves the center to the top middle and the text to the bottom, so the disc stays in frame and clear of the copy.

Props

Notes

• The galaxy 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 tilted spiral, with its arms, core, dust lanes and a fixed scatter of stars, in the same colours.
• On a light theme the paper is light and the galaxy is drawn in ink, so the dust lanes read as pale gaps, like a printed negative. Pass a dark first palette colour for a dark sky on any theme.