How this site was made

One of twenty-five sites built to show what Claude can do with hand-written HTML, CSS, and SVG — no framework, no build step.

Concept & art direction

The Lawrence Registry is a fictional invitation-tier estate brokerage for the Five Towns of Long Island — with Lawrence as its unmistakable gilded focal point. The page’s one job is to radiate old-money quiet and convert to a discreet private-showing request, so everything speaks in the register of an estate section, not a listings portal: vast ivory margins, engraved plates instead of cards, a form written as a letter. The ledger opens with Lawrence’s two flagship estates, then gives each of the five villages — Lawrence, Cedarhurst, Woodmere, Hewlett, Inwood — exactly one entry, traced across a hand-drawn estate map.

Its sister site, Hedgerow & Shore, covers the broader Five Towns with a warm daylight-dial hero (photos by GPT Image 2). This site is deliberately its opposite number — more hushed, more expensive. Photographs here were pre-generated with Nano Banana Pro: the gated Georgian at golden hour, the rotunda foyer, the pool terrace at dusk, the bay dock at sunrise.

Palette

Mostly light pages with enormous margins — money whispers. Hunter green is reserved for gates, headings, and one full-bleed band; brass appears only as hairlines, finials, routes, and dot leaders. Bay silver belongs to the water: the map’s shimmering waves and one glimmering line in the footer.

Typography

Marcellus SC — a true small-caps face with a lapidary, engraved-in-stone feel — carries every estate name, heading, and label, letterspaced like jewelry (0.1–0.34em). Marcellus proper serves the roman numerals. Body copy is Sorts Mill Goudy, a revival of Goudy Oldstyle with old-style figures — the face of a well-set private prospectus. Neither would suit any other site in this series, which is the point.

The signature: an arrival, not a hero

The hero is a pair of hand-drawn SVG wrought-iron gates in front of a Nano Banana Pro photograph. On load the gates part to about 44°; your first scroll swings them fully open while the photograph performs a slow dolly-in (scale 1.16 → 1.0). The ironwork — spear finials riding the overthrow arch, C-scrolls, a ringed mid-band, dog bars, a rosette medallion — is one SVG <symbol> reused for both leaves, the right leaf simply mirrored with scaleX(-1).

The swing is a single CSS custom property driven from JavaScript; all the 3D lives in CSS:

.gates  { perspective: 1400px; display: flex; }
.leaf-l { transform-origin: 0% 50%;
          transform: rotateY(calc(var(--gp) * -76deg)); }
.leaf-r { transform-origin: 100% 50%;
          transform: rotateY(calc(var(--gp) *  76deg)); }
.hero-photo img {
  transform: scale(calc(1.16 - .16 * var(--gp))); }

Two counter-drifting soft-light “dapple” layers play sunlight across the ironwork the whole time the gates are on screen. With prefers-reduced-motion, the gates simply stand open and the dolly is skipped — an arrived page, not a broken one.

The Five Villages map, traced on scroll

Chapter II is a hand-drawn SVG estate map that stays pinned beside the ledger. As you read down the five village entries, brass carriage routes trace from Lawrence to each village in turn — every route is drawn with pathLength="1" so a single dash offset animates it regardless of its true length:

<path class="route" pathLength="1" d="M338,436 C356,392 …"/>

.route        { stroke-dasharray: 1; stroke-dashoffset: 1;
                transition: stroke-dashoffset 1.9s; }
.route.traced { stroke-dashoffset: 0; }

An IntersectionObserver watches the entries and lights each village’s node, pulse ring, and incorporation date as its entry scrolls into view; Lawrence is stamped with a gilded wax seal that “pools” on — scale overshoot, a settle, a blur that clears, like cooling wax. Hovering any entry warms its village on the map. The bay beneath is three dashed silver paths whose stroke-dashoffset drifts forever at different speeds — water that never sits still.

Nothing static: the animation ledger

Every section keeps something quietly alive, all in the same register:

• Arrival — gates part, photograph dollies, two dapple layers counter-drift.
• Every ivory section — a handful of brass light motes drift upward on 14–28s loops, each with random size, drift, and delay.
• Registry plates — each plate engraves itself in: the inner brass border draws left-to-right, the estate name settles its letterspacing like a burin lifting, dot leaders ink in line by line, and the wax seal pools on with an overshoot-and-settle keyframe. On hover the seal presses into the page.
• The bay entry — a soft-light shimmer strays across the water in the dock photograph.
• The Manner — a brass glimmer travels the section’s top rule; each numeral underlines itself as it arrives.
• Correspondence — the dateline writes itself in, blanks draw a hunter underline on focus, and sealing the letter presses the wax with a real press animation.
• Footer — the bay-silver line carries a slow glimmer, pointing at the water.

All of it is transforms, opacity, and clip-paths — nothing that fights the compositor — and all of it stands respectfully still under prefers-reduced-motion.

The wax seals

Each registry plate carries an SVG wax seal — two hand-wobbled blob paths, an engraved ring, a Marcellus monogram. It arrives by pooling and answers hover by pressing: it scales down, rotates 4°, and its drop-shadow collapses from 8px to 2px of offset, which reads as the seal being pushed into the page. The same seal is the letter’s submit button, labelled Press to seal.

@keyframes wax-pool {
  0%   { transform: scale(.25); opacity: 0; filter: blur(5px); }
  62%  { transform: scale(1.13) rotate(3deg); filter: blur(1px); }
  80%  { transform: scale(.95)  rotate(-2deg); }
  100% { transform: scale(1); }
}

The three iteration passes

Pass 1 — restructure & composition

Rebuilt the ledger as two chapters — Lawrence’s flagship estates, then one entry from each of the five villages — added the sticky traced map, rewrote every line of copy into the Five Towns frame, rebalanced headline wrapping, and enlarged the map lettering so it reads at render scale.

Pass 2 — elevation

Made every section breathe: drifting light motes, plates that engrave themselves in, leaders that ink line by line, wax that pools and presses, the glimmering Manner rule, the writing dateline, the shimmering bay — plus the cross-element hover that warms a village on the map when you rest on its entry.

Pass 3 — taste

Chanel rule: thinned the mote count and opacity, slowed anything that drew the eye instead of rewarding it, checked the ledger seriously at 390px, and verified the reduced-motion page arrives fully open, fully legible, fully still.

Do this yourself

1. Give Claude a register, not just a subject: “estate-section, invitation-only, money whispers” produces different decisions than “luxury real estate site.”
2. Assign one signature element and make everything else disciplined — here, the parting gates; the rest is margins and hairlines.
3. Let structure carry information: two chapters, seven numbered entries, one village each — the reader learns the geography by scrolling it.
4. Pick typefaces that could only belong to this subject (a true small-caps face for engraved names) and use letterspacing as a design material.
5. Demand that every section keep something subtly alive — then insist it all share one vocabulary (brass, ink, wax, water) so motion reads as craft, not confetti.
6. Ask for signature motion to be driven by single CSS variables and pathLength="1" tricks; it keeps load, scroll, and reduced-motion honest.
7. Write the copy in character. A form that begins “To the Registry,” converts the same data as a form with labels — and sells the fiction.
8. Demand three screenshot-critique-fix passes. The first makes it correct; the second makes it rich; the third makes it quiet.

Return through the gates