MisprintText

Options

ink #36362f

css colour

The plate that is in register. This is the one in normal flow and the one a mouse can select; the other two are decoration.

accent #c44400

css colour

The first plate that is not in register.

second #6f8fae

css colour

The second plate that is not. Two is what makes it read as a press rather than as a drop shadow.

slip 0.045

0 to 0.3

How far a plate slips, in em, so it tracks the type size rather than needing a different number at every heading level. Past about 0.12 the words separate and you are reading three of them.

hold 1.4

0.1 to 10

Seconds a plate holds its position before being knocked. Registration does not drift: a plate sits wrong for a whole run and then moves, so this is a step rather than a speed.

chance 0.55

0 to 1

Share of runs where the plates are actually out. A press that is always wrong is not a press that is nearly right, and at 1 the text never settles.

skew 0.4

0 to 4

How far a slipped plate also turns, in degrees. Small: a plate that is out by a whole degree is a plate that has fallen off.

seed 7

0 to 999

Which runs slip and how far. Change it for a different sequence; the same seed always gives the same one.

What it needs

Dependencies

None at all

Browser

No WebGL

Frame budget

~0.15 ms · 0 context

Pinned to

v0.11.0

• No canvas and no WebGL. Three stacked copies of the text, moved with transforms
• The offset plates use mix-blend-mode: multiply, because overlapping ink is darker than either colour. A channel split goes brighter where the channels meet, which is light rather than ink
• The in-register plate stays in normal flow and is the one that can be selected. The other two are aria-hidden and pointer-events: none
• Offsets are in em, so one setting works at every type size
• Two transforms per frame, composited. Nothing is measured and nothing reflows
• The text is split once, not per frame. Rebuilding it would throw away the layout and make it unselectable