Sydney

Installation

Usage

Copyimport { Sydney } from "@/components/asciicn/sydney";
 
export function Hero() {
  return (
    <section className="relative isolate flex min-h-[480px] flex-col items-center justify-center text-white">
      <Sydney intensity={0.75} className="absolute inset-0 -z-10" />
      <h1>Your headline</h1>
    </section>
  );
}

The harbour is seen from the east at blue hour, just after sunset. The Opera House stands on the left on its podium: two halls of overlapping curved shells, the taller hall behind and the lower one in front, with heights and leans that differ from shell to shell and the tallest tip at the north end. Each shell is shaded as a volume: the face toward the afterglow is lit warm cream with a soft ridge, its back turns away into cool lavender, the underside shows in shadow under the overhang, and every shell in front throws a soft shadow on the one behind it. Glass walls under the tallest tips glow amber, and the restaurant's two small shells sit at the south end above the stairs.

The Harbour Bridge spans the right of the frame: a granite pylon at each end, lit on the face toward the glow, and the arch between its two chords, with a hazy truss, hangers down to the deck and lamps along the arch and the deck. The city's towers stand behind in cool haze, with a needle tower among them and North Sydney past the bridge.

The whole frame is painted. The sky runs from deep blue at the top through lavender to a peach afterglow low between the house and the bridge. The harbour mirrors the sails, the arch and the glow through slow ripples, and the afterglow lays a path of glints on the water. Far things draw smaller, hazier dots than near ones, and only the lit sails, the glow and its reflection draw the largest.

Nothing built moves, and the pointer has no effect. The motion is slow: ripples break and shift the reflections, a few windows switch on or off, fading over a couple of seconds, red lights on the crown of the arch and the needle tower blink softly, stars twinkle, and one green and cream ferry crosses the harbour every few minutes.

The middle of a wide box stays quiet for a headline: the house sits on the left and the bridge on the right. On a tall box both close in and sit low, the tallest shell just right of centre and the arch rising behind it, so a phone shows them under the copy.

It draws in dots by default, on square 7px cells so the dots lay an even halftone lattice, with blue-noise dithering so the dot sizes blend into smooth gradients without a regular pattern. In truecolor mode, also the default, every dot takes its own colour and the scene paints its own blue hour behind them, so it looks the same on light and dark pages. braille and standard draw the same scene in other glyphs; Braille and quadrants keep their usual tall cells. In mono mode every glyph takes the ink or a phosphor, and in duotone mode the scene runs through a ramp, ember by default.

ferry={false} takes the ferry off the water. intensity thins every dot at once. Around 0.75 keeps the sails clear behind a headline; lower it under body text.

Examples

Behind a headline

The harbour full-bleed behind a centred headline and two buttons, at intensity={0.75}. The scene stays dark in both themes, so the copy on top is white.

Duotone

colorMode="duotone" with ramp="heliograph" runs every tone through one blue ramp, so the scene reads by dot size alone, and ferry={false} leaves the water still.

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. The default, 30 seconds, puts the ferry on the water below the glow.
• 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.
• The whole harbour is one shader pass on the GPU. Water samples also draw the mirrored scene, so the harbour costs about twice as much as the sky. See Performance.