Flow Field Background
Curl noise vector field rendered as dense directional strokes — cursor parts the flow.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/flow-field.json▸ Or install manually
- Copy the source from the Code tab above.
- Place it at
components/mellow/flow-field.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| strokeColor | string | "rgba(var(--ink-rgb),0.12)" | Base color of the field strokes. |
| spacing | number | 22 | Distance between stroke origins in pixels. |
| strokeLength | number | 16 | Length of each stroke in pixels. |
| speed | number | 1 | Field evolution speed multiplier. |
| influenceRadius | number | 130 | Cursor attraction radius in pixels. |
| className | string | — | Additional CSS classes. |
| children | React.ReactNode | — | Content rendered above the canvas. |