Flow Field

Heroes 5

About

A generative canvas background of particles drifting along a smooth, seeded noise current and leaving fading trails, for hero sections and empty states.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Flow Field to your project and fits it to your theme.

Code

How Flow Field is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import FlowField from "@/components/ui/flow-field";
import { Sparkles } from "lucide-react";

export default function FlowFieldDemo() {
  return (
    <div className="relative h-[560px] w-full overflow-hidden bg-surface">
      <FlowField density={4} speed={1.2} className="absolute inset-0" />
      <div className="relative flex h-full flex-col items-start justify-end gap-2 bg-gradient-to-t from-surface via-surface/60 to-transparent p-6">
        <span className="inline-flex items-center gap-1 rounded-full bg-accent-soft px-2.5 py-1 text-[11px] font-bold text-accent-ink">
          <Sparkles size={12} aria-hidden="true" /> New
        </span>
        <h2 className="text-[28px] font-extrabold leading-tight tracking-[-0.02em] text-ink">
          Forecasts that follow the current
        </h2>
        <p className="max-w-[420px] text-[13px] font-medium leading-normal text-ink-soft">
          Cash flow modelled from every invoice, bill and payroll run — updated
          as they happen.
        </p>
      </div>
    </div>
  );
}