# Flow Field

> Generative art: hundreds of particles ride an invisible, shifting current and leave silky trails, curling into a swirl around the pointer.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/flow-field

## When to use it

Generative heroes for creative studios, AI and data products, music and art sites: a background that never repeats.

## How it works

Every point on the canvas has a direction, worked out from a few layered sine waves that drift slowly over time, which makes an invisible, smoothly changing current. Each particle steps along the current every frame and draws a short line from where it was. Instead of clearing, the canvas is painted with the container's background at low opacity, so older lines fade into trails. Near the pointer, the current blends into a circle around it, and particles fade in and out over their lives.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/flow-field` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors` | `[string, string]` | `["#5FAEB4", "#A56D5B"]` | The two particle colours. |
| `particles` | `number` | `700` | Number of particles. |
| `speed` | `number` | `1` | Travel speed. 0 draws a still map. |
| `trail` | `number` | `0.92` | How long trails linger, 0 to 1. |
| `interactive` | `boolean` | `true` | Swirl around the pointer. |
| `children` | `ReactNode` |  | Your content, layered above. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The canvas is hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, it draws a still map of the current once. It also stops drawing off screen.
- **Colour contrast: Partial.** Trails stay under 35% opacity, but they cross the middle: a soft dark centre helps, and large headings read best over it.