Canyon river

Installation

Usage

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

You look down a desert canyon from its rim in late golden hour. Eroded walls rise on both sides. Their rims are broken at several scales and notched where gullies cut them, the strata tilt and break at faults, gullies branch down from the rim with slanting tributaries, and rounded scree spreads at the foot of the middle wall. Each buttress splits into planes: on the sunward wall, terracotta and rust planes in warm sunlight beside shaded ones under a lit rim; on the far wall, blue shadow planes that catch the sky, with light reflected up from the river low down. Behind them a middle wall and two overlapping rows of buttes step back towards a hazy plateau on the horizon, each farther layer paler and softer. Each butte has its own tilted, chipped cap, weathered shoulders and an uneven talus skirt. The buttes stand at the sides, so the middle stays open.

The sun hangs low over the plateau in a soft halo. A river leaves through a notch in the plateau below it and winds towards you, showing through the gap in each wall in turn. It mirrors the sky: gold under the sun, clear blue where you look down into it. The sky runs from amber at the horizon through pale blue to a deeper blue overhead, with a few thin streaks of cloud lit gold underneath.

Only light moves. The light slides slowly along the rims, streaks of shimmer cross the water, the clouds drift and the glow breathes. The pointer does nothing.

On wide boxes the sun sits well right of centre, so the middle stays calm for a headline. On tall boxes the view narrows and the horizon rises, so on a phone the sun sits above a centred headline and the river runs down beside it.

It draws in dots by default: dot size follows brightness, and in truecolor every dot takes its own colour, so shadow and the high sky stay a quiet grain of small, dim dots and the largest dots are kept for the sun, its reflection and the sunlit rims. Cells are square by default, so the dots sit on an even halftone lattice about 200 columns across a 1440px screen. With square={false} the cells are tall again and dots lights every other column to keep the lattice even. The scene paints its own sky on a deep blue paper, so it looks the same on light and dark pages. Text charsets such as standard and dense give a typed look and read best with square={false}, and braille and quadrants light a dot only above half tone. mono with a phosphor and duotone with a ramp read the same scene by tone alone.

intensity dims the scene: colours fade in step with it and the dots shrink a little. It quiets the middle of the box more than the edges, so a centred headline reads first while the walls and the sky still frame it.

Examples

Behind a headline

intensity={0.65} pushes the canyon back, most of all in the middle, so a centred headline and two buttons read first.

On an amber monitor

colorMode="mono" with phosphor="p3" draws every glyph in one amber, so the canyon reads by tone alone. The standard charset, a 10px cell and fx scanlines, bloom and vignette finish the look.

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 scene.
• The whole canyon is one shader pass on the GPU, one sample per cell in dots. braille samples eight times per cell and quadrants four. See Performance.