createRoundedTextBox()

import {fitTextOnNLines, measureText} from '@remotion/layout-utils';
import {createRoundedTextBox} from '@remotion/rounded-text-box';

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,
            color: 'black',
          }}
        >
          {line}
        </div>
      ))}
    </div>
  </div>
);