New York

Installation

Usage

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

The view looks west at Manhattan from Brooklyn just after sunset. The sky runs from amber on the horizon through coral and violet to a deep blue that is almost the paper, with the afterglow low on the west side, behind the rooftops. The landmarks stand clear of the middle, where a headline goes: One World Trade Center to the west, its glass catching the afterglow on one side, and the Empire State Building to the east, its top floors floodlit gold under a lit crown, mast and antenna, with the Chrysler Building's arched crown outlined in white beside it. Between them the low Village and three rows of towers behind fade into the dusk haze, each row paler, flatter and smaller in its dots than the one in front. On a tall phone the landmarks shrink a little so all three stay beside the headline.

Windows light the skyline in warm lamp light, amber and a few cool office tubes, varied per tower and per floor. The river mirrors the city in long, broken streaks, the landmarks' lights run down it in columns to the bottom of the frame, and a glitter path lies under the afterglow.

The buildings never move. A few windows fade on or off at a time, each on its own clock of one to two minutes. The reflections shimmer, the spire lights breathe, a few stars twinkle, thin clouds drift and a ferry crosses in about three minutes. Nothing follows the pointer.

It draws in dots on square 7px cells by default, about 200 columns across a wide screen, so the dots lay an even halftone lattice and dot size carries tone: the deep sky and the dark facades are the smallest dots in a colour close to the paper, mid tones are small and medium dots, and only the lit crowns, windows and the afterglow get the large ones. In truecolor, the default, every dot takes its own colour on the scene's dusk navy, so it looks the same on light and dark pages. braille and quadrants want square={false}, and draw only the brighter parts, as outlines and lights. mono with a phosphor and duotone with a ramp read the same scene by tone alone.

Examples

Hero

intensity={0.6} dims the city so a centred headline and buttons read first, and the skyline still shows around them.

On a green monitor

colorMode="mono" with phosphor="p1" draws every dot in one green, and fx scanlines, bloom and vignette finish the look.

Props

Notes

• It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
• The buildings never move and nothing reacts to the pointer. Only window lights, the spire lights, stars, clouds, the reflections and the ferry change.
• With reduced motion turned on, it draws one still frame at stillTime, with the ferry 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 gradient in the same colours.
• The whole city is one shader pass on the GPU. The river reads the skyline three times to mirror it and stretch its lights, so a water cell costs about three sky cells. braille samples eight times per cell, so it costs the most. See Performance.