Generative art: hundreds of particles ride an invisible, shifting current and leave silky trails, curling into a swirl around the pointer.
Go with the flow
Customize
Usage
import { FlowField } from "@/components/motionkit/flow-field";
<FlowField
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</FlowField>Motion
The exact curves this component runs, plotted with Motion's own maths.
Current
Runs on its own
Generative heroes for creative studios, AI and data products, music and art sites: a background that never repeats.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/flow-field. It saves the file to components/motionkit and installs its dependencies.
Flow Field is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, it draws a still map of the current once. It also stops drawing off screen.
Constellation
Drifting stars join into constellations as they pass close, and reach out to the cursor with lines of light.
Silk Lines
Dozens of fine lines flowing like a length of silk in two colours, parting gently around the pointer.
Star Field
A slow-drifting night sky with twinkling stars, for space, launch and AI product heroes.
Go with the flow
Customize
Usage
import { FlowField } from "@/components/motionkit/flow-field";
<FlowField
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</FlowField>Motion
The exact curves this component runs, plotted with Motion's own maths.
Current
Runs on its own
The live preview is free to explore. Plus unlocks the source for Flow Field and every other premium component.