Spotlight

Spotlight dims the full slide except for one rectangular focus region. It is useful for walking through a diagram, interface, or sequence one area at a time.

import { Anchor, Animate, FadeIn, Spotlight, Slide } from "presenter";
const spotlight = Spotlight({  x: 820,  y: 1080,  width: 900,  height: 810,  anchor: Anchor.CENTER,  cornerRadius: 85,  opacity: 0,});
const slide = Slide({  // Put the spotlight after the content it dims  objects: [...cards, spotlight],  animations: [    FadeIn(spotlight),    Animate(spotlight, { x: 1920 }),    Animate(spotlight, { x: 3020 }),  ],});

Set the clear region with x, y, width, height, and anchor. cornerRadius rounds its corners. The alpha channel of color determines how strongly the rest of the slide is dimmed:

Spotlight({
  color: Color(0, 0, 0, 0.75),
});

Place the spotlight after the content it should dim in the slide's objects array. Animate its position and dimensions to move focus between targets, or animate opacity to reveal and dismiss the entire effect.

The full list of available Spotlight properties is below:

Property	Type	Description	Default
anchor	Anchor	Defines which point of spotlight area sits at (x, y)	Anchor.TOP_LEFT
cornerRadius	number	Amount of corner rounding on spotlight area, in pixels	50
description	string | null	Accessible description of spotlight	null
height	number	Height of spotlight area, in pixels	200
color	Color	Color of dimmed region	Color(0, 0, 0, 0.8)
opacity	number	Opacity of dimmed region	1
width	number	Width of spotlight area, in pixels	200
x	number	Horizontal position of spotlight area	0
y	number	Vertical position of spotlight area	0