Parallel Light, stage lighting for touring artists
We design, build and tour the light for Khruangbin, Arooj Aftab and Sampha, from the first rehearsal to the last encore of the run.
A split hero for a stage lighting studio: copy on the theme background to the left, and to the right a tall rounded dark panel running the prism-gradient background component, where a white beam enters a prism and leaves as three soft fans of dispersed color with caustic streaks and a bloom, reaching out of the dark on load. An oversized headline, an intro, a primary Arrow Pill and an underline link sit beside it. Every light setting passes through the prism prop.
A split hero: copy on the theme background, and beside it a tall rounded dark panel running the prism-gradient component, where a white beam enters a prism and leaves as soft fans of dispersed color.
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/hero272?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero272?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero272.tsx plus the prism-gradient background and the button23 and button2 buttons it uses.
The installed file exports hero272Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero272, hero272Demo } from "@/components/beste/block/hero272";
export default function Page() {
return <Hero272 {...hero272Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero272 } from "@/components/beste/block/hero272";
export default function Page() {
return (
<Hero272
eyebrow="Parallel Light, stage lighting for touring artists"
heading="Light the room the song deserves."
description="We design, build and tour the light, from the first rehearsal to the last encore."
buttons={[
{ label: "Start a tour", href: "/contact" },
{ label: "See our shows", href: "/shows" },
]}
prism={{ spectrum: 1, beams: 2, angle: -24, sourceX: 0.22, sourceY: 0.62 }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the headline |
heading | string | – | 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 |
prism | Omit<PrismGradientProps, "className" | "children"> | – | Forwarded to the PrismGradient component: colors, spectrum, base color, beams, spread, angle, prism position, bloom, sharpness, caustics, white beam, speed, saturation, grain, transition, seed and interactive |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};rounded-[2rem] box with overflow-hidden: 28rem tall on phones, 36rem on tablets, and from lg up it stretches to the full height of the hero next to the copy.background, foreground, muted-foreground, primary), so the hero follows the site theme. The panel stays dark in every theme; its dark comes from prism.baseColor.interactive on, the prism eases a little toward the cursor.IntersectionObserver and on hidden tabs and respects prefers-reduced-motion; the copy then renders without its rise.