Rendley docs

Text

The TextClip renders text directly on the canvas. It supports font selection, color, stroke, drop shadow, letter spacing, line height, and more.

Create a Text Clip

Runnable example 
const textClip = await layer.addClip({
  type: "text",
  text: "Hello World",
  startTime: 0,
  duration: 5,
  style: {
    fontSize: 120,
    color: "#FFFFFF",
  },
});

textClip.style.setPosition(960, 540);

Change the Text

textClip.setText("New Text");
const current = textClip.getText();

Background Color

The text clip supports a solid background that sits behind the text:

textClip.style.setBackgroundColor("#0000FF");

Typography

The TextStyle exposes additional controls for typography:

textClip.style.setFontFamily("Inter");
textClip.style.setFontWeight("700");
textClip.style.setLetterSpacing(2);
textClip.style.setLineHeight(1.5);
textClip.style.setStrokeColor("#000000");
textClip.style.setStrokeThickness(2);
textClip.style.setPadding(10);

Custom fonts must be loaded through the FontRegistry before you can use them here.

Resizing Text

Text clips have two independent ways to change size:

  • style.setFontSize(px): changes the glyph size. Re-rasterizes the text, so edges stay crisp.
  • style.setScale(scaleX, scaleY): scales the rendered clip uniformly. Cheaper if you want to animate size (scale can be keyframed without re-rasterizing on every frame).

Use setFontSize for static sizing and final layout. Use setScale when you’re animating or responding to the canvas size at runtime.

Runnable example 
const textClip = await layer.addClip({
  type: "text",
  text: "Resize me",
  startTime: 0,
  duration: 5,
  style: { fontSize: 60, color: "#FFFFFF" },
});
textClip.style.setPosition(960, 540);

// Grow the font size and then scale further. Both stack.
textClip.style.setFontSize(200);
textClip.style.setScale(1.2, 1.2);

To animate the size over time, keyframe scaleX and scaleY through the Property Animator, don’t animate fontSize per frame; it’s not an animatable property and would re-rasterize constantly.

Drop Shadow

Runnable example 
const textClip = await layer.addClip({
  type: "text",
  text: "Drop Shadow",
  startTime: 0,
  duration: 5,
  style: { fontSize: 160, color: "#FFFFFF" },
});
textClip.style.setPosition(960, 540);

textClip.style.setDropShadowColor("#000000");
textClip.style.setDropShadowAlpha(0.6);
textClip.style.setDropShadowBlur(8);
textClip.style.setDropShadowDistance(10);
textClip.style.setDropShadowAngle(Math.PI / 4);

See Also