Harrow Glassworks
A furnace, two benches and a handful of glassblowers on the river in Troy. Every vessel is gathered, blown and cooled by hand, one breath at a time.
A glassblowing studio hero whose headline fills the stage under drops of clear liquid glass, rendered live in WebGL by the glass-lens component: the drops drift, melt together and split, one follows the cursor, and beneath them the type is magnified and bent with a faint color split, a bright rim and a highlight. An eyebrow sits above, and a ruled row below carries the intro, an Arrow Pill and an underline link. Every glass setting passes through the glass prop; the real headline stays in the page for screen readers.
A hero whose headline fills the stage under drops of clear liquid glass rendered in WebGL by the glass-lens component, which drift, melt together and split while one follows the cursor, magnifying and bending the type beneath; a ruled row below carries the intro and two buttons.
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/hero233?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero233?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero233.tsx plus the glass-lens component and the button23 and button2 buttons it uses.
The installed file exports hero233Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero233, hero233Demo } from "@/components/beste/block/hero233";
export default function Page() {
return <Hero233 {...hero233Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero233 } from "@/components/beste/block/hero233";
export default function Page() {
return (
<Hero233
eyebrow="Harrow Glassworks"
heading="Shaped by breath and light."
description="Every vessel is gathered, blown and cooled by hand, one breath at a time."
buttons={[
{ label: "See the vessels", href: "/vessels" },
{ label: "Book a studio visit", href: "/visit" },
]}
glass={{
inkColor: "var(--foreground)",
paperColor: "var(--background)",
tintColor: "var(--primary)",
blobs: 3,
refraction: 0.55,
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line at the top |
heading | string | – | Set huge under the glass and rendered as the page h1; the glass stage is not rendered without it |
description | string | – | Intro on the left of the ruled row |
buttons | ActionButton[] | [] | The first renders as a dark Button23 arrow pill, the rest as Button2 underline links |
glass | Omit<GlassLensProps, "text" | "as" | "className" | "children"> | – | Forwards the GlassLens component's props: inkColor, paperColor, tintColor, tint, blobs, size, smoothness, refraction, magnify, dispersion, rim, highlight, speed, interactive, paused |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};h1 for screen readers and search.17vw on phones, 12vw from md and 11rem from xl, in a stage at least 20rem tall (28rem from md).var(--foreground), var(--background) and var(--primary) follow the theme.inkColor.