Rendley docs

Styling

Every clip that contains a sprite (has visuals, clip.hasSprite()) exposes its visual state through the style property, an instance of ClipStyle. For text and shape clips, the style also includes type-specific fields (font, fill color, stroke). This page covers the shared controls. See TextStyle and ShapeStyle for type-specific extras.

You can apply style on creation or update it later on an existing clip.

Position

setPosition(x, y) moves a clip on the canvas. Coordinates are in pixels, with the origin at the top-left of the display (the default 1920×1080 canvas centers at (960, 540)).

Runnable example 
const clip = await layer.addClip({
  type: "shape",
  shape: "rectangle",
  startTime: 0,
  duration: 5,
  style: { fillColor: "#6d6ff2", width: 300, height: 300 },
});

clip.style.setPosition(960, 540); // center of a 1920x1080 canvas

Scale

setScale(scaleX, scaleY) multiplies the clip’s size. 1 is natural size; 2 doubles it. X and Y scale independently, so you can stretch a clip asymmetrically.

Runnable example 
const clip = await layer.addClip({
  type: "shape",
  shape: "circle",
  startTime: 0,
  duration: 5,
  style: { fillColor: "#FF4D6D", width: 200, height: 200 },
});
clip.style.setPosition(960, 540);

clip.style.setScale(2, 1); // stretch horizontally

Rotation

setRotation(radians) rotates the clip around its center. Positive values rotate clockwise.

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

clip.style.setRotation(Math.PI / 8); // 22.5 degrees

Alpha (Opacity)

setAlpha(value) sets the opacity. 1 is fully opaque, 0 is invisible.

Runnable example 
const clip = await layer.addClip({
  type: "shape",
  shape: "rectangle",
  startTime: 0,
  duration: 5,
  style: { fillColor: "#6d6ff2", width: 600, height: 300 },
});
clip.style.setPosition(960, 540);

clip.style.setAlpha(0.4);

Corner Radius

setCornerRadius([tl, tr, br, bl]) rounds the corners of a clip (media clips and shapes). The tuple order goes clockwise from the top-left corner.

Runnable example 
const clip = await layer.addClip({
  type: "shape",
  shape: "rectangle",
  startTime: 0,
  duration: 5,
  style: { fillColor: "#6d6ff2", width: 600, height: 300 },
});
clip.style.setPosition(960, 540);

clip.style.setCornerRadius([60, 60, 60, 60]);

Pass a single number to round all four corners equally:

clip.style.setCornerRadius(60);

Relative Corner Radius

By default, the corner radius is in absolute pixels. Pass true as the second argument to make the radius scale with the clip:

clip.style.setCornerRadius([0.5, 0.5, 0.5, 0.5], true); // fully circular

Size

Clip size is determined by the source width and height and the clip’s scale. Use setSize to set an absolute size; the scale is computed automatically.

clip.style.setSize(400, 200);
const [w, h] = clip.style.getSize();

Setting Style at Creation

Every controller has a corresponding option on addClip so you can configure a clip in one call:

const clip = await layer.addClip({
  type: "text",
  text: "Hello",
  startTime: 0,
  duration: 3,
  style: {
    fontSize: 120,
    color: "#FF4D6D",
    position: [960, 540],
    rotation: 0.1,
    alpha: 0.9,
  },
});

Animating Style

Most of the proeprties documented above are animatable through the Property Animator. The track keys match the method names without set: positionX, positionY, scaleX, scaleY, rotation, alpha, cornerRadius.

Use getRegisteredProperties method to get a description of the properties that can be animated.

Runnable example 
const clip = await layer.addClip({
  type: "shape",
  shape: "circle",
  startTime: 0,
  duration: 3,
  style: { fillColor: "#FF4D6D", width: 200, height: 200 },
});
clip.style.setPosition(960, 540);

clip.propertyAnimator.addKeyframe("rotation", 0, 0);
clip.propertyAnimator.addKeyframe("rotation", 3, Math.PI * 2);

See Also