Component shape/cutout

Component ID: shape/cutout

Creates an animated SVG mask that reveals or hides a background image through a cutout shape. The cutout shape (circle, ellipse, polygon, rect) can animate to grow, shrink, or move, revealing the background content beneath. Supports stroke borders around the cutout. Perfect for creative reveal effects, spotlight animations, or masked image transitions.

Section	Animated geometric shapes, rectangles, polygons, cutouts, and custom HTML/SVG
Animation	Cutout shape properties animate from initial to target values (center position, radius, size) with configurable duration and easing.
Intro duration	5 s

Preview

Element schema

Minimal shape of a shape/cutout component element:

{
    "type": "component",
    "component": "shape/cutout",
    "settings": {}
}

See the full component element reference for shared properties like duration, start, x, y, etc.

Settings

The settings property accepts the following groups. Each group contains CSS-like properties; see component CSS properties for the full list of supported keys.

`background`

Background image behind the mask.

Property	Type	Default	Description
`background-image`	string	—	Background image URL.
`background-size`	string	`cover`	Background size.

`cutout`

The mask cutout shape and animation.

Property	Type	Default	Description
`shape`	string (enum)	`ellipse`	SVG shape type. Values: `circle`, `ellipse`, `rect`, `polygon`
`center-x`	string	—	Shape center X position (e.g. '50%').
`center-y`	string	—	Shape center Y position.
`radius-x`	string	—	Horizontal radius (for ellipse).
`radius-y`	string	—	Vertical radius (for ellipse).
`radius`	string	—	Radius (for circle).
`stroke`	string	—	Stroke color around cutout.
`stroke-width`	string	—	Stroke width.
`animate`	object	—	Animation targets (e.g. radius-x, radius-y, center-x) + duration, easing.