Hero260: Marble Slab Hero

A full-bleed hero over the marble-slab component: polished, book-matched marble with warped veins mirrored around a hairline joint while a softbox reflection drifts across the polish. A centered headline, an intro, an Arrow Pill and an underline link rise in over a soft stone veil.

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

Base UI flavor

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

This installs the block to components/beste/block/hero260.tsx plus the marble-slab background and the button23 and button2 buttons it uses.

Quick start

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

import { Hero260, hero260Demo } from "@/components/beste/block/hero260";

export default function Page() {
  return <Hero260 {...hero260Demo} />;
}

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

import { Hero260 } from "@/components/beste/block/hero260";

export default function Page() {
  return (
    <Hero260
      eyebrow="Vessel & Vein, a stone atelier since 1987"
      heading="Opened like a book, set like a jewel."
      description="We choose every slab at the quarry and cut it in mirrored pairs."
      buttons={[
        { label: "Visit the stone yard", href: "/visit" },
        { label: "Browse the slabs", href: "/slabs" },
      ]}
      slab={{
        groundColor: "var(--background)",
        veinColor: "#5f5a57",
        accentColor: "#b8925f",
        bookMatch: true,
        interactive: true,
      }}
    />
  );
}

Props

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

Behavior notes

• The demo passes var(--background) as slab.groundColor, so the stone, the copy (text-foreground) and the buttons follow the theme while the vein and accent colors stay fixed. A centered radial veil in the background token sits between the marble and the copy so the text stays legible over the veins.
• With interactive on, the softbox reflection follows the cursor.
• MarbleSlab shows a soft CSS stone gradient while the canvas warms up and keeps it as the fallback when WebGL fails; the canvas fades in over 1.6s once ready.
• The component pauses through an IntersectionObserver and on hidden tabs and respects prefers-reduced-motion; the copy then renders without its rise.
• The section fills at least max(640px, 100svh - 78px) with the copy centered both ways.