Wake
A paragraph that parts around your pointer like water around a hand: the lines it crosses split in two and the words move on.
Report an issue with WakeExample
A hand drawn through still water leaves nothing behind it. The surface opens where you touch it, the ripples carry your shape outward for a moment, and then the water forgets you were there. Text can do the same. It only has to be given room, and to take it back the instant you go.
A typesetter spends a career closing rivers, the channels of white that run down a page when the spaces in one line fall under the spaces in the next. Here the river is yours. It follows your hand from edge to edge, the column parts either side of it, and every line reads straight across the white you have made.
A caesura is the pause in the middle of a line, the breath a singer takes where the verse allows it. Point at any line here and the paragraph gives it that breath, above and below, so it stands alone for as long as you stay. Move on and the next line is held instead; leave and the paragraph closes up.
Press harder and the letter prints heavier. The ink spreads under the platen, the counters close, and a compositor keeps the line from moving by setting it narrower.
A hand drawn through still water leaves nothing behind it. The surface opens where you touch it, the ripples carry your shape outward for a moment, and then the water forgets you were there. Text can do the same. It only has to be given room, and to take it back the instant you go.
A hand drawn through still water leaves nothing behind it. The surface opens where you touch it, the ripples carry your shape outward for a moment, and then the water forgets you were there. Text can do the same. It only has to be given room, and to take it back the instant you go.
A typesetter spends a career closing rivers, the channels of white that run down a page when the spaces in one line fall under the spaces in the next. Here the river is yours. It follows your hand from edge to edge, the column parts either side of it, and every line reads straight across the white you have made.
Press harder and the letter prints heavier. The ink spreads under the platen, the counters close, and a compositor keeps the line from moving by setting it narrower.
A caesura is the pause in the middle of a line, the breath a singer takes where the verse allows it. Point at any line here and the paragraph gives it that breath, above and below, so it stands alone for as long as you stay. Move on and the next line is held instead; leave and the paragraph closes up.
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 { Wake } from "@/components/ui/wake"const text ="A hand drawn through still water leaves nothing behind it. The surface opens where you touch it, the ripples carry your shape outward for a moment, and then the water forgets you were there. Text can do the same. It only has to be given room, and to take it back the instant you go."const river ="A typesetter spends a career closing rivers, the channels of white that run down a page when the spaces in one line fall under the spaces in the next. Here the river is yours. It follows your hand from edge to edge, the column parts either side of it, and every line reads straight across the white you have made."const caesura ="A caesura is the pause in the middle of a line, the breath a singer takes where the verse allows it. Point at any line here and the paragraph gives it that breath, above and below, so it stands alone for as long as you stay. Move on and the next line is held instead; leave and the paragraph closes up."const weight ="Press harder and the letter prints heavier. The ink spreads under the platen, the counters close, and a compositor keeps the line from moving by setting it narrower."export default function Example() {return (<div className="grid gap-y-8"><Wake className="ot-mp max-w-[36rem]">{text}</Wake><Wake variant="river" mark className="ot-p max-w-[36rem]">{river}</Wake><Wake variant="caesura" mark className="ot-p max-w-[36rem]">{caesura}</Wake><Wake variant="weight" className="ot-mf max-w-[36rem] font-light">{weight}</Wake></div>)}Contract
- Underneath: native, plus a hook that lays the lines out with pretext (
@chenglou/pretext, loaded when it's needed). - Anatomy:
<p class="ot-wake">holding.ot-wake-plain(the text, always in the flow),.ot-wake-lines(aria-hidden runs, one span per run, shown only while the wake is open) and, withmark,.ot-wake-ring. - A paragraph that parts around your hand like water. A fine pointer (not touch, not reduced motion) opens a circle of
radiusem (3.2) under it; each row the circle crosses is set as two runs, one either side, sharing one cursor through the text, so the words are pushed on rather than hidden. A run too short to read stays empty. - The circle's radius eases in as the pointer arrives and out as it leaves, and it follows the pointer a little behind. The frame loop runs only while something is still moving.
data-liveis set on the paragraph while the wake is drawn; the plain text goes transparent then and stays in the flow, so nothing below it moves. Two lines of room under the paragraph (--ot-wake-room) hold what the circle pushes on. - No shape is drawn by default;
markdraws a hairline ring inside the hole. Touch, keyboard and reduced motion get the plain paragraph, which is also what a screen reader reads. It measures again when its width changes or<html>changes face. variant(data-variant; none for the default,circle):river,caesuraorweight. All keep the plain paragraph for readers, touch, keyboard and reduced motion, and river and caesura are set right to left in a right-to-left paragraph (each run hangs from its end, the first run on the right); weight takes its places from the laid-out text, so it follows any direction.- river: the typesetter's river of white, the fault a compositor spends a career closing, made on purpose. A gutter half the radius wide runs the paragraph's whole height at the hand's x; every row is set as two runs either side of it, sharing one cursor, so the paragraph reads as two columns that follow you from edge to edge.
markdraws a hairline down the middle of the river, the length of the text. - weight: the letterpress's impression, and the heavy condensed roman of "It has to be design.". Nothing parts: the letters within the radius press heavier on the face's weight axis (to 800, cosine falloff,
--tfrom 0 to 1 per letter) and, where the face has a width axis, narrower by as much as the weight widened them (the script finds that width once, per face), so each keeps its set width. The letters are a layer (.ot-wake-lines) placed from the plain text itself, each measured by a range and centred on its own place, so no line reflows; the room under the paragraph is not needed. It rests under a still hand and eases back as the hand leaves.markdraws a hairline ring round the reach. Without a width axis (press) the pressed letters simply crowd. - caesura: the pause in the middle of a verse, a breath where the line allows it. The paragraph opens at the line you point at: the rows above stay, the rows below drop by the breath (the radius, at most the two lines of room), and the line under the hand sits between them, held apart, the share above and below following where on the line the hand is.
marksets a rule in each breath, the held line between two hairlines, as the "Less is more." poster sets its lines.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
children | string | The paragraph, as plain text: pretext measures it. | |
radius | number | 3.2 | How far the text gives way around the pointer, in em. |
mark | boolean | false | Draw a hairline where the text has parted: a ring inside the circle, a hairline down the river, a rule in each breath of the caesura, or a ring round the reach of the weight. |
variant | "circle" | "river" | "caesura" | "weight" | "circle" | The shape of the parting. circle: a hole round your hand, the rows it crosses split in two. river: the typesetter's river of white, made on purpose; a gutter half the radius wide runs the paragraph's whole height at your hand and every row reads across it, so the paragraph becomes two columns that follow you. caesura: the pause in the middle of a verse; the paragraph opens at the line you point at, a breath above it and below, so that line stands alone while you stay, and the paragraph closes as you go (the breath is at most the two lines of room under it). weight: the letterpress's impression; nothing parts, the letters under your hand press heavier on the face's weight axis and, where it has a width axis, narrower by as much, so each keeps its set width and no line moves; they rest when your hand is still and ease back as it leaves. |
Craft
Where its move comes from
| Component | Reference | Move |
|---|---|---|
| Wake | Water parting round a hand; Eclipse's one soft side | The paragraph parts round the pointer and the words move on |
| River wake | The typesetter's river of white; "Less is more." hairline columns | A gutter down the whole paragraph that follows your hand |
| Caesura wake | The caesura in verse and song; "Less is more." lines between hairlines | The line you point at is held apart, a breath above and below |
| Weight wake | The letterpress impression; "It has to be design." heavy condensed roman | Letters under the hand press heavier and narrower, keeping their places |
How it moves
| Component | Articulation | What moves |
|---|---|---|
| Wake | Wake | The text parts around the pointer; the circle swells as you arrive and closes as you leave |
| River wake | Wake | The gutter opens at your hand, follows it across and closes as you leave |
| Caesura wake | Breath | The paragraph opens at your line and follows you down it, closing as you leave |
| Weight wake | Press | The weight swells under your hand and follows it, rests when you are still, eases back as you leave |