Hero made by @ybouane.

@crazygl/hero-gravitational-particles

Hundreds of particles orbit invisible gravity wells. The cursor adds a temporary attractor that bends nearby paths into fresh orbits.

Demo

Gravitational Particles

Install

npm install @crazygl/hero-gravitational-particles

Usage

import GravitationalParticles from '@crazygl/hero-gravitational-particles';

export default function Page() {
  return (
    <GravitationalParticles
      heading="Orbits."
      particleCount={800}
      wellCount={3}
      cursorStrength={1.4}
    />
  );
}

Customise

• Content — contentType, heading, subheading, columns / custom node.
• Background — transparent toggle, backgroundColor.
• Particles — particleCount, particleColor, accentColor, trailFade, particleSize, bloom.
• Physics — wellCount, wellStrength, cursorStrength, cursorRepel, speed (time scale).

Best for

• AI and data-platform launch pages signalling physics-grade engineering.
• Premium SaaS and developer-tool landing pages.
• Astronomy, science, and space-tech sites.
• Dark, cinematic brand homepages with an interactive moment.

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.