Lamplight, a listening room on Wabash Avenue
Vinyl on a hand-built system, low light and a short list of drinks. Doors open at six, and the last record plays at two.
A late-night listening bar hero seen through a rainy window, built on the rain-glass background component: a dusk street glows out of focus behind misted glass, droplets gather and larger drops run down in stop-start paths leaving clear trails, each drop a tiny lens showing a sharp flipped view, and the cursor wipes the mist like a finger. A serif headline, an intro, an Arrow Pill and an underline link sit in white in the lower corner. Every rain setting passes through the rain prop.
A full-height hero seen through a rainy window with the rain-glass WebGL background: the photo sits out of focus behind misted glass, droplets gather and larger drops run down leaving clear trails, and the cursor wipes the mist, while a white serif headline, an intro, an Arrow Pill and an underline link rise in at the lower 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/hero231?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero231?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero231.tsx plus the rain-glass background and the button23 and button2 buttons it uses.
The installed file exports hero231Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero231, hero231Demo } from "@/components/beste/block/hero231";
export default function Page() {
return <Hero231 {...hero231Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero231 } from "@/components/beste/block/hero231";
export default function Page() {
return (
<Hero231
eyebrow="Lamplight, a listening room on Wabash Avenue"
heading="Stay for one more record."
description="Vinyl on a hand-built system, low light and a short list of drinks."
buttons={[
{ label: "Reserve a booth", href: "/reserve" },
{ label: "Tonight's records", href: "/tonight" },
]}
image={{
src: "https://images.unsplash.com/photo-1519501025264-65ba15a82390?w=2000&q=80",
alt: "A city street at dusk with car lights and lit towers",
}}
rain={{ blur: 0.6, fog: 0.6, density: 0.5, rate: 0.5, tintColor: "#a9b8c9", wipe: true, recovery: 0.4 }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Muted white 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 light Arrow Pill (Button23), the rest as white underline links (Button2) |
image | { src: string; alt: string } | – | Photo seen through the glass, passed to RainGlass as src and alt |
rain | Omit<RainGlassProps, "src" | "alt" | "className" | "children"> | – | Forwards the RainGlass props from the rain-glass component (blur, fog, density, rate, drop size, refraction, tint, wipe, recovery, interactive, paused) |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};image is set; without it the section is a plain black ground under the copy.wipe on, the cursor clears the mist like a finger and recovery sets how quickly it mists over again.