Eclipse Orbit 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 EclipseOrbit from "./EclipseOrbit";

export default function Example() {
  return (
    <EclipseOrbit
      color={"#f2bc8f"}
      background={"#100f14"}
      size={230}
      speed={20}
      tilt={-28}
      minHeight={420}
    />
  );
}

Using Eclipse Orbit

Use size to fit the central sphere within the available section. tilt changes the angle of the surrounding rings.

Keep any children readable against the dark centre. minHeight controls the surrounding background independently of the sphere size.

Props

Name	Type	Required	Default	Description
color	string	No	"#f4c698"	Rim, ring, and orbiting particle colour.
background	string	No	"#100f14"	Background CSS colour.
size	number	No	210	Preferred sphere diameter in pixels, capped to 55% of the container.
speed	number	No	20	Orbit duration in seconds.
tilt	number	No	-28	Scene rotation in degrees.
minHeight	number \| string	No	380	Minimum height in pixels or a CSS length.
children	ReactNode	No	undefined	Optional content above the orbital scene.
className	string	No	""	Additional CSS classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for sizing, typography, and visual overrides.