❍Flow Field Background
03 / 08background

Flow Field Background

Curl noise vector field rendered as dense directional strokes — cursor parts the flow.

backgroundcanvasinteractiveanimation

Curl noise vector field — strokes follow the flow

Move cursor to part the field

Installation

▸ Run the following command

npx shadcn@latest add https://mellowui.com/r/flow-field.json

▸ Or install manually

  1. Copy the source from the Code tab above.
  2. Place it at components/mellow/flow-field.tsx
  3. Import and use.

API Reference

PropTypeDefaultDescription
strokeColorstring"rgba(var(--ink-rgb),0.12)"Base color of the field strokes.
spacingnumber22Distance between stroke origins in pixels.
strokeLengthnumber16Length of each stroke in pixels.
speednumber1Field evolution speed multiplier.
influenceRadiusnumber130Cursor attraction radius in pixels.
classNamestring—Additional CSS classes.
childrenReact.ReactNode—Content rendered above the canvas.