Mask

A Mask clips its child objects to a rectangular region. Content inside the region is visible; content outside it is hidden.

import { Anchor, Animate, Circle, Color, Mask, Slide } from "presenter";
const circle = Circle({  x: 900,  y: 1080,  radius: 620,  anchor: Anchor.CENTER,  fillColor: Color("#60a5fa"),});
const mask = Mask([circle], {  x: 1920,  y: 1080,  width: 1900,  height: 900,  anchor: Anchor.CENTER,});
const slide = Slide({  objects: [mask, /* ... other objects ... */],  animations: [    Animate(circle, { x: 2940 }),  ],});

The mask's x, y, width, height, and anchor define the clipping rectangle. Child coordinates remain in slide space—they are not made relative to the mask.

Add the mask to the slide's objects array instead of adding its children separately. You can still keep and animate each child's original reference.

Set preview: true while developing to draw the mask boundary, then remove it for the final presentation.

The full list of available Mask properties is below:

Property	Type	Description	Default
anchor	Anchor	Defines which point of clipping rectangle sits at (x, y)	Anchor.TOP_LEFT
description	string | null	Accessible description of mask	null
height	number	Height of clipping rectangle, in pixels	100
objects	SlideObject[]	Objects to mask	none, provided as first argument to constructor
opacity	number	Opacity of masked objects	1
preview	boolean	Debugging flag that previews mask shape	false
width	number	Width of clipping rectangle, in pixels	100
x	number	Horizontal position of clipping rectangle	0
y	number	Vertical position of clipping rectangle	0