Hero made by @ybouane.

@crazygl/hero-constellation

Nodes float in 2-D space and connect to their nearest neighbours with glowing lines. The cursor attracts nearby nodes, redrawing the graph as you move.

Demo

Constellation Network

Install

npm install @crazygl/hero-constellation

Usage

import Constellation from '@crazygl/hero-constellation';

export default function Page() {
  return (
    <Constellation
      heading="Connected."
      nodeCount={90}
      accentColor="#ff6cd1"
    />
  );
}

Customise

• Network — nodeCount (30–200), linkRadius (connection distance), nodeSize, lineWidth, speed (ambient drift), cursorPull (how strongly the field reacts to the pointer).
• Colour — nodeColor, lineColor, accentColor (hot tint applied to close/clustered pairs).
• Background — transparent toggle, backgroundColor.

Best for

• Developer tools, infrastructure and observability brands
• AI / data products and professional networks
• Security sites and any "connected systems" narrative
• Use over a solid dark panel or, with transparent, layered on imagery

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.