Flock Cursor

Each bird keeps its distance, matches its neighbours and steers toward the cursor, so the group swirls instead of marching. Without a pointer it wanders. Behind a hero, a game menu or an about page.

Install

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

Terminal

npx @galactrex/ui add flock-cursor

Usage

Example

import { FlockCursor } from "@/components/galactrex/flock-cursor";

<section className="relative">
  <FlockCursor />
  <h1 className="relative">Studio</h1>
</section>

Source

Installs to components/galactrex/flock-cursor.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
`birds`	`number`	`28`	How many birds.
`speed`	`number`	`2.6`	Cruising speed in px per frame.
`pull`	`number`	`0.5`	How strongly they follow, 0 to 1.
`size`	`number`	`7`	Bird size in px.
`color`	`string`	`var(--gxui-ink)`	Bird colour.
`className`	`string`	—	Extra classes for the outer element.

Variants

Hero flock. Behind a headline, following the visitor.
Idle swarm. On touch it simply wanders.

Accessibility

Decorative canvas, aria-hidden, never takes pointer events.

Motion and reduced motion

Separation, alignment and cohesion on a canvas; pauses offscreen.
Touch: wanders without following. Reduced motion: a still flock.