The Guide

How a couture maison would sell a house — and how the page was rebuilt when the first cut leaned too hard on its film. Everything here is plain HTML, CSS and JavaScript: no frameworks, no build step.

I · Concept & the rework

Copperbeech is a private estate house for New York’s Five Towns, met after dark. The page is structured as one evening — dusk at seven, the hour between at half past, the portfolio at eight, candlelight at nine, the season at ten, the correspondence at eleven, the last candle at midnight — so every label encodes real information.

The client’s note on the first version: “top heavy — all the show is the video. It’s nice but overdone.” They were right. Version one spent its whole budget on a 100vh cinematic hero and coasted through three static plates. The rework treats the film as one instrument, not the concert: the hero drops to 82vh under a much deeper grade, and the investment is redistributed so that every section is its own quiet set piece — a line of prose that sets itself word by word, grounds plans that draw themselves in ink, a room that warms as you reach it, a year that turns as you scroll. At any position on the page, something is quietly alive; nothing shouts.

The hero loop is Higgsfield Seedance 2.0 (video: silent, six seconds), graded into the palette with CSS. The four stills — facade, dining room, garden bath, and the candlelit table — were generated with gpt-image-2 from photographic prompts written like a director’s shot list.

II · Palette

Charcoal, never pure black — evening dress, not a void. The page alternates dark and ivory like courses at dinner, which is what makes the rework read balanced where version one read top-heavy. Claret exists for one reason: it is the true color of a copper beech in July, and the season study earns it.

III · Typography

Bodoni Moda is the couture Didone — a variable font whose optical-size axis (opsz 6–96) cuts razor hairlines at masthead scale and stays readable at text sizes. The masthead kerns itself in over the film; the hour-between line sets at opsz 72.

Cinzel — drawn from Roman inscriptional capitals — is the engraving: every small-caps label, the estate data, the rituals, the survey plans, all tracked at 0.2–0.42em. Two families, one voice: the Didone speaks, the capitals are carved.

IV · Techniques, section by section

The hour between. The line is split into word spans once; one scroll handler maps the block’s viewport position to a count of “set” words, so the sentence assembles patiently and reverses if you do. A copper rule draws down alongside on the same progress value:

const p = clamp01((vh*.88 - r.top) / (vh*.58 + r.height*.4));
words.forEach((w,i) => w.classList.toggle("on", i < p*words.length));
stage.style.setProperty("--hp", p); // rule: scaleY(var(--hp))

The grounds. Each estate unfolds (an accordion animated with grid-template-rows: 0fr → 1fr) into a hand-authored SVG site plan — hedge, allée, walled garden, jetty. On first open, every solid line measures itself and inks in, staggered; the dot-leader specs follow:

lines.forEach((el,i) => {
  el.style.setProperty("--l", el.getTotalLength()+2);
  el.style.setProperty("--d", i*0.07+"s");   // stagger
});
/* CSS: stroke-dasharray:var(--l); stroke-dashoffset:var(--l) → 0 */

Kept by candlelight. The candelabrum is drawn: gradient wax, radial-gradient flames breathing on staggered flick keyframes. The photograph beneath warms on a scroll-driven custom property — filter: saturate(calc(.42 + .66*var(--warm))) — while a cool veil fades out, so the room goes from shut-up to hosted as you arrive. The four rituals light one by one through a staggered IntersectionObserver.

The season. A sticky viewport inside a 340vh section turns the year: scroll progress interpolates the leaf fill through spring copper → claret → autumn, moves a dot along the April–November track, and crossfades the captions. Past 80%, six designated leaves fall — once, gently, and never again. Each leaf nests three groups (translate › animation › rotate/scale) so the fall happens in unrotated space and every leaf keeps its pose.

The correspondence. The silk envelope stays as the finale, smaller and quieter than version one: flap on a 3D hinge, card rising on its own curve, each field underlining in copper as it takes focus, and on submit a copper seal presses into the card — scale(1.7) → .94 → 1 with an embossed inset shadow.

V · The three rework passes

VI · Do this yourself

1. Give Claude a register, not a subject — not “luxury real estate site” but “the Five Towns in evening dress; every line written like a vow; ‘nestled’ is fireable.”
2. Make it choose one structural metaphor that orders the page (here: a single evening, seven to midnight) and demand the labels carry it.
3. When a draft leans on one hero moment, say so in one sentence — “top heavy, all the show is the video” — and ask for the budget to be spread across every scroll position.
4. Ask each section to be an experience of its own: name the material it should be made of (a surveyor’s sheet, a candlelit table, a botanical plate) rather than the effect you want.
5. Keep one flourish per idea, used once: our leaves fall a single time, in the one section that is about letting go.
6. Generate media with director’s prompts — lens, film stock, hour of day — and grade everything into one palette with CSS so footage, stills and interface read as a single film.
7. Iterate in passes with screenshots, judging the mid-scroll states hardest; the fold flatters, the middle tells the truth.
8. Treat 390px and reduced motion as first-class audiences, and end every pass by removing one accessory.

← Return to Copperbeech