How this page was made.

A boutique Brooklyn brownstone brokerage, designed like the neighborhood print magazine you'd find on a parlor coffee table — then given one trick no magazine can do: a street you can walk.

The concept

Stoop & Lintel sells townhouses to families hunting in Park Slope and Bed-Stuy, so the page sells the romance of the stoop before it shows a single price. The layout borrows from feature magazines — folios, spreads, generous captions, a ledger — and the listings live inside the signature element: a horizontally scrolling block of hand-drawn brownstones, each with its own address plaque.

Palette

Every color is a building material from the block. Text is oxblood, not black — the whole page reads like ink on limestone.

Type

Fraunces (with its SOFT axis dialed up) has the rounded, hand-set feel of an old neighborhood masthead; Alegreya Sans was drawn to accompany a book face, so the pairing reads print-first, web-second. Italic Fraunces does the hand-written asides — pull quotes, plaque notes, photo captions.

The signature: walking the block

The listings section pins to the viewport and converts vertical scroll into a walk down a drawn street. Three layers move at different speeds to fake depth:

• Background — faded rooftop silhouettes, moving at 0.32× the walk.
• Middle — six SVG facades with listing plaques, plus a real photograph framed between houses. This layer defines the scroll distance.
• Foreground — iron fences and autumn maples sweeping past at 1.3×.

Each facade is one reusable SVG <g> (Italianate, neo-Grec, bow-front, Romanesque) assembled from shared parts — arched windows, stoops, doors — and recolored per house with CSS custom properties, which pierce the <use> shadow DOM:

<svg class="house" viewBox="0 0 300 440"
     style="--stone:#B4784A; --door:#24402E">
  <use href="#fac-a"/>
</svg>

/* inside the symbol */
<rect x="18" y="64" width="264" height="376"
      fill="var(--stone)"/>

The parallax is one GSAP timeline with three tweens starting at the same moment, driven by a pinned, scrubbed ScrollTrigger:

const d = () => mid.scrollWidth - innerWidth;
const tl = gsap.timeline({
  defaults: { ease: 'none' },
  scrollTrigger: {
    trigger: '.walk', start: 'top top',
    end: () => '+=' + d() * 1.12,
    pin: true, scrub: 0.6, invalidateOnRefresh: true
  }
});
tl.to(mid, { x: () => -d()        }, 0)
  .to(bg,  { x: () => -d() * 0.32 }, 0)
  .to(fg,  { x: () => -d() * 1.3  }, 0);

Hovering any house warms its windows (a CSS transition on the shared .win glass fill) — the family's home, lit for you. If prefers-reduced-motion is set or GSAP fails to load, the section drops its pin and depth layers and becomes a plain horizontal scroller — calm, never broken.

Photography

The four photographs — the autumn block, the green door, the parlor at 4 p.m., the garden at dusk — were generated with Nano Banana Pro, prompted for autumn film-stock warmth. (The other New York real-estate site in this series shot its images with GPT Image 2 — compare the grain.) The drawn street deliberately shares its sandstone hues with the photos so illustration and photography sit in one world.

The three passes

1. Pass 1 — correctness & composition. Screenshots exposed a fragile scroll-reveal system that left whole sections invisible — cut it and let the load sequence and parallax carry the motion. Dropped the iron fence below the plaque line, resized the facades so full houses sit under the headline, and fixed the wrapping issue chip on mobile.
2. Pass 2 — elevate. Raised the maple canopies clear of the plaque titles, added drifting autumn leaves over the street, planted marigold window boxes on two facades, made the framed photo straighten on hover, and switched the pinned viewport to svh so mobile URL bars can't jump it.
3. Pass 3 — taste. The Chanel pass: removed the cobblestone dot texture that read as noise (one hairline curb instead), dropped a leaf shadow nobody would miss, and re-verified 390 px, keyboard focus and the reduced-motion fallback end to end.

Do this yourself

1. Pick a subject with a real physical world — a street, a harbor, a kitchen — and write down five materials from it. Those are your hex values; name them like materials, not colors.
2. Choose a display face the subject would own (here: a soft editorial serif) and a body face drawn to accompany books. Refuse the first pairing you'd use anywhere else.
3. Decide the one signature interaction that could only belong to this subject — ours is literally walking the block — and give it the whole boldness budget.
4. Build the signature from reusable parts: draw one window, one stoop, one door as SVG groups, then compose facades with <use> and recolor with CSS variables.
5. Drive it with one pinned, scrubbed timeline; layer speeds of roughly 0.3× / 1× / 1.3× sell the depth.
6. Write the copy like a brand journalist: specific addresses, specific hours ("the parlor at 4 p.m."), and structure that encodes truth — our numbered steps are a real timeline.
7. Screenshot, critique, fix — three full passes, desktop and 390 px. Read your own screenshots like a stranger would.
8. Before shipping, remove one accessory, and make the reduced-motion path a design, not an apology.

Walk back to the block