Pill max radius
A chat composer is a pill while it's one line tall. Give it a max radius and, as it grows,
its corners stay as round as they were: a rounded rectangle with the pill's own corners,
not a fat blob. Every composer below is
squircle-pill border border-zinc-300 bg-white, under a max radius the controls set on the
page root, as squircle-pill-max-[25px] would. Switch modes
to compare how each is drawn; each loads the page afresh. With no shaping, the fallback is
the rounded rectangle "Show fallback" outlines.
Drawn by …
The composer
Type a few lines, or paste a paragraph, and watch it grow.
Field × actions
An input and a two-line textarea, with no actions, a Send pill, and icon buttons before it. The one-line composers are the pills they always were; the textareas keep those corners.
No actions
Send
Icons and Send
Grown textarea
Three lines in, with the actions at the end of the last line. Without a max radius the caps grow with the height, and the corners swallow the text.
squircle-pill-max-none: the same composer with no limit, as it was before. Stack
The field over a row holding a Model chip, with Send in a column of its own. Two rows tall before anything is typed, so a plain pill would already be a blob.
Height scrubber
One composer swept from one line to five, smoothly rather than a line at a time, so the growth between steps shows: the corners round out until they reach the max radius, then hold while the edges lengthen.