Constellation

Use it like any other component. Choose a theme with preset; any prop you pass as well overrides the preset.

import { Constellation } from '@/components/effects/constellation/constellation'

export function Hero() {
  return (
    <section className="relative h-[640px] overflow-hidden">
      {/* fills its parent; move the pointer over it, or click for a supernova */}
      <Constellation preset="Observatory" className="absolute inset-0" />
      <div className="relative z-10 mx-auto max-w-xl px-6 pt-28 text-center text-white">
        <h1 className="text-5xl font-semibold tracking-tight">Find the shape of the night.</h1>
      </div>
    </section>
  )
}

// Presets: Observatory, Aurum, Chart (the light one: ink on paper), Nebula, Mono.
// The stage above is <ConstellationShowcase />, also exported, with a headline and a button that calls
// ref.current.nova() to set off a supernova. figureRegion=[left, top, right, bottom] keeps figures clear of your copy.

<Constellation preset="Aurum" count={220} />

• Observatory
• Aurum
• Chart
• Nebula
• Mono

What the command adds to your project, and where.

• components/effects/constellation/constellation.tsx

  The component.

• components/effects/constellation/network.tsx

  The component.

• components/effects/constellation/showcase.tsx

  The component.

• components/effects/constellation/poster.tsx

  The component.

• components/effects/constellation/engine.ts

  The component.

• components/effects/constellation/sprites.ts

  The component.

• components/effects/constellation/loop.ts

  The component.

• components/effects/constellation/look.ts

  The component.

• components/effects/constellation/figures.ts

  The component.

• lib/effect-runtime.ts

  Shared by every shader effect: resizing, pausing, reduced motion, context loss and the no-WebGL fallback. Installed once.

• Stars drift slowly on layers: near ones slide further than far ones as the camera wanders, and the pointer leans it a little. Depth also sets size and brightness, and a focus plane sits in the middle, so stars in front of and behind it become soft bokeh discs. Set depth to 0 for a flat sky.
• Each star links to its few nearest neighbours on the same layer. Lines fade with distance, depth and focus, and they grow in and dissolve out smoothly as stars drift together and apart, so the network is always rewiring.
• Every so often a handful of stars glide into a named figure: crisp lines are drawn between them, they flare with diffraction spikes and the name appears, then everything lets go and drifts on. Turn constellation figures off to keep it a pure drifting network.
• Move the pointer over the page and it becomes a lantern: nearby stars brighten, lean toward it and join it with fine lines. Click or tap to set off a supernova, a shock wave that pushes the stars outward; they spring back and re-link.
• Chart is made for light pages: ink dots, hairlines, a faint grid with a degree scale and Greek letters on the figure stars, on paper. Any light background colour switches the sky to that style.
• It fills its parent and shares a single animation frame with every other instance on the page. It pauses off screen and in a background tab, lowers its resolution and star count automatically when frames run slow, and draws one composed still frame, with a figure in place, under prefers-reduced-motion. Before the first frame, and without a canvas, you see an SVG poster in the same colours.

See all effects