Residences on the water
Twelve homes at the edge of a still lake, each one framing the water the way a painter would. Private viewings open this spring.
An architectural hero with a light oversized headline beside an intro, an Arrow Pill and an underline link, over a wide panel built on the water-reflection background component: a night sky over snowy peaks mirrored in a still lake, with a rolling swell drawn in perspective, glints on the crests, drops that land on their own and ripple rings that follow the cursor. Every water setting passes through the water prop. Pauses offscreen, holds a calm frame for reduced motion and falls back to the plain photo without WebGL.
A light oversized headline beside an intro and two buttons, above a wide WebGL panel from the water-reflection component that mirrors your photo in a still lake with a rolling swell, glints on the crests, drops that land on their own and ripple rings that follow the cursor.
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/hero197?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/hero197?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hero197.tsx plus the water-reflection background and the button23 and button2 buttons it uses.
The installed file exports hero197Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.
import { Hero197, hero197Demo } from "@/components/beste/block/hero197";
export default function Page() {
return <Hero197 {...hero197Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hero197 } from "@/components/beste/block/hero197";
export default function Page() {
return (
<Hero197
eyebrow="Residences on the water"
heading="Seen softly, then all at once."
description="Twelve homes at the edge of a still lake. Private viewings open this spring."
buttons={[
{ label: "Book a viewing", href: "/viewings" },
{ label: "Floor plans", href: "/plans" },
]}
image={{
src: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=2400&q=80",
alt: "Snowy peaks under the Milky Way above a dark line of pines",
}}
water={{ horizon: 0.42, crop: 0.12, waterColor: "#070b14", rain: 0.4, ripples: 0.7 }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the heading |
heading | string | – | Headline, rendered as the page h1 |
description | string | – | Intro in the right column |
buttons | ActionButton[] | [] | The first renders as a dark Button23 arrow pill, the rest as Button2 underline links |
image | { src: string; alt: string } | – | Photo mirrored in the water; the panel is not rendered without it |
water | Omit<WaterReflectionProps, "src" | "alt" | "className" | "children"> | – | Forwards the WaterReflection component's props: horizon, crop, waterColor, reflectivity, waves, speed, glints, rain, interactive, ripples, paused |
className | string | – | Extra classes for the outer <section> |
type ActionButton = {
label: string;
href: string;
};aspect-[4/5] on phones, 16/10 from sm and 16/8 from md, with rounded corners.IntersectionObserver reports the panel offscreen or the tab is hidden, and the pixel ratio is capped at 1.5 and lowered further when frames run slow.