Hero196: Liquid Chrome Hero

A full-bleed hero over a live WebGL liquid chrome surface from the liquid-chrome component, with an oversized black-weight headline blended by difference and a ruled footer row that pairs the intro with 2 Arrow Pill buttons. Eyebrow, headline, intro and buttons rise in on a staggered fade.

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

Base UI flavor

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

This installs the block to components/beste/block/hero196.tsx plus the liquid-chrome background and the button23 button it uses.

Quick start

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

import { Hero196, hero196Demo } from "@/components/beste/block/hero196";

export default function Page() {
  return <Hero196 {...hero196Demo} />;
}

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

import { Hero196 } from "@/components/beste/block/hero196";

export default function Page() {
  return (
    <Hero196
      eyebrow="Surface study no. 04"
      heading="Form that refuses to hold still."
      description="A studio for identities that move. We cast brands in liquid metal, then let them settle into something you can hold."
      buttons={[
        { label: "Enter the studio", href: "/studio" },
        { label: "Watch the reel", href: "/reel" },
      ]}
      chrome={{
        shadowColor: "var(--background)",
        highlightColor: "#d1d6e0",
        iridescence: 0.75,
        speed: 1,
        pull: 0.45,
      }}
    />
  );
}

Props

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

Behavior notes

• The section paints chrome.shadowColor (falling back to var(--background)) as its own background and reuses it for the bottom gradient that fades the lower two thirds into shade, so the chrome folds into the theme background and the copy stays legible over any chrome setting.
• The copy follows the theme through text-foreground, the rule is border-foreground/15, and the buttons use the primary and outline tones. The headline stays white on purpose: with mix-blend-difference it inverts against whatever the chrome shows beneath it, in both themes.
• LiquidChrome renders in WebGL, swells toward the cursor, pauses through an IntersectionObserver and on hidden tabs, and holds a still frame under prefers-reduced-motion.
• When the WebGL program cannot be created, the component swaps the canvas for a radial CSS gradient built from highlightColor and shadowColor.
• With reduced motion, the copy skips its rise and renders in place; otherwise each piece fades up 28px with delays from 0.2s to 0.75s.
• The section fills at least max(640px, 100svh - 78px) and anchors the copy to the bottom with mt-auto.
• Every prop is optional: without a description or buttons the ruled row stays as a single hairline under the headline.