Lighthouse

Installation

Usage

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

A white lighthouse stands on a rocky headland at blue hour. Its lantern room glows amber with a soft halo that breathes slowly, about every eleven seconds. A keeper's cottage beside it keeps one window lit. Below, the headland drops to the sea in a craggy cliff, with a sea stack off its foot.

The sky runs from a peach afterglow low on the left, through rose and violet, to deep blue with the first stars. Long thin clouds catch the afterglow on their undersides and drift slowly right. A low far shore sits hazy on the horizon. The sea mirrors the sky, pale at the horizon and dark near you, and carries the lamp's light as a warm broken path. Slow swells roll in and break into soft foam on the rocks.

Every cell is painted. The default dots charset draws each one as a halftone dot whose size follows the brightness, from a faint · in the night sky and the deep water to a full ● in the lamp, the tower and the afterglow. square cells, on by default, are as wide as they are tall, so the dots lie on an even lattice like a printed halftone screen; turn it off and the rows sit twice as far apart as the columns. In truecolor, the default, each dot takes the scene's own colour on its own night, so the scene looks the same on light and dark pages. mono with a phosphor and duotone with a ramp read it by tone alone. braille and quadrants light a dot only above half tone, so they keep the bright shapes and drop the dark sea and sky; use them with square={false}.

On wide boxes the tower stands right of centre, so a headline fits in the middle. On tall boxes it moves nearer the middle and keeps its size.

intensity quiets the scene for text on top: colours dim and dots shrink together.

Examples

Hero

intensity={0.7} keeps the lamp as the brightest thing on screen while a centred headline and two buttons read first.

Quiet strip

stars={false} and clouds={false} leave only the lamp, the swells and the foam moving. At intensity={0.45} the scene sits behind a short line of text.

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.
• The whole scene is one shader pass on the GPU, one sample per cell in dots. At the default 7px square cell a 1440px wide box is about 200 columns. braille samples eight times per cell and quadrants four. See Performance.