Waterfall
A type specimen waterfall: one sentence at every dynamic, loudest first, each line filled to the measure with as many whole words as the size holds.
Report an issue with WaterfallExample
Hush, the whole hall is listening. Nothing is louder than a room that has just gone quiet, and every sound after it is measured against that silence.
Strike one note and let it ring. It is loudest the instant it begins, and from then on it only falls away, a little quieter with every breath, until you are no longer sure whether you are hearing the note or remembering it.
Hush, the whole hall is listening. Nothing is louder than a room that has just gone quiet, and every sound after it is measured against that silence.
Voice
Hush, the whole hall is listening. Nothing is louder than a room that has just gone quiet, and every sound after it is measured against that silence.
Italic
Hush, the whole hall is listening. Nothing is louder than a room that has just gone quiet, and every sound after it is measured against that silence.
Decay
Strike one note and let it ring. It is loudest the instant it begins, and from then on it only falls away, a little quieter with every breath, until you are no longer sure whether you are hearing the note or remembering it.
Decay, italic
Strike one note and let it ring. It is loudest the instant it begins, and from then on it only falls away, a little quieter with every breath, until you are no longer sure whether you are hearing the note or remembering it.
Solo, at rest
Hush, the whole hall is listening. Nothing is louder than a room that has just gone quiet, and every sound after it is measured against that silence.
Install
Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base along.
npx shadcn@latest add https://Usage
import { Waterfall } from "@/components/ui/waterfall"const words = "Hush, the whole hall is listening. Nothing is louder than a room that has just gone quiet, and every sound after it is measured against that silence."const fading ="Strike one note and let it ring. It is loudest the instant it begins, and from then on it only falls away, a little quieter with every breath, until you are no longer sure whether you are hearing the note or remembering it."export default function Example() {return (<div className="grid gap-y-16"><Waterfall className="max-w-[56rem]">{words}</Waterfall><Waterfall variant="decay" from="fff" className="max-w-[56rem]">{fading}</Waterfall><Waterfall variant="solo" from="ff" className="max-w-[56rem]">{words}</Waterfall></div>)}Contract
- Underneath: native, plus a hook that lays the lines out with pretext.
- Anatomy:
<div class="ot-waterfall">holding the text for readers once (.ot-sr) and, per dynamic, an aria-hidden.ot-waterfall-row:.ot-waterfall-mark(the dynamic, in the expression italic, pencil),.ot-waterfall-text(the line) and.ot-waterfall-px(its size). - A type specimen waterfall: the same words at every dynamic from
from(ffff) toto(pp), loudest first. Each line takes as many whole words as the measure holds at its size (pretext counts them) and never wraps or ellipsises (white-space: nowrap; overflow-x: clipis only a safety). Its tracking then opens by up to a twentieth of an em to reach the edge, unless the line already holds all the words. A first word wider than the line sets that line smaller instead of breaking; a quieter line is never set louder than the one above it. - Pointing at a line shows its size in pixels in pencil at its end; on a narrow container the size takes the mark's place.
italicsets the specimen in the expression face. It lays out again when its width changes or<html>changes face; before that each line is the plain text, clipped. variant(data-variant; none for the default,specimen):decayorsolo.- decay: a note after its attack. The sentence is read once instead of repeated: each line takes up where the one above stopped, a dynamic quieter, filled and tracked to the measure the same way; the quietest line says the rest and wraps as a paragraph does. A line with nothing left to say is hidden. It is still: the fall is in the sizes, not in time.
- solo: the mixing desk's solo button. Pointing at a line keeps it in ink and sends every other line back to a rule (
--ot-rule-strong), its dynamic's mark inked and its size shown, so you hear one size alone; the colour eases (--ot-andante). Leaving brings every line back. A pointer aid only: the rows are aria-hidden and the text is read once.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
children | string | The words, as plain text: pretext measures how many each size holds. Begin with a short word so the loudest line has one to show. | |
from | "pp" | "p" | "mp" | "mf" | "f" | "ff" | "fff" | "ffff" | "ffff" | The loudest dynamic to show. |
to | "pp" | "p" | "mp" | "mf" | "f" | "ff" | "fff" | "ffff" | "pp" | The quietest dynamic to show. |
italic | boolean | false | Set the specimen in the expression italic. |
variant | "specimen" | "decay" | "solo" | "specimen" | How the lines relate. specimen: the same words at every size, as a foundry's specimen shows a face. decay: the sentence is read once and falls away as it goes, as a note does after its attack; each line takes up where the one above stopped, a dynamic quieter, and the quietest says the rest and wraps. solo: the mixing desk's solo button; pointing at a line keeps it in ink and sends the others back to a rule, so you hear one size alone. |
Craft
Where its move comes from
| Component | Reference | Move |
|---|---|---|
| Waterfall | The foundry's specimen waterfall; the score's dynamics | One sentence at every dynamic, each line filled to the measure |
| Decay waterfall | A note's decay after its attack; "It has to be design." scale contrast | The sentence read once, falling a dynamic every line |
| Solo waterfall | The mixing desk's solo button | Point at one size and the others fall back to a rule |
How it moves
| Component | Articulation | What moves |
|---|---|---|
| Solo waterfall | Mute | The lines you are not pointing at ease back to a rule |