Chapter 636: createRoundedTextBox()

Core Idea

_Part of the @remotion/rounded-text-box package.

Key Concepts

• Usage Example
• API
• textMeasurements
• textAlign
• horizontalPadding
• borderRadius
• Return value
• d

Code Examples

const maxLines = 3;
const fontFamily = 'Figtree';
const fontWeight = '700';
const horizontalPadding = 20;
const borderRadius = 20;
const fontSize = 36;
const lineHeight = 1.5;
const textAlign = 'center';

const lines = ['Hello World', 'This is a test', 'This is another test'];

const textMeasurements = lines.map((t) =>
  measureText({
    text: t,
    fontFamily,
    fontSize,
    additionalStyles: {
      lineHeight,
    },
    fontVariantNumeric: 'normal',
    fontWeight,
    letterSpacing: 'normal',
    textTransform: 'none',
    validateFontIsLoaded: true,
  }),
);

const {d, boundingBox} = createRoundedTextBox({
  textMeasurements,
  textAlign,
  horizontalPadding,
  borderRadius,
});

const markup = (
  <div
    style={{
      width: boundingBox.width,
      height: boundingBox.height,
    }}
  >
    <svg
      viewBox={boundingBox.viewBox}
      style={{
        position: 'absolute',
        width: boundingBox.width,
        height: boundingBox.height,
        overflow: 'visible',
      }}
    >
      <path fill="white" d={d} />
    </svg>
    <div style={{position: 'relative'}}>
      {lines.map((line, i) => (
        <div
          key={i}
          style={{
            fontSize,
            fontWeight,
            fontFamily,
            lineHeight,
            textAlign,
            paddingLeft: horizontalPadding,
            paddingRight: horizontalPadding,
        
// ...(truncated)

• What it demonstrates: Usage pattern for createRoundedTextBox() from the official docs.

Key Takeaways

1. Understand usage example when working with createRoundedTextBox().
2. Understand api when working with createRoundedTextBox().
3. Understand textmeasurements when working with createRoundedTextBox().
4. Understand textalign when working with createRoundedTextBox().
5. Understand horizontalpadding when working with createRoundedTextBox().

Connects To

• Animated Emoji: related page in the Effects Library section.
• get Available Emoji: related page in the Effects Library section.
• api: related page in the Effects Library section.