Maren & Olde, botanical perfumers
Scents distilled from a single field of poppies and wild herbs, bottled in the same season they were picked. Turn the glass and look closer.
A botanical perfume hero built on the kaleidoscope component: a photo of poppies folded live into a crisp mirrored mandala inside a round glass tube, turning slowly while the view drifts and zooms over the petals so the pattern keeps blooming into new forms. The cursor turns the tube and zooms the view. A semibold serif headline, a short intro, an Arrow Pill and an underline link sit beside it. Every tube setting passes through the scope prop; it pauses offscreen, holds a still pattern for reduced motion and falls back to the plain photo without WebGL.
A serif headline, an intro and two buttons beside the kaleidoscope component, which folds your photo live in WebGL into a mirrored mandala inside a round glass tube that turns slowly while the view drifts and zooms, with the cursor turning the tube and zooming the view.
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/hero229?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero229?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero229.tsx plus the kaleidoscope component and the button23 and button2 buttons it uses.
The installed file exports hero229Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero229, hero229Demo } from "@/components/beste/block/hero229";
export default function Page() {
return <Hero229 {...hero229Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero229 } from "@/components/beste/block/hero229";
export default function Page() {
return (
<Hero229
eyebrow="Botanical perfumers"
heading="Every bloom, turned into a pattern."
description="Scents distilled from a single field of poppies and wild herbs."
buttons={[
{ label: "Discover the scents", href: "/scents" },
{ label: "Visit the atelier", href: "/atelier" },
]}
image={{
src: "https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=2400&q=80",
alt: "Orange poppies against a clear blue sky",
}}
scope={{ segments: 8, zoom: 0.5, drift: 0.5, rim: true, round: true }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the heading |
heading | string | – | Serif headline, rendered as the page h1 |
description | string | – | Intro under the heading |
buttons | ActionButton[] | [] | The first renders as a dark Button23 arrow pill, the rest as Button2 underline links |
image | { src: string; alt: string } | – | Photo folded into the pattern; the kaleidoscope is not rendered without it |
scope | Omit<KaleidoscopeProps, "src" | "alt" | "className" | "children"> | – | Forwards the Kaleidoscope component's props: segments, speed, zoom, drift, rim, vignette, interactive, paused, round |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};md, and never taller than the viewport minus the header and 8rem.alt text is kept in a visually hidden span for screen readers.max(640px, 100svh - 78px) tall with its content vertically centered.