Wadeford Estuary Reserve
Guided dusk walks across the salt marsh from October to February, when forty thousand starlings gather over the reed beds before they roost.
A dusk hero for an estuary nature reserve over the murmuration background component: thousands of starlings fly as one dark cloud that folds, stretches, splits and rejoins across a slow dusk sky, and the cursor acts as a hawk that scatters them in a wave before the flock closes again. A serif headline, an intro, an Arrow Pill and an underline link sit low on the left over a soft shade. Every flock and sky setting passes through the flock prop.
A full-height dusk hero over a Murmuration Canvas 2D flock where 1,800 starlings move as one folding cloud across a gradient sky and scatter from the cursor like a hawk, with a serif headline, an intro, an Arrow Pill and an underline link rising in low on the 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/hero226?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero226?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero226.tsx plus the murmuration background and the button23 and button2 buttons it uses.
The installed file exports hero226Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero226, hero226Demo } from "@/components/beste/block/hero226";
export default function Page() {
return <Hero226 {...hero226Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero226 } from "@/components/beste/block/hero226";
export default function Page() {
return (
<Hero226
eyebrow="Wadeford Estuary Reserve"
heading="Watch the sky fold in on itself."
description="Guided dusk walks across the salt marsh from October to February."
buttons={[
{ label: "Book a dusk walk", href: "https://beste.co" },
{ label: "Plan your visit", href: "/visit" },
]}
flock={{
birds: 1800,
skyTop: "#353a5c",
skyHorizon: "#e7b08a",
birdColor: "#16141c",
hawk: 0.6,
hawkRadius: 140,
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the headline |
heading | string | – | Serif headline, rendered as the page h1 |
description | string | – | Intro paragraph under the headline |
buttons | ActionButton[] | [] | The first renders as a primary Arrow Pill (Button23), the rest as underline links (Button2) |
flock | Omit<MurmurationProps, "className" | "children"> | – | Forwards Murmuration props: birds, skyTop, skyHorizon, birdColor, birdSize, speed, cohesion, alignment, separation, wander, hawk, hawkRadius, interactive, paused |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};justify-end, over a black/35 gradient on the lower half.skyTop and skyHorizon dark enough near the bottom left for contrast; the sky does not follow the theme, while the primary pill takes its colors from it.hawkRadius pixels scatter with a strength set by hawk, and the flock closes again once it passes. Set interactive to false to turn this off.