Pro
Flow field
Fine ink strands drifting through a slowly turning current, like iron filings or wind on a weather map. The pointer stirs an eddy that the strands bend around. Content placed inside sits above it.
pnpm dlx shadcn@latest add @caliper/flow-fieldWhen to use
Use it for
- The backdrop of a hero, a sign-in screen or an empty state that wants quiet life.
- Products about weather, data, networks or anything that flows.
Skip it when
- Behind dense text or tables; keep the content short and on a solid surface.
- More than one per page.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Paused means paused
- The pause button stops time itself; the strands resume from where they were. It never runs off screen.
- Still under reduced motion
- It draws the same current once as streamlines, so the texture stays and the motion goes.
Styling
- Strands fade in and out
- Each strand lives a few seconds and fades at both ends, drawn in four alpha bands, so the field never pulses or leaves ghost trails.
Installation
pnpm dlx shadcn@latest add @caliper/flow-field
Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { FlowField } from "@/components/ui/flow-field"
The worked example comes with Pro
The 18-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
FlowField
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements and keeps aria-hidden and aria-pressed in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.
Related
- Contour fieldA topographic map that slowly breathes: contour lines over drifting terrain, with every fifth line drawn heavier like an index contour. Resting the pointer raises a hill, so the lines gather into rings around it and relax when it leaves.
- Shader backgroundA GPU-drawn animated background.
- Dot gridA grid of dots that react to the pointer.