ns-ui / input-focus-membrane
The field breathes.
Focus dilates the membrane. Every keystroke sends a pulse around it from the caret. An invalid submit makes it constrict and quiver, a valid one lets it exhale.
ns-ui
Text input whose focus ring is a living membrane: a noise-displaced canvas loop that breathes on idle, dilates on focus, sends a peristaltic pulse from the caret on each keystroke, constricts and quivers on error, and exhales once on valid submit.
Use when a general-purpose text input whose focus ring is a breathing membrane that pulses per keystroke and constricts on error; use for any field needing organic focus/validation feedback, not specifically passwords; pick password-strength-tide instead when the field is a password and the strength reading is the point, or validation-error-summary when the errors belong gathered at the top of a form rather than expressed in the field's own ring.
Install
npx shadcn add https://design.helpmarq.comns-ui / input-focus-membrane
Focus dilates the membrane. Every keystroke sends a pulse around it from the caret. An invalid submit makes it constrict and quiver, a valid one lets it exhale.
| Prop | Type | Default | Description |
|---|---|---|---|
| error? | boolean | false | constricts the membrane -3px, quivers once, blends stroke toward red |
| exhaleKey? | number | 0 | bump after a valid submit to trigger the single 8px exhale |
| className? | string | — | classes for the wrapper; input styling is internal |