Reverb
A phrase that echoes into silence: each line quieter, more open and a dynamic smaller, drifting right like a canon, answering from either wall, or losing its consonants first; it ends on a rest.
Report an issue with ReverbExample
Nothing left to say
Is anyone there
Let it ring
Rest
Say it once
Pointed at
Say it once
Loud
Again
Antiphon
Call and answer
Antiphon, pointed at
Call and answer
Antiphon, right to left
نداء وجواب
Vowels
Say it once
Vowels, pointed at
Say it once
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 { Reverb } from "@/components/ui/reverb"/** The canon drifts on by a word; the antiphon answers from either wall; the vowels ring on after the consonants have gone. */export default function Example() {return (<div className="grid grid-cols-[minmax(0,1fr)] gap-y-(--ot-space-8)"><Reverb>Nothing left to say</Reverb><Reverb variant="antiphon" echoes={4} className="max-w-[36rem]">Is anyone there</Reverb><Reverb variant="vowels" from="f" echoes={5}>Let it ring</Reverb></div>)}Contract
- Underneath: native, plus a hook that measures the echoes' drift with pretext (
@chenglou/pretext, loaded when it's needed). - Anatomy:
<p class="ot-reverb">holding the phrase as.ot-reverb-line, then an aria-hidden.ot-reverb-echoeswith one.ot-reverb-echoper echo and a closing.ot-reverb-rest. - A phrase that echoes into silence. Each echo is quieter: the colour steps from ink through graphite to pencil and then fades by opacity, the letters open a little each time, and the size steps down a dynamic (
from, mf by default: mf, mp, p, pp, and it stays at pp). - Each echo is shifted right by the width of the previous echo's first word, measured in that echo's own type, so they drift like a canon. The last thing is a rest: a hairline at pp in pencil.
- Pointing at it lets the echoes breathe out: each drifts a little further, one
--ot-arpeggioafter the last, and settles back on leave. Arriving isn't a move: the shifts are placed before the easing switches on. - The phrase is read once. The echoes and the rest are aria-hidden and can't be selected. Before pretext has measured, or without script, the echoes simply stack.
variant(data-variant):canon(the default),antiphonorvowels.- antiphon: after cori spezzati, the two choirs Gabrieli set on opposite sides of San Marco to answer each other. The echoes don't drift: they come back from either wall of the measure in turn (
data-side), the first from the far one, each a dynamic quieter and fading as the canon's do, and the rest waits at the wall the next answer would come from. Pointing opens every echo's letters by as much again, one--ot-arpeggioafter the last. Right to left, the walls swap with the text. - vowels: after a live room, where the reverberation masks the short consonants first and the vowels ring on. Every echo keeps the phrase's size and tracking, so it lies letter for letter under it, and each loses letters in a fixed order (consonants and punctuation first, then vowels, hashed from their place) until the last keeps about a tenth. A lost letter (
.ot-reverb-lost) keeps its place and goes silent, so what is left stands in columns; spaces are never lost, and letters are split by grapheme, so a mark stays with its letter. The echoes wrap where the phrase wraps, so the columns hold on every line. Pointing sketches the lost letters back in pencil, one echo after another.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
children | string | The phrase, as plain text. Readers get it once; the echoes are for the eye. | |
echoes | number | 5 | How many times it comes back. |
from | "ffff" | "fff" | "ff" | "f" | "mf" | "mp" | "p" | "pp" | "mf" | The dynamic the phrase is set in. Each echo steps one down, and stays at pp. |
variant | "canon" | "antiphon" | "vowels" | "canon" | canon: each echo drifts on by the width of the last one's first word. antiphon, after the two choirs of San Marco: the echoes answer from either wall of the measure in turn, the first from the far one; pointing opens their letters. vowels, after a live room, where reverberation masks the consonants first: every echo keeps the phrase's size and lies letter for letter under it, and loses its consonants, then its vowels, until about a tenth is left; pointing sketches the lost letters back in pencil. |
Craft
Where its move comes from
| Component | Reference | Move |
|---|---|---|
| Reverb | The score's dynamics | The phrase echoes quieter and drifts, ending on a rest |
| Antiphon reverb | Gabrieli's cori spezzati at San Marco; the Renaissance poster's labels spread to the walls | The echoes answer from either wall in turn |
| Vowels reverb | A live room, where the consonants are lost first; "the silence that heals" grid | Each echo loses its consonants in place; the vowels ring on in columns |
How it moves
| Component | Articulation | What moves |
|---|---|---|
| Reverb | Decay | The echoes drift a little further while pointed at |
| Antiphon reverb | Decay | The echoes' letters open while pointed at, one after another |
| Vowels reverb | Sketch | The lost letters come back in pencil while pointed at |