Beer Text

Fill your headings like a pint of beer. The stream lands, the surface sloshes, a head builds and settles, and carbonation rises through the letters. A small physics simulation, not a looping wave, in plain JS and SVG with no dependencies.

Pouring

Or click the title. Keyboard: focus it and press Enter.

npm install beer-text

Five presets

Pick one and the title pours in it. Override any color with the colors option.

Your pour

Every change pours the title again, once it is back on screen. The snippet keeps up.

default

The settled head, as a fraction of the letters' height. By default, 30% of the first line's letters, however many lines there are.

Empty

The letters' color before the beer arrives. By default, the heading's own text color.

Snippet

pour() returns a controller: finished (a promise for the current pour), replay(), finish() and destroy(). Or load it from a CDN: import { pour } from 'https://cdn.jsdelivr.net/npm/beer-text@0.1/+esm'.

How it works

Poured by physics, not keyframes

Long titles wrap wherever the browser breaks them: each line fills, and the head settles in the first. Click to pour again.

PhysicsA real pour, compressed

The stream lands, the surface sloshes and the head builds and settles with the same shape of decay as a real one, in about a second instead of minutes. Carbonation rises from where the letters' strokes meet the baseline and pops into the head.

TypographyYour font, your heading

The heading's own font is used, so any web font or system font works; heavy display faces like Anton read best. Uppercase, letter-spacing and wrapped lines are drawn to match. Plain JS and SVG, no dependencies.

HonestReal text stays

The heading's text is unchanged: screen readers, copy and paste, and scripts that read the heading get the same heading as before. The beer is an aria-hidden overlay, and if the font never loads or drawing throws, the plain heading stays.

Accessibility

Decoration that gets out of the way

  • Real text

    The heading keeps its own text. Nothing is replaced with images or spans, so assistive tech and copy and paste see the heading you wrote.

  • Reduced motion

    With prefers-reduced-motion, the heading shows the full pint without pouring. Switching it on mid-pour stops the pour.

  • Forced colors

    In forced-colors (high contrast) mode nothing is drawn: the plain heading shows in system colors, including when the mode is switched on later.

  • Fails plain

    If the font never loads, the heading cannot be measured, or drawing throws, the plain heading stays. Animation runs only while the heading is on screen and the tab is visible.