Halden House, a clinic and retreat in the hills
Every stay starts with a proper look at how you are doing, then builds a week around what would help most.
A full first day with our doctors, before anything else is planned. We measure what matters and explain every number in plain words.
Strength, mobility and long walks, set at the pace your body can hold. Nothing is a competition, and nothing hurts the next morning.
Quiet rooms, dark evenings and a sleep specialist who reads your nights with you. Most guests sleep an hour longer by the fourth day.
Short daily practice in breathing and attention, taught without mysticism. Small habits that still work on a busy Tuesday at home.
Warm pools, cold plunges and slow afternoons by the water. Recovery is part of the program, not a reward for finishing it.
A scroll feature section for a clinic and retreat where five large program cards pin one after another and slide up over each other like a physical deck. Each covered card scales down a little and darkens under a solid shade as the next one arrives. Every card pairs a large number, the program title, two sentences, three facts between hairlines and an underline link with a large photograph that settles from a slow zoom as the card comes into view. Cards alternate between sand, sage and deep forest surfaces, and the eyebrow, heading and intro rise in above the stack. Reduced motion shows the cards as a plain list.
A header over a deck of large program cards that pin one after another and slide up over each other as the page scrolls; each covered card shrinks slightly and darkens under a shade, and each photograph settles from a 1.18 zoom as its card arrives.
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/feature320?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature320?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/feature320.tsx plus the button2 underline link it uses.
The installed file exports feature320Demo alongside the block: the exact props behind the preview above. Spread it to get a working card stack in one line.
import { Feature320, feature320Demo } from "@/components/beste/block/feature320";
export default function Page() {
return <Feature320 {...feature320Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Feature320 } from "@/components/beste/block/feature320";
export default function Page() {
return (
<Feature320
eyebrow="Halden House, a clinic and retreat in the hills"
heading="Five programs, one unhurried week."
description="Every stay starts with a proper look at how you are doing."
programs={[
{
title: "The assessment",
text: "A full first day with our doctors, before anything else is planned.",
facts: ["Bloods, heart and sleep data", "Two hours with a physician", "A written plan within a week"],
image: {
src: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1600&q=80",
alt: "A stethoscope resting beside a laptop on a wooden desk",
},
link: { label: "About the assessment", href: "/programs/assessment" },
tone: "sand",
},
{
title: "Deep rest",
text: "Quiet rooms, dark evenings and a sleep specialist who reads your nights with you.",
image: {
src: "https://images.unsplash.com/photo-1509316975850-ff9c5deb0cd9?w=1600&q=80",
alt: "A pine forest disappearing into thick morning fog",
},
link: { label: "About deep rest", href: "/programs/rest" },
tone: "forest",
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Muted line above the heading |
heading | string | – | Section heading, rendered as an h2 |
description | string | – | Intro set to the right of the heading from md |
programs | Program[] | [] | One stacking card per program, numbered 01, 02 and on in order |
className | string | – | Extra classes for the outer <section> |
type Tone = "sand" | "sage" | "forest";
type Program = {
title: string;
text: string;
/** Three short facts listed between hairlines */
facts?: string[];
image: { src: string; alt: string };
link?: ActionButton;
/** Solid surface of the card */
tone?: Tone;
};
type ActionButton = {
label: string;
href: string;
};zIndex and offset 22px further down per index, so the edges of earlier cards peek out above the one on top.index / count) to the end: it scales down by 0.025 per card still to come and a shade fades up to 0.1 per card, capped at 0.5. The last card never shrinks or darkens.1.18 to 1 as its card travels from the bottom of the viewport to the top; the first card's image loads with priority.tone picks a theme surface (sand is bg-muted, sage is bg-secondary, forest is an inverted bg-foreground card with text-background) and defaults to sand; the facts list is hidden below sm.md the card is a 12-column grid with copy in 5 columns and the photo in 7.title, so keep titles unique. The header rises in once when 60% of it is in view.24px gap: no pinning, scaling, shade or zoom.