Hero261: Mesh Gradient Hero

A full-bleed hero over the mesh-gradient component: soft color fields drift and warp under a film grain while a row of mood chips swaps the palette, fading the gradient through to the new colors and switching the text between dark and light ink.

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

Base UI flavor

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

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

Quick start

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

import { Hero261, hero261Demo } from "@/components/beste/block/hero261";

export default function Page() {
  return <Hero261 {...hero261Demo} />;
}

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

import { Hero261 } from "@/components/beste/block/hero261";

export default function Page() {
  return (
    <Hero261
      eyebrow="Aubade, the sunrise lamp"
      heading="Wake to a softer kind of morning."
      description="Aubade fills the room with slow, drifting color for 30 minutes before your alarm."
      buttons={[
        { label: "Pre-order for $189", href: "/pre-order" },
        { label: "How it works", href: "/how-it-works" },
      ]}
      moods={[
        { label: "Dawn", colors: ["#fde7df", "#ffb4a2", "#ff7f6e", "#c9b8ff"], ink: "dark" },
        { label: "Night", colors: ["#070b1f", "#1a2458", "#34307a", "#ff9b52"], ink: "light" },
      ]}
      gradient={{ distortion: 0.6, grain: 0.2, transition: 1.8 }}
    />
  );
}

Props

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

type Mood = {
  label: string;
  colors: string[]; // 1 to 6 colors, any CSS color
  ink?: "dark" | "light"; // text color over this palette, dark by default
};

Behavior notes

• Picking a mood hands its colors to MeshGradient, which crossfades every field over gradient.transition seconds. The ink, the primary pill and a bottom veil (white under dark ink, black under light ink) fade along with it over one second.
• The mood chips are a radiogroup; each chip shows a small swatch of its first colors.
• Ink follows the palette, not the theme: text-black for dark ink and text-white for light ink. The first pill uses the primary tone under dark ink and the light tone under light ink.
• With interactive on, the gradient swells toward the cursor.
• The gradient pauses through an IntersectionObserver and on hidden tabs and respects prefers-reduced-motion: the copy then renders without its rise and palettes swap without fading.
• The section fills at least max(640px, 100svh - 78px) with the copy anchored to the bottom.