Constellation Field React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import ConstellationField from "./ConstellationField";

export default function Example() {
  return (
    <ConstellationField
      color={"#b1c7e3"}
      background={"#101923"}
      count={55}
      speed={45}
      paused={false}
      minHeight={400}
      children={"Somewhere beyond."}
      style={{
        "fontSize": 42,
        "color": "#dfe9f3",
        "letterSpacing": "-.05em"
      }}
    />
  );
}

Using Constellation Field

Place foreground content in children and use minHeight to size the star field. count controls how dense the connected star map becomes.

Use paused for a still composition. Check text contrast against both the brightest stars and the background colour.

Props

Name	Type	Required	Default	Description
color	string	No	"#aec3dc"	Colour of stars and connecting lines.
background	string	No	"#111923"	Background colour.
count	number	No	45	Number of deterministic stars, clamped to 8–90.
speed	number	No	45	Duration of the slow sky drift in seconds.
paused	boolean	No	false	Pause decorative motion.
minHeight	number \| string	No	360	Minimum height of the bounded background.
children	ReactNode	No	undefined	Your foreground content.
className	string	No	""	Additional classes for the root element.
style	CSSProperties	No	undefined	Inline styles for caller-defined size, typography, and appearance.