Early price: everything for $99, lifetime

Components

Fluid Field

Pro

Installation

ProRequires a Planes Pro license.
pnpm dlx shadcn add @useplanes/fluid-field

Works once the @useplanes registry is set up in your project (one-time). After that, copy and run commands directly.

Unlock with Planes Pro

$99 once · 163 Pro components · lifetime updates.

I have a licenseGet Pro
import { FluidField } from "@/components/ui/FluidField";

<div className="relative h-[560px] bg-black">
  <FluidField />
  <h1 className="absolute inset-0 grid place-items-center text-white">
    Your headline
  </h1>
</div>

Use cases

  • Hero background

    Slow organic colour behind a headline. Pairs with white or pale copy.

  • Loading or empty screen

    Something alive on a screen with nothing else on it.

  • Section backdrop

    Clip it to a card or band to lift one section without a texture file.