Components / Text Animations / Wet Ink

Wet Ink

A word written in ink that bleeds into the paper and dries. The ink moves by anisotropic diffusion, ∂u/∂t = ∇·(D∇u) − k·u, with D aligned to a field of paper fibres, so it wicks furthest along the grain; it soaks in faster where the film is thin, which is why the dried rim of every stroke is darker than its middle. The explicit update stays under Δt ≤ h²/4D — break that and the ink does not blur, it explodes. The pen keeps a hand’s pace, slower through heavy strokes and quicker across the gaps, and the word takes as long as an even sweep at the same speed. A resize keeps the word, and a run of changes is written once, when it stops.

Usage

import WetInk from '@/components/wet-ink'

<WetInk text="Morphiq" bleed={0.4} />

Installation

npx shadcn@latest add https://morphiq.prathampatel.design/r/wet-ink.json

Model

∂u/∂t = ∇·(D∇u) − k·u,   Δt ≤ h²/4D

D aligned to the paper fibres · k absorption, faster where the film is thin

Props

Property	Type	Default	Description
`text`	`string`	`'Morphiq'`	The word to write. Also the element's accessible name. A new word is written on a fresh sheet once the old one has cleared; of a run of changes, only the last is written. Under reduced motion each word is shown dry as soon as it is worked out, so a slow run may show the ones between.
`fontFamily`	`string`	`'Georgia, "Times New Roman", serif'`	CSS font family. The word waits for the face to load rather than drying in the fallback.
`fontWeight`	`number \| string`	`400`	CSS font weight.
`fontSize`	`number \| 'auto'`	`'auto'`	px, or 'auto' to fit the box.
`ink`	`string`	`'#1a2340'`	Ink colour, #rrggbb; anything else falls back to the default. A change repaints the word as it stands.
`paper`	`string`	`'#f3eee3'`	Paper colour, #rrggbb; anything else falls back to the default. A change repaints the word as it stands.
`speed`	`number`	`360`	Mean pen speed, px/s: the word takes as long as an even sweep at this speed would. Held to 1 or more, so 0 is a very slow pen, not a stopped one.
`bleed`	`number`	`0.4`	How far ink wicks through the fibres before it dries. 0 is a dry pen; held to 0–8. Acts on ink still wet.
`grain`	`number`	`0`	The paper's machine direction, degrees. Ink bleeds furthest along it.
`cell`	`number`	`2`	px per simulation cell. Smaller is finer and costs more; held to 1–64.
`rhythm`	`number`	`1`	How much the pen keeps a hand's pace — touching down slowly, leaning into heavy strokes, quickening across gaps, easing into the last stroke. 0 sweeps evenly; held to 0–4. The word takes the same time at any value.
`replay`	`unknown`	—	Change to write the word again: what is on the paper clears in a fifth of a second as the new pen touches down. Under reduced motion it is worked out again and shown dry, with nothing seen to move.