Harrowgate Mill, stone-ground since the harvest of 1911
Heritage wheat grown on six family farms within a day's cart of the mill, ground slowly between French burr stones and bagged the same week.
A heritage grain mill hero over the wheat-field background component: a field of ripe wheat at golden hour, thousands of stalks receding to a hazy horizon under a low sun, bending as gusts roll across and parting under the cursor like a brushing hand. A semibold serif headline, an intro, an Arrow Pill and an underline link sit in the sky at the upper left. Every field setting passes through the field prop; it pauses offscreen and holds a still field for reduced motion.
A full-bleed hero over the wheat-field component, a Canvas 2D field of ripe wheat at golden hour where thousands of stalks recede to a hazy horizon, bend as gusts roll across and part under the cursor, with a serif headline, an intro and two buttons in the sky at the upper left.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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/hero237?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero237?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero237.tsx plus the wheat-field background and the button23 and button2 buttons it uses.
The installed file exports hero237Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero237, hero237Demo } from "@/components/beste/block/hero237";
export default function Page() {
return <Hero237 {...hero237Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero237 } from "@/components/beste/block/hero237";
export default function Page() {
return (
<Hero237
eyebrow="Stone-ground since the harvest of 1911"
heading="Flour that still remembers the field."
description="Heritage wheat from six family farms, ground slowly between French burr stones."
buttons={[
{ label: "Shop the flours", href: "/shop" },
{ label: "Visit the mill", href: "/visit" },
]}
field={{ skyTop: "var(--background)", skyHorizon: "color-mix(in oklab, var(--background) 70%, #f3d6a8)", grainColor: "#d9a441", wind: 0.5, brush: 0.6 }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the heading |
heading | string | – | Serif headline, rendered as the page h1 |
description | string | – | Intro under the heading |
buttons | ActionButton[] | [] | The first renders as a primary Button23 arrow pill, the rest as Button2 underline links |
field | Omit<WheatFieldProps, "className" | "children"> | – | Forwards the WheatField component's props: density, skyTop, skyHorizon, sunColor, grainColor, wind, gustSpeed, sway, brush, interactive, paused |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};max(640px, 100svh - 78px) tall, and the copy sits at the top so it reads against the sky.foreground, primary), and the demo sky runs from var(--background) to a warm tint of it at the horizon, so the copy reads in light and dark mode. The sun and grain colors stay fixed as part of the art. If you set a fixed sky, check it against the theme's foreground.brush amount; touch input is ignored so scrolling a phone never flattens the field.