Ember

Installation

Usage

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

Tongues of flame rise from the bottom edge. Each one has its own height that rises and falls over several seconds, licks run up through it, and its edges fray. Near the tip, pieces tear off and the tongue carries on as a faint plume of smoke. A few sparks leave the flames, drift sideways on the wind, blink and go out. Just above the tongues, the rows waver a little, like air over a fire.

Every size is measured against the height of the flames, so the same fire works as a band along the bottom of a hero and as a box filled with fire. intensity sets that height: at 1 the tallest tongues reach about half the box, at 0.6 they stay in the lower third, and at 1.5 or more they fill a short strip.

In truecolor the coolest glyphs are a deep coal red, the body takes the flame colour, and the hottest glyphs mix toward the ink: pale gold on dark paper, deep copper on light paper. Smoke is the ink faded toward the paper. In palette mode the glyphs run paper, ink, flame by tone, so the hottest glyphs are the amber and the smoke fades into the paper.

It draws in standard by default. braille gives fine dots, and quadrants a blockier fire; both use blue-noise dithering so the smoke and the tips break into scattered dots.

Examples

Hero footer glow

An intensity of 0.6 keeps the fire in the lower third, so the headline sits on clear paper.

Card strip

A short strip along the bottom of a card. A high intensity fills the strip.

Braille

Eight dots per glyph, for a finer fire.

Props

Notes

• It is decorative and hidden from assistive technology. Put real text on top of it, not inside it.
• With reduced motion turned on, it draws one still frame at stillTime and stops.
• It does not react to the pointer.
• 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 soft glow in the flame colour along the bottom.
• speed scales all of the motion together: the flames, the smoke and the sparks.