Ink Print
When it scrolls into view, each word comes up through a blue-noise stipple, the grain filling in until the letters are solid, sweeping along the line word by word, with a soft spread while the ink is wet that dries as each word finishes. It's the real text all along, selectable and found by search and screen readers; only a mask is printing it. Set it in any element.
Needs: None. A CSS mask.
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | The text. |
| as | string | "\"span\"" | The element it's set in: h1, p, span… |
| duration | number | 1.4 | Seconds the whole line takes to print. |
| cell | number | 2 | Size of one dither cell in px: the print's grain. |
| trigger | "view" | "mount" | "\"view\"" | Print on scrolling into view, or straight away. |
| wet | boolean | true | A soft spread on the ink while it's wet. |
| className | string | – | Class on the text. |
| style | CSSProperties | – | Style on the text. |