Hong Kong

Installation

Usage

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

The view looks across Victoria Harbour from Kowloon at blue hour. Victoria Peak fills the middle of the sky as a dark, wooded ridge with a lower spur in front of it. Its slopes facing the afterglow catch a little magenta and the rest falls into shadow, and soft banks of mist lie across its upper slopes. The sky behind it runs from hot magenta along the crest through mauve and violet to a deep, quiet blue overhead, where a few stars show.

Below the Peak, the towers of the Mid-Levels climb its slope in violet haze, and in front of them runs the waterfront: a wall of dark towers lit in warm, white, cool and teal windows, floor by floor, with a few crowns in slowly changing LED colours. Two landmarks stand either side of the frame. The Bank of China Tower is on the left, with dark glass, white edges, softer X braces and slanted roofs that step up to twin masts. Two IFC is on the right, striped with vertical light, with a crown of fins in front of the afterglow.

The harbour mirrors the city in long coloured streaks, broken by slow ripples, and a column of rose glints runs under the afterglow. A junk with three battened red sails crosses it.

Motion is slow and sparse: the junk takes about two minutes to cross a wide screen, the reflections shimmer, a few windows switch on or off over tens of seconds, the mist drifts, the red light on the Bank of China mast pulses and the stars twinkle. Nothing responds to the pointer.

It draws in dots by default on square 7px cells, about 200 columns across a 1440px screen. Dot size carries tone: small, dim dots in the deep sky, the shadowed hills and the open water, and large ones only for the landmarks' lit edges, the windows, the afterglow and its reflection. Dots, braille and quadrants use blue-noise dithering, which blends neighbouring sizes without stripes. In truecolor, the default, every dot takes the scene's own colour on a night paper, so it looks the same on light and dark pages.

The middle of the frame stays calm for a headline. The landmarks stand outside the middle half of the width, the waterfront towers are lowest in the centre and their windows dim there, and the junk sails below the text. In narrow boxes the two towers move to the edges and the Peak stays centred, so a phone crop keeps all three.

intensity dims the colours and shrinks the dots, most of all in the middle band where a headline sits. 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.65} quiets the middle band so the text reads first, while the two towers frame it.

In a tall card

In a 9:19 box the Bank of China Tower and Two IFC move to the edges and the Peak stays centred, so all three stay in view.

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 blue-hour gradient.
• Nothing responds to the pointer, and there is no interaction prop.
• The whole scene is one GPU pass. The harbour draws the city a second time for its reflection, so its cost follows the number of samples. braille samples eight times per cell; a larger cell makes it cheaper. See Performance.