Paris

Installation

Usage

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

The scene is modelled in 3D and raymarched for every dot, then printed as a halftone. You stand at the water's edge, three metres above the Seine, looking downstream. The river runs away between stone quays, 150 m apart, towards the Eiffel Tower on the right bank about 700 m off. Perspective does the rest: the near blocks are tall at the edges of the frame, the far ones shrink towards the vanishing point, and the tower rises over them at its true height.

The tower follows the real measurements: four legs splayed 125 m apart at the foot, the great arch on each face, the first floor at 58 m, the legs closing to the second floor at 116 m, the long tapering shaft to the top floor at 276 m, then the campanile and the antenna to 330 m. It is lit gold from within. The face turned towards you burns brightest, the face turned to the river sits in deeper amber, and the iron on the far side and inside the legs falls into shadow. The lattice is open, so the sky shows through the gaps, most of all through the far side. Its glow warms the haze around it, and the beacon on top swells slowly about every eleven seconds.

Along both quays stand rows of Haussmann blocks: pale limestone facades with floors of tall windows, some lit warm, iron balconies on the second and fifth floors, grey-blue zinc mansards with dormers, and chimney stacks on the party walls. The right bank faces the last of the afterglow and stands paler; the left bank is in cooler shade. Street lamps line the tops of the quay walls, and the Pont d'Iéna crosses the river at the tower's feet.

The Seine reflects all of it by tracing each view ray back up off the water, bent by slow ripples, so the reflections are darker than the scene and break into long dashes. Haze thickens with distance, so the far blocks fade towards the sky. Every dot's colour then snaps to a palette of 40 colours (night blues, limestone, zinc, the tower's gold and the warm light of windows), and ordered dithering blends the dot sizes, which is what makes it look printed rather than smoothly shaded.

Motion is slow: the ripples drift, the beacon glows, a few windows turn on or off every few minutes, thin clouds drift, stars twinkle faintly, and one bateau-mouche comes up the river towards you, about six minutes from the haze to the edge of the frame. The pointer does nothing.

On wide boxes the camera turns so the tower stands right of centre and the middle stays calm sky for a headline. On tall boxes it turns to put the tower in the middle, with the river below.

It draws in dots by default on square 7px cells, about 200 across a 1440px screen. square={false} returns to text cells, twice as tall as wide. Other ramp charsets read the same tones as typed glyphs. braille and quadrants light a dot only above half tone, so they keep the tower, the windows and the lamps. 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 tower stands right of the text on wide screens, and the sky behind the text stays calm.

Finer dots

cell={5} packs more dots into a small card, so the lattice of the tower holds its detail. boat={false} leaves the river still.

On a phone

In a tall box the camera turns so the tower stands in the middle of the frame, with the river and its reflection below.

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 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 blue-hour gradient.
• The whole scene is raymarched on the GPU every frame, at 24 frames a second by default. Rays that rise above the roofs skip the march, so the sky is cheap; water samples trace a second, reflected ray, so the river costs about twice as much as the buildings. It is the heaviest of the city backgrounds: on slow GPUs lower fps or raise cell. braille samples eight times per cell and quadrants four. See Performance.