Flow Field
Generative art: particles drift through a noise field leaving silk trails; your cursor bends the river.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Every seed is a different artwork. Trails accumulate with low alpha for a long-exposure look, and the cursor perturbs the field locally.
Installation
$ npx shadcn@latest add https://guetix.com/r/flow-field.json
Uses the shadcn CLI. It creates components/guetix/flow-field.tsx and installs nothing else.
Usage
example.tsx
import { FlowField } from "@/components/guetix/flow-field";
export default function Example() {
return <FlowField />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| seed | number | 7 | Same seed = same artwork. |
| palette | string[] | — | Trail colors. |
| count | number | 900 | Particles. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Canvas labelled with the seed; Regular mode renders a still image.