Hero217: Ink Fluid Hero

A full-bleed hero over the ink-fluid component, a real-time stable fluids simulation in WebGL where pigments swirl through water on a ground taken from the foreground token, with an eyebrow at the top and a large serif headline, a description and two buttons at the bottom.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero217?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero217?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero217.tsx plus the ink-fluid background and the button23 and button2 buttons it uses.

Quick start

The installed file exports hero217Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero217, hero217Demo } from "@/components/beste/block/hero217";

export default function Page() {
  return <Hero217 {...hero217Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero217 } from "@/components/beste/block/hero217";

export default function Page() {
  return (
    <Hero217
      eyebrow="Fondation Vasseur"
      heading="Nothing here is finished."
      description="A season of works that keep changing after the artist leaves the room."
      buttons={[
        { label: "Plan your visit", href: "/visit" },
        { label: "See the season", href: "/season" },
      ]}
      ink={{
        groundColor: "var(--foreground)",
        pigments: ["#1a264c", "#d32f1a", "#27272a"],
        vorticity: 0.5,
        autoInterval: 2.2,
      }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• The section uses bg-foreground text-background, so it inverts the theme; keep groundColor on var(--foreground) and pigments glow on a dark ground and mix like ink on a light one.
• A radial shade from the lower left keeps the copy legible over the brightest ink.
• The cursor drags ink and a click switches pigment. Touch does not draw; instead drops land on their own every autoInterval seconds once the pointer has been idle for 2.5 seconds, and 0 turns them off.
• The simulation pauses offscreen or in a hidden tab, and the pixel ratio is capped at 1.5 and lowered when frames run slow.
• With reduced motion, the fluid runs 90 steps once and holds that frame. Without WebGL, a soft gradient in the first two pigments is shown.