Glacier lagoon

Installation

Usage

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

The view looks across a glacier lagoon near midnight in high summer. The sun sits on the horizon right of centre, a white-gold disc inside a gold and rose glow that fades to night blue overhead. Dark peaks stand against the glow with alpenglow on their sunward crests, and the peaks right of centre sit farther back in haze. On the left a broad tongue of pale ice comes down between two peaks and ends in a deep blue calving face at the water, crossed by arcing bands and one dark stripe of moraine.

Six icebergs float on the lagoon, from a small block at the glacier's foot to a tall pinnacle on the right. Each is pale blue-white where the sun catches it and deep blue in shadow, with an aquamarine band at the waterline. The water is glassy. It mirrors the sky, the peaks and the glacier about the horizon and each berg about its own waterline, and small chips of brash ice are scattered across it.

Nothing moves fast, and the pointer does nothing. The bergs drift a few cells over several minutes, a band of low mist slides along the horizon, the clouds creep sideways, gold glints shimmer on the sun's path across the water, and the glow around the sun swells faintly.

It draws in dots by default on square 7px cells, about 200 columns across a 1440px screen, so the dots lay an even halftone lattice. Dot size carries brightness and, in truecolor, every dot takes its own colour. Even the darkest water and rock keep a faint dot, so every cell is painted. Set square={false} for charsets that need tall cells: quadrants gives a solid, saturated picture, braille a fine one, and standard a typed look. In truecolor it paints its own night sky, so it looks the same on light and dark pages. mono with a phosphor and duotone with a ramp read the same scene by brightness alone.

On wide boxes the glacier sits left and the sun right, with open sky and water between them for a headline. On tall boxes the layout narrows toward the centre, so the glacier, the sun and the nearest bergs stay in frame.

intensity dims the dots and their colours. Below 1 it also quiets an oval in the middle of the box, where a headline and buttons usually sit.

Examples

Behind a headline

intensity={0.7} dims the dots and quiets the middle of the box, so a centred headline and two buttons read first.

In one ramp

colorMode="duotone" with ramp="glacier" reads the scene by brightness alone, from teal shadow to white ice. mist={false} keeps the horizon clear.

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, and releases its WebGL context when far offscreen. Without WebGL it shows a flat gradient of the sky and the lagoon.
• The whole scene is one shader pass on the GPU. Water samples also draw the mirrored sky, peaks and glacier, so the lagoon costs about twice as much as the sky. See Performance.