Soft Type
Lettering you type into. Each character is traced from Nunito Black down to its centreline and rebuilt as a chain of particles, so letters press against each other, stretch when you drag them, and pop when you press and hold. The tracing works on any glyph the device can draw, from Latin and Cyrillic to Han and Hangul, and every counter stays open because each letter's pen only fattens until a hole would close. Emoji become soft circles. Canvas 2D, no dependencies.
npx shadcn@latest add @compronents/soft-typeInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | "BLANK" | Starting text when uncontrolled. |
| value / onValueChange | string / (value: string) => void | — | Controlled text and its change callback. |
| maxLength | number | 64 | Longest text in graphemes (user-perceived characters). |
| ink | string | "#000000" | Letter colour. |
| paper | string | "#ffffff" | Background, and the thin rim that keeps touching letters apart. |
| weight | number | 1.2 | Pen weight relative to the font's own. Each letter stops where its counters would close. |
| squeeze | number | 1.05 | How much larger than their slots letters are built, so they sit pressed together. |
| breakWords | boolean | true | Allow breaking a word between letters when keeping it whole would make the letters 40% smaller or more, as in narrow boxes. |
| sound | boolean | true | Pop and typing sounds. |
| fontFamily / fontWeight | string / number | "Nunito", ui-rounded, system-ui, sans-serif / 1000 | Face the letters are traced from. A heavy rounded face gives the cleanest centrelines. |
| loadFont | boolean | true | Load Nunito from Google Fonts. Turn off when the font is already on the page. |
| autoFocus | boolean | false | Focus the hidden input on mount. |
| label | string | "Type to change the letters" | Accessible name for the text input. |
defaultValuetextStarting text. Visitors replace it by typing.
ink / papercolorLetter colour and background.
weightsliderHow far pens fatten beyond the font, capped per letter.
squeezesliderHow tightly letters press against each other at rest.