Miami

Installation

Usage

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

The whole frame is painted in halftone dots. Each dot takes its own colour, and its size carries the light: the smallest dots in the deep violet at the top of the sky, middle dots through the magenta and the hot coral along the horizon, and the biggest dots kept for the moon, the neon and lit windows.

The view is from the bay, looking across the beach at Ocean Drive after sunset. A row of art deco hotels stands along the sand, their pastel walls washed with light from the street: a cafe arcade at the bottom, eyebrow ledges over each row of windows, a glass-block pylon up the middle, and a stepped parapet on top. Neon in pink, teal or amber traces the top of each parapet, with a spire, a name sign or a vertical blade sign on some of them. Palms stand in silhouette between the hotels.

Behind them the glass towers of Brickell rise in blue haze, the far ones paler, a few with lit crowns and the tallest with a red beacon. A young crescent moon hangs low in the afterglow above them.

The bay mirrors the street, darker and quieter, so only the lights come through, broken into dashes by the ripples. Each hotel's neon runs down the water in a soft streak, and the moon lays a pale glitter path.

Motion is slow: the neon breathes, the water shimmers, a few windows turn on or off every couple of minutes, the palms barely sway, thin clouds drift, and stars twinkle faintly. The pointer does nothing.

The hotels keep their size when the box changes shape, so a phone shows two or three of them instead of squashed ones. On wide boxes a palm stands in the middle and the hotels and towers there stay lower, so the band behind a headline is mostly sky; Brickell and the moon sit to the left. On tall boxes a hotel stands in the middle, below where a headline would sit.

It draws in dots by default on square 7px cells, so the dots lie in an even lattice, about 200 across a 1440px screen. square={false} returns to the usual text cells, twice as tall as wide, and is the default for braille and quadrants, which would stretch. Other ramp charsets such as standard or dense read the same tones as typed glyphs. In truecolor, the default, the scene paints its own violet night paper in both themes. mono with a phosphor and duotone with a ramp read the same scene by tone alone.

intensity quiets the middle band, where a headline sits, more than the edges. It dims the colours in step and shrinks the dots more gently, so the shapes keep their place behind text. neon turns the neon and the lit tower crowns down without touching the rest.

Examples

Hero

intensity={0.6} drops the middle of the scene back behind a centred headline and two buttons, while the hotels, palms and towers at the edges still read.

Finer dots

cell={5} packs more dots into a small card, so the parapets, palms and windows keep their detail.

Neon turned down

neon={0.25} leaves the pastel walls and lit windows and dims the neon on the parapets, the tower crowns and their streaks in the bay.

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.
• It pauses when scrolled out of view or when the tab is hidden. Without WebGL it shows the dusk as a flat gradient.
• The whole scene is one shader pass on the GPU. Water samples also draw the mirrored street, so the bay costs about twice as much as the sky. braille samples eight times per cell and quadrants four. See Performance.