The Round, a listening room in Bergen
Sixty speakers in a circle, forty seats in the middle and nothing to look at but the dark. This season: Arooj Aftab, Jon Hopkins and Hania Rani, each for three nights only.
A light editorial hero with a circular portal: the vortex-gradient background component turns inside a large round window beside the copy, a spiral of soft pastel color pouring toward a glowing eye, while a hairline orbit draws itself around it on load. An oversized dark headline, an intro, an Arrow Pill and an underline link rise in on the paper side. The portal leans gently toward the cursor, and every vortex setting passes through the vortex prop.
A hero with a circular portal: the vortex-gradient component turns inside a large round window beside the copy while a hairline orbit draws itself around it. An oversized headline, an intro, an Arrow Pill and an underline link rise in beside it.
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/hero273?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero273?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero273.tsx plus the vortex-gradient background and the button23 and button2 buttons it uses.
The installed file exports hero273Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero273, hero273Demo } from "@/components/beste/block/hero273";
export default function Page() {
return <Hero273 {...hero273Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero273 } from "@/components/beste/block/hero273";
export default function Page() {
return (
<Hero273
eyebrow="The Round, a listening room in Bergen"
heading="Step inside the sound."
description="Sixty speakers in a circle and forty seats in the middle."
buttons={[
{ label: "Book a seat", href: "/book" },
{ label: "See the season", href: "/season" },
]}
vortex={{
colors: ["#f4c8d0", "#d9c8f2", "#bcd3f5", "#c5e6dc", "#f7dfc4"],
baseColor: "#ece5e3",
arms: 3,
eye: 0.4,
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the headline |
heading | string | – | Oversized 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 |
vortex | Omit<VortexGradientProps, "className" | "children"> | – | Forwarded to the VortexGradient inside the portal: colors, base, arms, tightness, spread, depth, turbulence, eye, center, direction, speed, saturation, grain, transition, seed and interactive |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};rounded-full mask, with a soft drop shadow. The demo's spread of 1.25 keeps the color reaching the rim of the circle; lower it to leave a ring of baseColor inside the window.bg-background, text-foreground, text-muted-foreground); only the vortex colors inside the portal stay fixed.IntersectionObserver and on hidden tabs and respects prefers-reduced-motion: the copy, the portal and the orbit then appear without motion.