Particle Field

Points drift and link up when they pass close, then part around the pointer. For networks, infrastructure and anything about connection.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add particle-field

Usage

Example

import { ParticleField } from "@/components/galactrex/particle-field";

<section className="relative overflow-hidden">
  <ParticleField />
  <h1 className="relative">Everything connects</h1>
</section>

Source

Installs to components/galactrex/particle-field.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`density`	`number`	`9`	Particles per 100,000 square px (capped at 220).
`link`	`number`	`110`	Join distance in px; 0 draws no lines.
`speed`	`number`	`14`	Drift in px per second.
`repel`	`boolean`	`true`	The pointer pushes particles aside.
`opacity`	`number`	`0.6`	Dot and line strength, 0 to 1.
`color`	`string`	`"--gxui-ink"`	CSS colour or --gxui-* name.
`className`	`string`	—	Extra classes for the outer element.

Variants

Network. Points joined by fading lines.
Dust. `link={0}` leaves only drifting points.

Accessibility

Decorative only and aria-hidden; never takes pointer events (it listens on the parent).
Pointer push is off on touch.

Motion and reduced motion

One canvas; the particle count is capped so large screens stay smooth.
Pauses offscreen.
Reduced motion: the network holds still.