Balloon valley

Installation

Usage

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

It is early morning. The sky is a soft blue overhead, paling to cream in the middle and pale peach at the horizon, and a gold sun sits half over the farthest ridge in a warm glow. Four ridges in cool blue shadow step down towards you and open in a V under the sun. Each is paler than the one in front, sinking into the haze, and the faces turned to the sun warm up. Pale gold mist pools in the low ground of every V. At the bottom, two blue hills frame a sage valley floor, where the river winds towards you as a pale ribbon with gold glints on it.

Five hot-air balloons hang in the sky at different depths. The nearest is large and striped red and gold, lit from the sun's side and glowing through its shaded side. The far ones are smaller and fade into the haze. Two of them rise and sink over a few minutes, and the low one drops behind the ridges and comes back up.

The scene is printed like ink on warm cream paper: the dot grows with how far a colour is from the paper. The pale sky is the faintest dots, so the middle of the box is almost bare paper. The cool blue hills and the gold mist are small and medium dots, and only the sun, the river's glints and the balloons get large ones. bayer4 dithering, the default, mixes neighbouring dot sizes so gradients stay smooth. square cells, on by default, lay the dots on an even lattice like a halftone screen, about 200 columns across a 1440px screen at the default 7px cell. In truecolor, the default, the scene prints on its own cream paper, so it looks the same in light and dark themes. Put dark text on it. duotone with a ramp and mono with a phosphor read the same scene by tone alone.

The motion is slow: mist drifts along the valley, the river's glints shimmer and breathe, and the balloons bob. Nothing reacts to the pointer.

The land sits in the lower third, so a centred headline lands on quiet sky with the sun just below it. On wide boxes the sun sits a little right of centre and the balloons keep to the sides and the top. On tall boxes the balloons gather above the headline and the sun and the river sit below it.

Examples

Hero

A centred headline and two buttons over the full scene at full intensity. The headline is a dark slate blue taken from the hills and lands on almost bare cream; a soft wash of the paper behind it keeps it clean.

Duotone print

colorMode="duotone" with a four-stop ramp draws the valley in rust and slate on the cream, like a two-ink print. cell={6} adds detail in a smaller card.

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 dawn gradient.
• The whole valley is one shader pass on the GPU, one sample per cell in dots. Mist and ridge texture use a few octaves of noise, so it costs a little more than a flat gradient. See Performance.