Blue Hour Sessions, rooftop concerts in Lisbon
Twelve Friday nights above the river, from Esperanza Spalding to Kamasi Washington. Doors open at sunset, the first set starts when the last light leaves the water.
An editorial concert hero built around a band of the bokeh-gradient background component: an oversized headline above, then a full-width strip of out-of-focus city lights that opens from a hairline like a letterbox, drifting in depth and shifting with parallax toward the cursor, then an intro beside an Arrow Pill and an underline link below. The lights live only in the band, so the copy sits on the calm page background. Every bokeh setting passes through the bokeh prop.
A concert hero built around a full-width band of the bokeh-gradient component: the headline sits above a strip of drifting, out-of-focus city lights that opens like a letterbox, with the intro and buttons below.
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/hero275?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero275?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero275.tsx plus the bokeh-gradient background and the button23 and button2 buttons it uses.
The installed file exports hero275Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero275, hero275Demo } from "@/components/beste/block/hero275";
export default function Page() {
return <Hero275 {...hero275Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero275 } from "@/components/beste/block/hero275";
export default function Page() {
return (
<Hero275
eyebrow="Blue Hour Sessions, rooftop concerts in Lisbon"
heading="Jazz, after the city lights come on."
description="Twelve Friday nights above the river, from Esperanza Spalding to Kamasi Washington."
buttons={[
{ label: "Book a rooftop seat", href: "/tickets" },
{ label: "See the lineup", href: "/lineup" },
]}
bokeh={{
colors: ["#ffb86b", "#ff7a59", "#ffd9a0", "#7fa8ff"],
backgroundColor: "#141019",
aperture: 0.35,
count: 30,
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the headline |
heading | string | – | Oversized headline above the band, rendered as the page h1 |
description | string | – | Intro below the band, on the left |
buttons | ActionButton[] | [] | The first renders as a primary Arrow Pill, every later one as a muted Button2 underline link, aligned right below the band |
bokeh | Omit<BokehGradientProps, "className" | "children"> | – | Forwarded to the BokehGradient in the band: colors, background, count, size, focus, aperture, blades, brightness, wash, speed, depth, saturation, grain, grain size, grain motion, transition, seed and interactive |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};clamp(11rem, 24vw, 20rem) tall. It opens from a hairline across its middle over 1.6s with a clip-path inset, while the lights inside grow out of their background through the component's own intro.bg-background, text-foreground, text-muted-foreground); the band keeps its own dark night background from bokeh.backgroundColor, like a photograph of the city.interactive on, the near and far lights shift apart with parallax as the cursor crosses the band.prefers-reduced-motion the band is open at once, the copy renders without its rise and the lights hold still.max(640px, 100svh - 78px) with the three rows centered vertically.