How Meridian
was built.

Concept

The brief: quiet power. The digital equivalent of a mahogany room with a single Rothko — precision, discretion, heritage-meets-modern. A fictional Geneva private bank, founded 1962, managing $14.2B for 240 families.

Every decision flows from restraint. No exclamation marks in the copy. No bright accents beyond a single champagne gold. Motion that behaves like the institution: slow, eased, never eager. The one indulgence is the hero — a living market line that draws itself and never stops evolving, because a chart that quietly keeps rising is the entire promise of the firm.

Type: Cormorant Garamond (300/400, roman & italic) for display — an old-style serif with genuinely aristocratic proportions — paired with Inter for UI and body. Every number on the site is set with font-variant-numeric: tabular-nums, the way a bank statement would be.

Assets

Three images, generated with GPT Image 2 (quality: high) and used without retouching. The actual prompts:

The corner office

gpt-image-2 · 1536×1024 · assets/office-dusk.webp

“A cinematic editorial photograph taken from inside a high-floor private banking office at dusk, looking out through floor-to-ceiling windows at a vast city skyline dissolving into blue evening haze. In the near foreground, the dark silhouette of a walnut desk edge and the back of an empty leather chair, softly out of focus. The city below glows with thousands of tiny warm champagne-gold window lights against deep navy blue twilight, faint fog between distant towers. Subtle reflections of the dim office interior ghost across the glass. Shot on 35mm film, shallow depth of field, low-key exposure, palette restricted to deep navy #0A1628, midnight blue shadows, and champagne gold #D4B886 highlights. Quiet, powerful, discreet old-money mood. No people, no text, no watermark.”

The instrument

gpt-image-2 · 1536×1024 · assets/pen-macro.webp

“An extreme macro editorial still-life photograph of a champagne-gold fountain pen nib resting on heavy midnight-navy cotton paper, photographed at a low raking angle. The engraved metal of the nib shows fine guilloché line engraving catching a single soft directional light from the left, glinting warm gold against near-black shadow. The navy paper shows subtle fiber texture and a faint embossed horizontal line. Extremely shallow depth of field, the nib tip razor sharp, everything else melting into dark bokeh. Palette: deep navy #0A1628, near-black midnight, champagne gold #D4B886. Restrained, luxurious, quiet-power mood, like a private bank annual report cover. 35mm film grain, no text, no watermark.”

The stone

gpt-image-2 · 1024×1024 · assets/marble.webp

“A full-frame editorial photograph of polished dark navy-black marble stone, shot straight on as a seamless texture. Fine veins of warm champagne gold and pale porcelain thread diagonally through the deep midnight surface like slow rivers, with subtle cloudy mineral depth beneath the polish. Soft even museum lighting with one gentle highlight gradient across the upper third. Ultra-fine detail, luxurious and restrained, palette limited to deep navy #0A1628, near-black, champagne gold #D4B886 and faint porcelain #F4F1EA veining. No objects, no text, no watermark, pure material surface.”

Techniques

• The living chart. A canvas hero driven by three octaves of deterministic value noise with an upward drift — so the “market line” is generative, seamless, and never repeats. On load the grid fades in and the line draws itself over ~3 seconds (eased); after that the viewport pans through noise-space forever at 0.055 units/second. The ticker in the corner (“MPI 14.20 ▲”) reads its numbers from the same noise function, so the readout and the line always agree.
• The dot map. No map image, no map library. Real country polygons (GeoJSON) were rasterised offline with a point-in-polygon test into an 88×31 grid, run-length-encoded into ~1.3 KB of JS, and drawn on canvas. A slow luminance wave travels across the 866 dots; the five office cities are HTML markers with CSS pulse rings, positioned by the same equirectangular projection.
• Counters with intent. IntersectionObserver at 60% visibility, then a 2.3s easeOutExpo count rendered in tabular numerals — the founding year eases from 1900 to 1962 rather than from zero.
• Glassmorphism, quietly. Cards use backdrop-filter: blur(18px) over the marble texture at 3.5% white, with a hairline champagne border and a skewed sheen that sweeps across on hover.
• Magnetic buttons. Buttons translate up to 7px toward the cursor (labels 3px, for parallax) with a long expo ease-out; disabled for coarse pointers and reduced motion.
• Service list preview. On desktop, hovering a service row summons a floating image card that lerps after the cursor at 14% per frame.

// the entire market: three octaves of value noise + drift
function series(x) {
  var v = 0.52 * vnoise(x * 0.55, 7)
        + 0.30 * vnoise(x * 1.9, 41)
        + 0.18 * vnoise(x * 6.5, 97);
  return v * 0.72 + 0.14 + 0.055 * Math.sin(x * 0.21);
}
// every frame, the visible window slides through noise-space
var x0 = t * SPEED;  // never resets — the line evolves forever

Everything is vanilla — no frameworks, no animation libraries, no build step. Reduced motion is honoured throughout: the chart renders one static frame, counters print final values, parallax and grain stop.

Process

Three full iteration passes over the finished site, each with desktop + mobile screenshots and console checks.

Ship it

The site is fully static — no build step. To deploy:

npx wrangler pages deploy . --project-name meridian