London

Installation

Usage

Copyimport { London } from "@/components/asciicn/london";
 
export function Hero() {
  return (
    <section className="relative isolate min-h-[480px]">
      <London intensity={0.85} className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}

The scene is a 3D model of Westminster, raymarched from a camera on the South Bank just south of Westminster Bridge and then painted in halftone dots. Every dot takes its colour from the scene's palette of about 45 hand-picked colours, and its size from how bright that point is, so the sky reads as fine specks and the floodlit stone as full dots.

The Elizabeth Tower stands right of centre, built to its real proportions: a panelled shaft 12 m square, the clock stage with a dial on each face, the open belfry lit from inside, and the iron spire with its corner pinnacles and the Ayrton light, 96 m to the finial. The camera sees it a little off square, so the floodlit east face carries the big glowing dial and the north face beside it stands in shade with a sliver of its own dial. The Palace of Westminster runs left from the tower's foot and recedes along the river: buttresses every few metres, each ending in a pinnacle, rows of windows with a few lit, pavilions with corner turrets, and steep slate roofs, with the Central Tower's spire in the middle and the Victoria Tower at the far end, paler and hazier with distance. Westminster Bridge crosses the river beyond the tower on low arches, its lamp standards receding towards the far bank.

The light is modelled too. Floodlights from the south-east light the river front and the tower's east faces, and the buttresses and piers throw their own shade. Behind it all the sky runs from pale gold low in the west through rose to slate blue overhead, with a few stars. Haze thickens with distance, so the far end of the palace stands back.

The Thames reflects the scene by tracing the mirrored ray from every point on the water. Slow ripples tip that ray, so the gold of the palace and the tower breaks into long dashes, darker and cooler than the real thing, with a thin streak under each lamp.

Motion is slow: the ripples move, haze and mist drift, the lamps and the dials breathe softly, a few windows turn on or off every minute or so, the clock hands keep time and one river cruiser passes the palace and goes under the bridge at walking pace. The pointer does nothing.

The tower stands right of the middle in every box. On a wide screen the headline sits over the sky with the buttons along the gold band above the roofline. On a phone the view widens so the whole tower stays in frame beside the nearest part of the palace.

It draws in dots by default on square 7px cells, about 200 across a 1440px screen, with bayer4 dithering between dot sizes. square={false} returns to the usual text cells, twice as tall as wide; braille and quadrants use text cells unless you ask for square ones. Other ramp charsets such as standard or dense read the same tones as typed glyphs. In truecolor, the default, the scene paints its own night blue paper in both themes. mono with a phosphor and duotone with a ramp read the same scene by tone alone.

intensity dims the colours in step and shrinks the dots more gently, so the shapes keep their place behind text.

Examples

Hero

intensity={0.85} quiets the scene a little behind a centred headline and two buttons. The headline sits over the sky and the tower stands to its right.

Thick mist

fog={1} thickens the haze, so the far end of the palace fades, and lays mist along the river. cell={6} packs finer dots into a small card and boat={false} leaves the river empty.

Props

Notes

• It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
• It ignores the pointer: no parallax and no hover effect.
• With reduced motion turned on, it draws one still frame at stillTime, with the boat on the river, and stops.
• It pauses when scrolled out of view or when the tab is hidden, and releases its WebGL context when far offscreen. Without WebGL it shows a flat dusk gradient.
• The whole city is one shader pass on the GPU that raymarches the model for every cell. Water cells trace a second, reflected ray, so the river costs about twice as much as the buildings, and rays that clear every roof stop at once, so the open sky is cheap. braille samples eight times per cell and quadrants four. See Performance.