Marlowe & Crane, private bank since 1871
Banking for families who plan in generations. One banker who knows your name, and every decision made under the same roof for over 150 years.
A private bank hero on warm paper, built on the line-engraving component: a portrait recut live as a banknote-style intaglio engraving, its fine lines swelling with the shadows and bending around the face, pressed into the page with a soft plate mark. The lines are cut in one by one on arrival and drift very slowly, and a soft loupe follows the cursor with finer line work. A semibold serif headline, an intro, an Arrow Pill and an underline link sit on the left. Every engraving setting passes through the engraving prop.
A split hero on the theme background with a serif headline, an intro, an Arrow Pill and an underline link on the left, and the line-engraving component on the right: a portrait recut live in WebGL as a banknote-style intaglio engraving whose lines are cut in one by one on arrival and drift very slowly.
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/hero256?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero256?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero256.tsx plus the line-engraving component and the button23 and button2 buttons it uses.
The installed file exports hero256Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero256, hero256Demo } from "@/components/beste/block/hero256";
export default function Page() {
return <Hero256 {...hero256Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero256 } from "@/components/beste/block/hero256";
export default function Page() {
return (
<Hero256
eyebrow="Marlowe & Crane, private bank since 1871"
heading="Some things are worth engraving."
description="Banking for families who plan in generations. One banker who knows your name."
buttons={[
{ label: "Speak with a banker", href: "/contact" },
{ label: "Read our history", href: "/history" },
]}
engraving={{
imageSrc: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=1200&h=1500&fit=crop&q=80",
imageAlt: "Engraved portrait of a bearded man in a dark shirt",
inkColor: "var(--foreground)",
paperColor: "var(--background)",
plateMark: true,
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the headline |
heading | string | – | Serif headline, rendered as the page h1 |
description | string | – | Intro under the headline |
buttons | ActionButton[] | [] | The first renders as a primary Arrow Pill, every later one as a Button2 underline link |
engraving | Omit<LineEngravingProps, "className" | "children"> | – | Forwarded to the LineEngraving component: image source and alt, ink and paper colors, density, angle, contour, cross hatch, loupe, speed, grain, plate mark and interactive |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};engraving.paperColor (falling back to var(--background)) as its background, and the copy uses text-foreground and text-muted-foreground. The demo engraves in var(--foreground) on var(--background), so the portrait follows the theme.interactive on, a soft loupe follows the cursor and shows finer line work under it.engraving is set; it sits in a 4:5 portrait frame capped at max-w-md, and from md its width is limited so the frame fits the viewport height.LineEngraving shows the photograph in grayscale with mix-blend-multiply instead.LineEngraving pauses through an IntersectionObserver and on hidden tabs and respects prefers-reduced-motion; the copy and frame then appear without their rise.