# Flock Cursor

> A flock of birds that follows the pointer.

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.

- Family: Originals
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/flock-cursor/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add flock-cursor
```

It installs to `components/galactrex/flock-cursor.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

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

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

## 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

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