Dissolve Input

A field that lets its words go when it’s cleared, one at a time, each blurring, rising and fading.

Type, then clear it

Usage

import { DissolveInput } from '@wdzyi/ui';

<DissolveInput label='Note' placeholder='Write a note' value={note} onChange={setNote} />

Part of @wdzyi/ui. See setup to install it, or copy the code above.

labelstring: Names the field for screen readers.
value, defaultValue, onChangestring, string, (value: string) => void: Hold the value yourself, or let the field hold it.
onClear() => void: Called once it has emptied.
placeholder, namestring: Passed to the input.

A copy of the text is laid exactly over the field, at its size and scroll, and does the moving while the field’s own text is hidden, so nothing jumps as it starts.
Words leave 60ms apart, left to right, each drifting a little to one side. A long note shares 560ms between them, so it never takes much over a second.
The field only empties once the last word has gone, and can’t be typed in until then. Escape clears it too, and focus stays in the field.
With reduced motion, it empties at once.