Hero268: Mosaic Bento Hero

A warm bento hero over the mosaic-gradient component: a plain card carries the copy, and three rounded panels cut from the same glaze show the flowing gradient in large, medium and fine tiles.

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

Base UI flavor

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

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

Quick start

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

import { Hero268, hero268Demo } from "@/components/beste/block/hero268";

export default function Page() {
  return <Hero268 {...hero268Demo} />;
}

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

import { Hero268 } from "@/components/beste/block/hero268";

export default function Page() {
  return (
    <Hero268
      eyebrow="Tessera, glazed tile from Porto"
      heading="Color, fired one tile at a time."
      description="We glaze every tile by hand in small kiln batches."
      buttons={[
        { label: "Order samples", href: "/samples" },
        { label: "See the glazes", href: "/glazes" },
      ]}
      mosaic={{
        colors: ["#0f3b5f", "#1f7a8c", "#58b4ae", "#f2c14e", "#e76f51"],
        backgroundColor: "var(--muted)",
        cells: 22,
        depth: 0.55,
      }}
    />
  );
}

Props

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

Behavior notes

• The three panels share the mosaic settings but scale cells by 0.55, 1 and 1.7 and shift seed by 0, 3 and 7, so the same glaze reads at three tile sizes without repeating its pattern.
• On medium screens and up the grid is 12 columns and three rows: the copy card and the large panel share the top two rows, the medium and fine panels share the bottom row. On small screens everything stacks, copy first.
• Each panel is its own MosaicGradient with its own canvas: the tiles grow in from the panel's center over 2.4 seconds and lift toward the cursor only inside that panel.
• The hero follows the site theme: the page is bg-background, the copy card is bg-card with text-card-foreground and muted-foreground copy, and the demo grout is var(--muted). The glaze colors stay as picked, like a photograph.
• The cards rise in one after another. The panels pause offscreen and on hidden tabs and respect prefers-reduced-motion; the cards then render without their rise.
• The grid fills at least max(600px, 100svh - 142px) on medium screens and up.