Marram Herbarium
Eleven thousand pressed specimens, each one laid on coated paper and left in the light until it keeps its own shadow. Browse the archive, or order a print made the same way.
A herbarium hero on the cyanotype background component: procedurally drawn ferns, grasses, seed heads and veined leaves lie on brushed watercolor paper while the print develops live from pale chemistry to deep Prussian blue, leaving the plants as white silhouettes with soft lifted edges. The cursor casts shade that holds back the blue, and every few seconds a wash rinses the print and a new arrangement develops. A serif headline, an intro, an Arrow Pill and an underline link sit on the open blue. Every print setting passes through the print prop.
A full-height herbarium hero over a Cyanotype WebGL sun print where procedurally drawn plants lie on watercolor paper while the print develops live to deep Prussian blue, washes and redevelops every few seconds, with a serif headline, an intro, an Arrow Pill and an underline link on the open blue.
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/hero230?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero230?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero230.tsx plus the cyanotype background and the button23 and button2 buttons it uses.
The installed file exports hero230Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero230, hero230Demo } from "@/components/beste/block/hero230";
export default function Page() {
return <Hero230 {...hero230Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero230 } from "@/components/beste/block/hero230";
export default function Page() {
return (
<Hero230
eyebrow="Marram Herbarium"
heading="Every leaf, printed by the sun."
description="Eleven thousand pressed specimens, each one left in the light until it keeps its own shadow."
buttons={[
{ label: "Browse the archive", href: "/archive" },
{ label: "Order a sun print", href: "https://beste.co" },
]}
print={{
blueColor: "#1c3f6e",
paperColor: "#f3eee2",
specimens: 5,
focus: "right",
washInterval: 12,
}}
/>
);
}| 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 light Arrow Pill (Button23), the rest as underline links (Button2) |
print | Omit<CyanotypeProps, "className" | "children"> | – | Forwards Cyanotype props: blueColor, paperColor, chemistryColor, specimens, seed, focus, exposureTime, washInterval, brushEdge, grain, shade, interactive, paused |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};print.paperColor (falling back to #f3eee2), so the paper border around the brushed print matches before the canvas paints.px-10 / md:px-16 padding, keeping it on the blue inside the brushed paper edge. With the demo's focus: "right" the plants gather away from the text.interactive is on. A wash rinses the print every washInterval seconds and a new arrangement develops.