Guide — How Hedgerow & Shore was designed and built

The concept

Sell the exhale, with quiet money manners

Hedgerow & Shore is an estate brokerage for the Five Towns and Atlantic Beach on Long Island's South Shore, speaking to families moving out of Brooklyn and Queens for lawns, shul-walkable streets and the ocean. The page's one job is to sell the exhale — space, light, water — so the whole site is built around light itself: one dial sweeps the day from school-run morning to golden-hour dusk, and everything on the page re-lights with it.

The structure encodes real geography: the five town plates are ordered the way the LIRR's Far Rockaway branch actually calls them — Hewlett, Woodmere, Cedarhurst, Lawrence — with Atlantic Beach set apart, off the line and over the bridge, exactly as it is in life.

Palette

Hydrangea, cedar, privet, trim, gold

Every color comes from the streetscape: hydrangea blooms against white clapboard, cedar shingle, clipped privet, and the late-day gold that is the product being sold.

Hydrangea#5F7FB4 — accent, eyebrows

Slate ink#2C3850 — all text

Cedar shingle#8B7C68 — roofs, taupe notes

Clipped lawn#5D7A52 — scene greens

Trim white#F7F8F4 — the paper

Late-day gold#C08A2E — the dial, dusk

Type: an estate sign and its surveyor

Baskervville (a revival of Baskerville, the great English transitional) carries headlines and body — it has the engraved, estate-gate manner the subject deserves, with italics that soften the money talk. Archivo, set wide at 110–124% width, does the surveyor's work: labels, walking-time tables, prices, tabular numerals. Serif says home; wide sans says measured.

Techniques

How the daylight dial works

One value t (6:45 AM → 7:45 PM) is interpolated across five hand-tuned keyframes — dawn, mid-morning, noon, late afternoon, golden dusk. Each keyframe holds ~30 channels: sky stops, water, sun position, lawn and hedge greens, window glow, shadow skew/length/opacity, a photo grade. The result is written to CSS custom properties on <html>, and everything downstream just reads variables:

function apply(t) {
  const [a, b, u] = segment(t);            // neighboring keyframes
  css.set('--sky-top', mixHex(a.skyTop, b.skyTop, u));
  css.set('--sun-x',  mixNum(a.sunX, b.sunX, u) + 'px');
  css.set('--sh-skew', mixNum(a.shSkew, b.shSkew, u) + 'deg');
  // ...30 channels total
}

The hero is a layered inline SVG — bay, dune grass, privet hedgerow, oak, and a center-hall colonial drawn from rects and paths — whose fills are all var(--…). Long shadows are the fun part: each shadow is the object's silhouette drawn upright, then flipped onto the lawn and leaned by the sun with two transforms driven by the same dial:

.cast {
  transform-box: fill-box;
  transform-origin: 50% 100%;   /* hinge at the ground line */
  transform: skewX(var(--sh-skew))
             scaleY(calc(-1 * var(--sh-len)));
}

Listing photographs re-light with the same variables: a filter chain on the image (brightness / saturate / sepia) plus two overlay layers — the grade color in soft-light, a dusk blue in multiply — so a golden-hour photo believably cools into morning and sinks into evening.

.relight img { filter: brightness(var(--ph-b))
               saturate(var(--ph-s)) sepia(var(--ph-sep)); }
.relight::after { background: var(--grade);
                  mix-blend-mode: soft-light; }

The photographs themselves were generated with GPT Image 2 from written photographic briefs (lens, light, film stock — "35mm prime at f/5.6, Kodak Portra 400, golden hour, no people"). This site is one half of a round-two face-off: the Queens site in this series uses the competing image model. Compare the privet.

Process

Three iteration passes

Correctness and composition. The hero copy was accidentally self-centering, the mobile header overflowed the viewport, the dial pill sat on top of the colonial, and the oak's canopy floated free of its trunk. Shifted the whole property right, docked the dial left, stacked the mobile header, and gave the scroll reveals a timed fallback so no content can ever stay hidden.
Elevation. Settled the page-load sweep at 4:45 PM (the light being sold), tinted the clouds through the same grade channel as everything else, deepened dawn and dusk shadows, verified dawn/dusk/pinned-hour states with a #t= hash, softened the dusk multiply on photographs, and gave the plates a hover where the engraved inner frame tightens to gold.
Taste. Chanel rule: removed one cloud and the center dune tuft. Recomposed the 390 px hero so the house reads above the dial, hid the dial's tick labels on small screens, and confirmed the reduced-motion path (no sweep, no drift — the dial still re-lights instantly).

Do this yourself

A recipe for a site of this caliber

Give Claude a real subject and audience, not "a landing page" — here: an estate brokerage selling the move from Brooklyn to the Five Towns.
Demand one signature mechanic that embodies the subject (light, in real estate) and ask for everything else to stay disciplined around it.
Fix the palette from the subject's actual world — name the objects (hydrangea, privet, cedar shingle) and let Claude derive the hexes.
Choose type by role: one characterful display face with a reason (Baskervville = estate signage), one working face for data (wide Archivo).
Make structure carry facts — order sections by something true (the LIRR's actual stop order), and put real numbers in tables.
Have Claude write copy like a brand copywriter: specific nouns, quiet money manners, no filler. One good sentence per card.
Generate photography from detailed photographic briefs (lens, film, hour), then unify it with a code-driven grade so it can't look stocky.
Iterate in passes with screenshots: correctness, elevation, taste. Ask Claude to critique its own screenshots and remove one accessory at the end.