proNew197 lines · framer-motion

Flow Field

Thousands of tiny decisions, moving together. A full-width section backed by a canvas flow field: hundreds of specks drift along a smooth pseudo-noise vector field and leave soft fading trails, under a short glass-card headline.

Use it for: A data, swarm or multi-agent product section that wants a living backdrop implying many small independent things cooperating.
Themes: Light + dark
License: Commercial use

Live

Current

Thousands of tiny decisions, moving together

Specks drifting along an invisible field, never quite the same twice.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width section backed by a canvas flow field: hundreds of specks drift along a
 * smooth pseudo-noise vector field, leaving soft fading trails. A glass card holds a
 * short headline on top.
 */

export interface BgFlowFieldProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Each particle's direction comes from summed sine waves of its position and elapsed time, giving a smooth, non-repeating current instead of random jitter.
→Trails are painted by compositing a low-alpha fill of the background colour each frame instead of clearing the canvas outright, so motion leaves a soft fade.
→Particles wrap around the edges of the canvas instead of disappearing.
→density sets particle count, speed scales drift speed, accent picks the particle colour token, both re-read from CSS variables on theme change.
→Pauses when the section scrolls offscreen or the tab is hidden; prefers-reduced-motion renders a settled frame once and stops.

Accessibility

✓Canvas is aria-hidden; only the heading and copy are in the accessibility tree.
✓Headline sits on a translucent blurred card for contrast against the field in both themes.
✓Honours prefers-reduced-motion.