Flow Field
betaParticles carried along a slowly changing current, drawn as streaks behind content — wind on a weather map, data in motion — parting around the pointer.
- Effects & motion
- 2 files
- 1 npm package
- Accessibility notes
- Draws on a canvas
- See it in Backgrounds
Loading the example…
pnpm dlx @dowel-ui/cli add flow-fieldnpm packages installed: class-variance-authority.
import { FlowField } from "@/components/ui/flow-field";Default
Weather Map
<FlowField>
| Prop | Type | Default |
|---|---|---|
colorStreak colour: a token or any CSS colour. Default "primary". | string | "primary" |
densityParticles per area; 1 is about one per 1,100 square pixels. Default 1. | number | 1 |
fade | "none" | "edges" | "bottom" | "none" |
interactivePart the flow around the pointer. Default true. | boolean | true |
lengthStreak length, in CSS pixels. Default 10. | number | 10 |
opacityStrength of the streaks, 0–1. Default 0.55. | number | 0.55 |
scaleBreadth of the currents; larger is broader and calmer. Default 1. | number | 1 |
seedSeed for where particles start, so a page renders the same field. Default 3. | number | 3 |
speedFlow speed multiplier. Default 1. | number | 1 |
thicknessStreak width, in CSS pixels. Default 1. | number | 1 |
Plus every attribute of <div>.
Pure decoration: the canvas is aria-hidden and ignores the pointer, which is tracked on the root without capturing events, so content inside keeps its roles and focus order. It pauses off-screen and in hidden tabs. Under reduced motion it draws one still frame — the streaks laid along the current, not moving — so the texture stays and the motion goes. Keep text on a surface where the streaks are dense.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes