Harbor Light Studio, portrait photography
Unhurried portrait sessions in natural light for artists, founders and families. Two hours, no stiff poses, and prints you will want on the wall.
A portrait photography hero built on the photo-ring component: twelve portraits stand on a slowly turning 3D ring seen slightly from above, curved panels catching the light and a soft gloss as they come to the front, fading into the page as they pass behind, with a quiet reflection on the floor. The ring fills the lower half and runs past both edges; drag or scroll gives it momentum and the cursor leans the view. A centered eyebrow, a large semibold headline, an intro, an Arrow Pill and an underline link sit above it. Every ring setting passes through the ring prop. Reduced motion holds a still ring.
A centered portrait hero with an eyebrow, a large headline, an intro and an Arrow Pill above a PhotoRing: portraits on a slowly turning 3D ring seen slightly from above, glossing as they come to the front and fading into the page behind, with a floor reflection, drag and scroll momentum and a cursor lean.
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/hero254?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero254?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero254.tsx plus the photo-ring component and the button23 and button2 buttons it uses.
The installed file exports hero254Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero254, hero254Demo } from "@/components/beste/block/hero254";
export default function Page() {
return <Hero254 {...hero254Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero254 } from "@/components/beste/block/hero254";
export default function Page() {
return (
<Hero254
eyebrow="Harbor Light Studio, portrait photography"
heading="People, as they really are."
description="Unhurried portrait sessions in natural light for artists, founders and families."
buttons={[
{ label: "Book a session", href: "https://beste.co" },
{ label: "See the portfolio", href: "/portfolio" },
]}
ring={{
images: [
{
src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&h=800&fit=crop&q=80",
alt: "Portrait of a woman smiling in soft light",
},
{
src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=600&h=800&fit=crop&q=80",
alt: "Portrait of a man with a beard",
},
{
src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=600&h=800&fit=crop&q=80",
alt: "Portrait of a woman with freckles",
},
],
tilt: 9,
reflection: 0.45,
fogColor: "var(--background)",
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the headline |
heading | string | – | Headline, rendered as the page h1 |
description | string | – | Intro paragraph under the headline |
buttons | ActionButton[] | [] | The first renders as a dark Arrow Pill (Button23), the rest as underline links (Button2) |
ring | Omit<PhotoRingProps, "className"> | – | Forwards PhotoRing props: images (required), gap, panelWidth, aspect, tilt, speed, reflection, fog, fogColor, shading, interactive, paused |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};
type PhotoRingImage = {
src: string;
alt: string;
};ring.images has at least 1 image. It fills the remaining height (at least 440px, 600px from md) and pulls up under the copy by -mt-16 (md:-mt-36), with the copy kept on top through z-10.<img> panels in CSS 3D. Only the front copy of each image carries its alt; mirrored and repeated copies use empty alt.interactive is on. It pauses offscreen.fogColor: "var(--background)" so panels fade into the page in both themes; the section itself uses bg-background and text-foreground.