How do you make a pill shape keep its pill shape when changing sizes?

The "pill shape" is an exceptionally common design for text backgrounds (including the buttons used on this forum!)


Motion comes with a Pill shape in the Shapes library. It is basically a rectangle that's 378 pixels wide by 100 pixels high, with the Roundness set to 29 and Preserve Scale set.


How can the pill shape be made adaptable to resizing text or just resizing the Rectangle's height without creating a distortion of the roundness of the rectangle without manually adjusting the Roundness parameter?


(There were over 850 views on a related post and nobody even bothered to ask this question. I'm guessing that means that everybody knows how to handle this situation and I'm looking forward to see how everyone handles it!)






Posted on Jan 24, 2026 5:44 PM

Reply
Question marked as Top-ranking reply

Posted on Jan 29, 2026 8:15 PM

Hi Luis,


Thank you for responding! I've been trying different ways to try and keep this forum from languishing... and, I'm failing miserably. I thought this topic would spur more interest — the "pill shape" is probably one of the *most* commonly used text backgrounds. How cool would it be to be able to automate it?!? Well, it turns out that *one* solution is SURPRISINGLY...ASTOUNDINGLY simple!


Here it is:


To a Rectangle, add a Link Behavior to the Roundness.

To the Source Parameter of the Link, Add the Rectangle. [Name it RndByHt or whatever want]

Select Object > Shape > Size Height.

To the RndByHt > Scale parameter, type in 3.1416* (π).


Done. That's the basic project.





(A discussion of the explanation will be considerably more... involved. For example, why can't we simply type in 31.416 for the Roundness and resize the default provided Pill Shape by scaling? Why PI and not the original 29? Stuff like that.)


As an *alternative*:


To the Rectangle:

Add Filters > Distortion > Twirl. Set the Mix to 0. Leave Twirl at 180º.

Add a Link Behavior to the Roundness (again, named RndByHt).

Add a Link to the RndByHt > Scale.

To the Source Parameter, Add the Rectangle.

Select Filters > Twirl > Twirl. [*Provides a 15 place decimal accuracy for PI (see below)].


[This option provides an OSC to control the Roundness — should be clamped between 0 and 180 degrees.]




One rule: Width must be greater than Height for the Rectangle. (Width = Height will be a Circle) otherwise the semi-circular roundness will begin to "collapse".


So why is this simple little experiment important?


It shows that seeming limitations in the UI can be gotten around. The Roundness parameter — in particular — doesn't allow decimal values to be entered directly (you can't even type in a period character!) yet it can maintain a 15 decimal precision value using behaviors. Motion isn't as "crippled" as most people think (especially when comparing it to AE, etc.)


While some parameters are displayed in one unit (example: Twirl displays in degrees), behind the scenes it is actually some other unit (radians) and it is this understanding that allows for more powerful mathematical "expressions" can be built instead of manually setting or keyframing "everything".


——————————

*15 digits of PI = 3.141592653589793 which can be copied from the Calculator App that comes with MacOS and pasted into the parameter "slot". Motion ONLY EVER displays 4 decimal places (rounded) for most parameters but WILL MAINTAIN the full 15 decimal place entry (with a caveat: if, after a value has been Entered, it is re-selected and Enter typed again, Motion WILL round to 4 places regardless.] (How do I know this?)

——————————


It is my hope that this *"simple"* little project will open a door (and minds) to a whole new way of looking at Motion and inspire more interest.




2 replies
Question marked as Top-ranking reply

Jan 29, 2026 8:15 PM in response to Luis Sequeira1

Hi Luis,


Thank you for responding! I've been trying different ways to try and keep this forum from languishing... and, I'm failing miserably. I thought this topic would spur more interest — the "pill shape" is probably one of the *most* commonly used text backgrounds. How cool would it be to be able to automate it?!? Well, it turns out that *one* solution is SURPRISINGLY...ASTOUNDINGLY simple!


Here it is:


To a Rectangle, add a Link Behavior to the Roundness.

To the Source Parameter of the Link, Add the Rectangle. [Name it RndByHt or whatever want]

Select Object > Shape > Size Height.

To the RndByHt > Scale parameter, type in 3.1416* (π).


Done. That's the basic project.





(A discussion of the explanation will be considerably more... involved. For example, why can't we simply type in 31.416 for the Roundness and resize the default provided Pill Shape by scaling? Why PI and not the original 29? Stuff like that.)


As an *alternative*:


To the Rectangle:

Add Filters > Distortion > Twirl. Set the Mix to 0. Leave Twirl at 180º.

Add a Link Behavior to the Roundness (again, named RndByHt).

Add a Link to the RndByHt > Scale.

To the Source Parameter, Add the Rectangle.

Select Filters > Twirl > Twirl. [*Provides a 15 place decimal accuracy for PI (see below)].


[This option provides an OSC to control the Roundness — should be clamped between 0 and 180 degrees.]




One rule: Width must be greater than Height for the Rectangle. (Width = Height will be a Circle) otherwise the semi-circular roundness will begin to "collapse".


So why is this simple little experiment important?


It shows that seeming limitations in the UI can be gotten around. The Roundness parameter — in particular — doesn't allow decimal values to be entered directly (you can't even type in a period character!) yet it can maintain a 15 decimal precision value using behaviors. Motion isn't as "crippled" as most people think (especially when comparing it to AE, etc.)


While some parameters are displayed in one unit (example: Twirl displays in degrees), behind the scenes it is actually some other unit (radians) and it is this understanding that allows for more powerful mathematical "expressions" can be built instead of manually setting or keyframing "everything".


——————————

*15 digits of PI = 3.141592653589793 which can be copied from the Calculator App that comes with MacOS and pasted into the parameter "slot". Motion ONLY EVER displays 4 decimal places (rounded) for most parameters but WILL MAINTAIN the full 15 decimal place entry (with a caveat: if, after a value has been Entered, it is re-selected and Enter typed again, Motion WILL round to 4 places regardless.] (How do I know this?)

——————————


It is my hope that this *"simple"* little project will open a door (and minds) to a whole new way of looking at Motion and inspire more interest.




How do you make a pill shape keep its pill shape when changing sizes?

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple Account.