Design notes for Gramercy & Vane — a fictional ultra-luxury Manhattan brokerage built as one of twenty-five sites showcasing Claude Fable 5. Everything here was hand-written: no build step, no framework, one HTML file, one stylesheet, one module.
The page has a single job: make three flagship tower residences feel like the only three that matter this season. So the site is structured as an approach by air — a wireframe Manhattan you fly through, where each tower lights up in champagne gold as its listing arrives. Full-bleed photography carries the interiors; engraved spec plates carry the facts.
Bodoni Moda
A true high-contrast Didone with optical sizing — the typographic equivalent of a limestone lobby. Used for mastheads, building names, and prices; the italic ampersand is the brand's one flourish.
Schibsted 40.7649° N
Schibsted Grotesk — a cool, precise grotesk with tabular figures, set small and letter-spaced for coordinates, spec labels, and the bearing HUD. Data stays data; the Didone never has to do arithmetic.
The skyline is a single Three.js scene on a fixed canvas behind the whole page. About 600 buildings are generated from a seeded PRNG — same city every visit — placed on an island whose width tapers like Manhattan's, with a rectangular void for Central Park and taller height ranges for Midtown and Downtown. All 12 edges of every box are pushed into one LineSegments buffer:
const islandHalfWidth = z => 26 * Math.max(0, 1 - Math.pow(Math.abs(z) / 98, 2.3));
const inPark = (x, z) => z > -52 && z < -16 && x > -9 && x < 9;
// one draw call for ~7,000 edges
fabricGeo.setAttribute('position', new THREE.Float32BufferAttribute(fabric, 3));The camera plays a score of six keyframes — approach, three towers, the full island, dusk — anchored to the scroll positions of the page sections and eased with a quintic smoother, then glided with a lerp so the flight feels piloted rather than scrubbed. The glints are a custom point shader that twinkles on a per-point phase:
float tw = pow(max(sin(uTime * 0.9 + aPhase * 7.0), 0.0), 10.0);
gl_PointSize = (1.4 + 3.2 * tw) * (140.0 / -mv.z);Each flagship tower is its own line segment set plus 90 amber window points. An IntersectionObserver on the interstitial sections flips a target; the render loop lerps line color from glass blue to gold and fades the windows in — the tower literally comes home as you reach its listing. With prefers-reduced-motion, the camera snaps between keyframes, the idle sway stops, and the twinkle freezes at a fixed frame.
This site is the GPT Image 2 half of a model face-off — its four photographs were generated with OpenAI's gpt-image-2 (hero at high quality, the rest at medium), while sibling sites in the series used Nano Banana Pro. The prompts were written like an editorial photo brief, not a description: camera format, focal length, hour, and grade — "Phase One medium format, 24mm tilt-shift, level verticals, long exposure so window lights sparkle, deep navy shadows and champagne highlights." Naming the palette inside the prompt is what keeps the photography and the CSS in the same world.