ns-ui

Textarea Autosize Swell

An autosize textarea that grows like dough proofing instead of reflowing like a spreadsheet cell: ordinary typing raises it line by line with a soft 180ms swell, a large paste breathes open over 400ms in one continuous motion instead of popping, and deleting text back down is slower still (320ms) so the surface never snaps under the cursor.

Use when any multi-line text input that should grow with its content — comment boxes, descriptions, chat composers — where the growth itself should read as organic and asymmetric (slower to shrink than to grow, a big paste breathing open rather than popping) instead of the ecosystem-default instant reflow of react-textarea-autosize.

Install

npx shadcn add https://design.helpmarq.com/r/textarea-autosize-swell.json
  • textarea
  • input
  • form
  • autosize
  • comment-box
  • chat-composer
  • micro-interaction
  • accessibility

ns-ui / textarea-autosize-swell

It rises like it's proofing.

Type and it swells open line by line. Paste a paragraph and it takes one slow continuous breath instead of popping open. Delete it back down and the fall is slower still, so nothing ever snaps under the cursor.

grows in 180ms, shrinks in 320ms, a big paste breathes open over 400ms — same curve, three different weights