Tokyo

Installation

Usage

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

The view looks west from a rooftop in the east of the city, 64 m up. The scene is built in 3D and raymarched from that camera: the city is a grid of lots, each with its own block, walked front to back so every wall, roof and street is a real surface at a real distance. The grid runs at an angle to the view, so blocks show two faces and the avenues run off toward the horizon as lines of light. Past a few kilometres the city carries on in long steps until it melts into the haze.

The Tokyo Skytree stands at the right, about 1.7 km away, drawn to its real proportions: a tripod base that narrows into a round lattice shaft, the three-tier Tembo Deck at 350 m, the Tembo Galleria ring at 450 m and the antenna mast to 634 m. It is lit in pale blue round a white core, its decks bright and rimmed in violet, with red lights on the mast. Tokyo Tower stands far off at the left, small and orange. Mount Fuji rises a few degrees above the horizon, 90 km away, its snow cap bright on the side facing the low moon.

Light comes from the moon in the west, the glow of the sky, warm street light caught in the low haze, and the city's own lights: office floors in white and cyan, homes in warm light, vertical neon signs on the near streets and red aircraft lights on the tall roofs. Haze thickens with distance, so each layer of blocks is a little lighter than the one in front of it.

Motion is slow and sparse: a few windows switch on or off over tens of seconds, aircraft lights pulse out of step, traffic creeps along the avenues, the neon breathes, haze drifts and stars twinkle. Nothing responds to the pointer.

It draws in dots by default on square 7px cells, about 200 columns across a 1440px screen. Every colour is snapped to a palette of 46 chosen for the scene, and dot size follows brightness through bayer4 ordered dithering, so it reads like a print. In truecolor, the default, it paints its own night on a night paper, so it looks the same on light and dark pages. The Skytree stays right of centre on a wide screen; in a tall box the view narrows and gains height, so the tower fills a phone.

The central band, the middle half of the width from 30% to 65% of the height, holds sky and the far horizon. intensity dims the colours and shrinks the dots, most of all in that band. Lower it to keep text on top easy to read.

Examples

Behind a headline

Full-bleed behind a centred headline and two buttons. intensity={0.6} quiets the middle band so the text reads first, while the Skytree and the city still frame it.

In a tall card

In a 9:19 box the view narrows and gains height, so the Skytree fills the frame above the city.

In sodium duotone

colorMode="duotone" with ramp="sodium" runs every dot's tone through one amber ramp, so dot size alone draws the Skytree, the city and Fuji.

Props

Notes

• It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
• 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 night gradient.
• Nothing responds to the pointer, and there is no interaction prop.
• The whole scene is one GPU pass that raymarches the city for every sample, so its cost depends on the number of samples. braille samples eight times per cell; a larger cell makes it cheaper. See Performance.