Constellation Field

Heroes 177

About

An animated canvas background of drifting, pointer-reactive particle nodes connected by fading constellation lines, used behind hero/landing sections.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Constellation Field to your project and fits it to your theme.

Code

How Constellation Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ConstellationField from "@/components/ui/constellation-field";

export default function ConstellationFieldDemo() {
  return (
    <div className="relative h-[640px] w-full overflow-hidden rounded-xl border border-border bg-[#070914]">
      <ConstellationField
        mode="dark"
        speed={1}
        size={1}
        strokeWidth={1}
        length={1}
        density={1}
        opacity={1}
        hue={0}
        saturation={1}
        brightness={1}
      />
    </div>
  );
}