Skip to content

Text and layout in a rendered frame

A Motion guide for coding agents. Also covers measureText, text is clipped, word cut off, letters missing at the end, animated word swap, word rotator, and 11 more.

Show all 17 aliases

measureText, text is clipped, word cut off, letters missing at the end, animated word swap, word rotator, text width animation, pill grows and shrinks, headline wraps for no reason, flex column shrink wrap, clip-path cuts my text, hanging punctuation, optical centering, arrow not centered in circle, cursor drifts during zoom, cursor in wrong place, text jumps when content changes

Every trap below cost real time on a real video, and every fix was confirmed against a rendered frame rather than reasoned about.

Measure inside render, never at module scope

  • measureText at module scope returns fallback metrics, because the webfont has not loaded when modules evaluate. The number is wrong and it is wrong silently
  • Symptom: a word clipped mid-letter. "screen" rendered as "screer"
  • Fix: call it inside the component, on every render. It is cheap next to being wrong

A slot that holds swapping words

  • If the slot width interpolates continuously while the words swap in discrete steps, the box narrows mid-swap and clips whatever is still on screen
  • Hold the wider of the outgoing and incoming pair for the length of the roll, then ease down to the final width once the swap has finished
  • A fixed-width slot beside a centred phrase drags that phrase left and right on every swap. Pin the phrase, let the slot grow rightward, and nudge the row by about a quarter of the spread so short and long values fall either side of centre
  • Clamp the reveal at frame zero. A slot animating up from nothing shows a sliver of the next word on the very first frame

Layout

  • A flex column shrink-wraps to its widest child, so a headline sitting beside a wide sibling wraps for no visible reason. Give text blocks width: "100%" and whiteSpace: "nowrap" when they must not break
  • clip-path clips to the border box, so a deliberate hanging negative margin gets cut. Optical shifts belong on a wrapper that is not clipped
  • Under text-align: center, a trailing full stop pushes the visible glyphs to the right, not the left. Getting this backwards makes the problem worse. Verify against a frame before committing to an optical nudge
  • An arrow glyph does not sit optically centred inside a circular button, whatever the font metrics say. Draw the arrow as SVG and place it yourself

Anything tracking a moving target

  • A cursor, badge or callout rendered outside a transform drifts off its target the moment the scene zooms or pans
  • It has to live inside the same transform as the thing it points at. Then measure the target's centre once and place it there

Use this guidance in your coding agent

Install the Better Design MCP once. Your agent then loads this page with one call.

get-motion-guide({ topic: "text-and-layout" })
claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer <YOUR_API_KEY>"
Browse related design systems