Lisbon, May 14 & 15, 2027
Two days with Nils Frahm, Kelly Lee Owens, Jon Hopkins and 40 more people who build the instruments, engines and tools the rest of us play.
A dark, centered conference hero over the conic-gradient background component: a two-armed ring of violet, cyan, pink and amber light turns slowly behind the headline, bent into a gentle spiral, breathing and finished with a fine film grain, while its center leans toward the cursor. Hovering or focusing the primary Arrow Pill spins the ring up, widens it and brightens its core, and leaving lets it glide back. An oversized headline, an intro, the pill and an underline link rise in over a soft dark veil. Every glow setting passes through the glow prop.
A dark, centered hero over the conic-gradient component: a two-armed ring of colored light turns slowly behind the headline, and hovering the primary Arrow Pill spins it up, widens it and brightens its core before it glides back.
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/hero263?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero263?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero263.tsx plus the conic-gradient background and the button23 and button2 buttons it uses.
The installed file exports hero263Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero263, hero263Demo } from "@/components/beste/block/hero263";
export default function Page() {
return <Hero263 {...hero263Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero263 } from "@/components/beste/block/hero263";
export default function Page() {
return (
<Hero263
eyebrow="Lisbon, May 14 & 15, 2027"
heading="Where sound meets software."
description="Two days with Nils Frahm, Kelly Lee Owens, Jon Hopkins and 40 more people who build tools for sound."
buttons={[
{ label: "Get your ticket", href: "/tickets" },
{ label: "See the program", href: "/program" },
]}
glow={{
colors: ["#7b5cff", "#2fd4ff", "#ff5fa2", "#ffb347"],
backgroundColor: "#07060d",
repeat: 2,
ring: 0.55,
radius: 0.62,
grain: 0.2,
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the headline |
heading | string | – | Centered headline, rendered as the page h1 |
description | string | – | Intro under the headline |
buttons | ActionButton[] | [] | The first renders as a light Arrow Pill that engages the glow, every later one as a Button2 underline link |
glow | Omit<ConicGradientProps, "className" | "children"> | – | Forwarded to the ConicGradient component: colors, background, center, repeat, angle, rotation, radius, ring, falloff, blur, twist, core, breathe, saturation, grain, transition and interactive |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};rotation at 3.5 times its value (2 if it was 0), core raised by 0.35 and radius 8% larger. ConicGradient glides to those values and back, so the ring spins up and settles instead of jumping.glow.backgroundColor sits between the glow and the copy so the light text (#f6f4ff) stays legible; the section background follows the same color.interactive on, the ring's center leans toward the cursor.IntersectionObserver and on hidden tabs and respects prefers-reduced-motion: the copy then renders without its rise and the ring holds still.max(640px, 100svh - 78px) with the copy centered both ways.