Hero265: Fluid Gradient Hero

A split hero for a record release: a large rounded cover panel runs the fluid-gradient component, a marbled paint pour under a film grain that drifts at a crawl until a play toggle on the cover sets it pouring. An oversized headline, an intro, a primary Arrow Pill and an underline link sit beside it on the theme background.

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/hero265?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Hero265, hero265Demo } from "@/components/beste/block/hero265";

export default function Page() {
  return <Hero265 {...hero265Demo} />;
}

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

import { Hero265 } from "@/components/beste/block/hero265";

export default function Page() {
  return (
    <Hero265
      eyebrow="Harbor Hall Records, out October 17"
      heading="A record you can almost see."
      description="Eleven songs recorded live to tape over four nights in Bergen."
      buttons={[
        { label: "Pre-order the vinyl", href: "/pre-order" },
        { label: "Hear the first single", href: "/single" },
      ]}
      pourLabel="Pour the cover"
      settleLabel="Let it settle"
      restSpeed={0.3}
      pourSpeed={1.6}
      fluid={{
        colors: ["#141b3d", "#2f5fb3", "#f1e6d2", "#f08a4b", "#c2362b"],
        warp: 0.7,
        grain: 0.2,
      }}
    />
  );
}

Props

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

Behavior notes

• The toggle is a real button with aria-pressed; it only switches speed between restSpeed and pourSpeed. The paint keeps its place when the speed changes, so the pour picks up from where it is instead of jumping.
• With interactive on, the paint bends softly toward the cursor over the cover like a lens.
• The ground, copy, buttons and the toggle chip follow the theme tokens (bg-background, text-foreground, bg-card, bg-primary); only the paint colors in fluid.colors stay fixed.
• The cover is square on phones, 5 by 4 on small screens and square again beside the copy from lg up.
• The paint pauses through an IntersectionObserver and on hidden tabs and respects prefers-reduced-motion: the cover then holds a still frame, the toggle has nothing to animate, and the copy and panel render without their entrance.
• The section fills at least max(640px, 100svh - 78px) with both columns centered vertically.