Hero

Flow Field Hero

A canvas-rendered hero block. Particles advect along a summed-sine flow field, leaving comet trails that bend and wave as you scroll — the field's phase is driven by `window.scrollY`. Scroll-driven (not cursor-driven), with light/dark `theme` support, a centered scrim that keeps headline text legible over the field, devicePixelRatio-aware rendering, a static `prefers-reduced-motion` fallback, and zero external animation deps beyond `motion`.

UniqueUI CLI

npx uniqueui add hero-flow-field

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/hero-flow-field.json -y

Preview

Field · scroll to flow

Momentum you can see.

A canvas flow field of streamlines that bend and wave with the page scroll position. Scroll-driven, not cursor-driven — no external deps.

Usage

import { FlowFieldHero } from "@/components/ui/hero-flow-field";

export default function Hero() {
  return (
    <FlowFieldHero theme="dark">
      <span className="mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 font-mono text-[10px] uppercase tracking-[0.2em] text-white/70 backdrop-blur">
        <span
          aria-hidden
          className="h-1.5 w-1.5 rounded-full bg-sky-400 shadow-[0_0_10px_2px] shadow-sky-400/40"
        />
        Field · scroll to flow
      </span>
      <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-6xl">
        Momentum you can see.
      </h1>
      <p className="mt-5 max-w-xl text-pretty text-base text-white/65 sm:text-lg">
        A canvas flow field of streamlines that bend and wave with the page
        scroll position. Scroll-driven, not cursor-driven — no external deps.
      </p>
      <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
        <button
          type="button"
          className="group inline-flex h-11 cursor-pointer items-center gap-2 rounded-full bg-white px-6 text-sm font-medium text-black transition-transform duration-200 hover:-translate-y-px"
        >
          <span>Get started</span>
          <span aria-hidden className="transition-transform duration-200 group-hover:translate-x-0.5">
            →
          </span>
        </button>
        <button
          type="button"
          className="inline-flex h-11 cursor-pointer items-center gap-2 rounded-full border border-white/15 px-6 font-mono text-xs uppercase tracking-[0.18em] text-white/85 backdrop-blur transition-colors hover:bg-white/5"
        >
          View source
        </button>
      </div>
    </FlowFieldHero>
  );
}

Props

Prop	Type	Description
`theme`	`"light" \| "dark"`	Palette for the field, scrim, text, and CTAs. Forwarded to the background and default content.
`children`	`ReactNode`	Slotted hero content. Omit for the default theme-aware headline + CTAs.
`className`	`string`	Classes for the outer `<section>`.
`backgroundProps`	`{ theme?: "light" \| "dark"; colors?: [string, string]; density?: number; lineWidth?: number; scrollStrength?: number; speed?: number; trail?: number; className?: string }`	Forwarded to the canvas background layer (`FlowFieldBackground`). `density` scales particle count (0.2–3); `trail` sets comet-tail length (0.8–0.98); `scrollStrength` controls how hard scroll bends the field.