San Francisco

Installation

Usage

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

The view is at an angle across the water at blue hour, just after sunset. The north tower stands near on the left, taller and wider, and the south tower far on the right, smaller and hazier, with the deck and the main cable receding between them. Each tower has two legs, four portal struts above the deck, stepped tops and X bracing below the deck, standing on concrete piers. The faces that turn toward the afterglow are lit warm orange and the far side of each leg falls into deep rust. Fine hangers drop from the cable to the deck and fade as they crowd together toward the far tower. The Marin Headlands rise behind the near tower, and the low hills of the Presidio and the city's lights sit past the far one.

The whole frame is painted. The sky runs from deep blue at the top through mauve to a warm afterglow low behind the bridge, with thin streaks of high cloud. A bank of fog lies under the deck, rises toward the far tower until it hides parts of the far deck and the tower's base, and piles up against the headlands, lit warm on top and blue grey underneath. The bay below mirrors all of it, and the afterglow lays a path of glints on the water. Dark areas stay quiet: the deep sky, the fog's shadow and the far water draw the smallest dots in colours a shade above the paper, and the large bright dots are kept for the bridge, the glow and its reflection.

Nothing built moves, and the pointer has no effect. The motion is slow: the fog drifts east under the deck, ripples break the reflections into streaks, the red aircraft lights on the tower tops blink softly out of step with each other, a few stars twinkle, and one boat crosses the bay every few minutes.

Wide boxes keep the angled view and spread it with the box. In a portrait box, narrower than about 0.85 wide to 1 tall, the view turns square on: the towers stand at the left and right edges with their tops near half height, the deck runs low at about three quarters of the way down, and the afterglow is held back, so a centred headline and its buttons sit between the towers and above the span instead of over the bridge. Tower legs, struts, the cable, the hangers and the deck are laid out on whole cells, so they come out as clean lines of dots at any size.

It draws in dots by default, on square 7px cells so the dots lay an even halftone lattice, with bayer4 dithering so the dot sizes blend into smooth gradients. In truecolor mode, also the default, every dot takes its own colour and the scene paints its own dusk 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.

fog sets how thick the bank is, from none at 0. traffic sets how many cars cross the deck as single dots of light, up to six. boat={false} takes the boat off the water. intensity thins every dot at once. Around 0.7 keeps the bridge clear behind a headline; lower it under body text.

Examples

Behind a headline

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

Amber terminal

phosphor="p3" draws the scene in amber on dark glass. braille dots, fog={0.9} and a CRT finish from fx make it look like a night camera on an old monitor.

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. Without WebGL it shows a CSS gradient in the scene's colours.
• The whole scene is drawn on the GPU in one pass, and the water reads the scene above it a second time for the reflection. See Performance.