# Spotlight and callouts

Measured attention overlays follow targets through stage scaling.

Source: https://legend.so/slides/effects/spotlight/

Legend Slides: Preview.

Spotlight moves between targets in discrete jumps.

[All effects](https://legend.so/slides/effects/)

![Spotlight and callouts in Legend Slides](https://legend.so/slides/effects/previews/spotlight/a5a8d87d09af7b71ea8311ea6fad54858b66f0b2e64b5ab18492763310ac3c7c.png)

Captured in Legend Slides for macOS (release build).

[Install in Slides](legend-slides://effects/install?pack=presenting&version=1.0.5) [Open example](legend-slides://effects/example?effect=spotlight) [Download example](https://legend.so/slides/effects/examples/spotlight/2df6025975d253d658aeda0b73ec62139f4e657fa10dd3e624e215e3931c10fb.mdx)

Requires a Legend Slides build with effect installation support. Installs the presenting pack (1.0.5, 22 KB source) and its dependencies. macOS host capabilities: reanimated, skia. Installed decks work offline.

## Use it in a deck

spotlight.mdx

```mdx
---
title: Spotlight and callouts
---

import { View, Text } from "react-native";
import { AttentionStage, AttentionTarget, Spotlight, Callout } from "slides:presenting/Attention";
import { useMotion } from "slides:presenting/Motion";

export function MovingIdea({ step }) {
  const position = useMotion(step === 1 ? [950, 300] : [150, 160], 1200);
  return <AttentionTarget id="idea" style={{ position: "absolute" }} frameStyle={() => { "worklet"; return { transform: [{ translateX: position.value[0] }, { translateY: position.value[1] }] }; }}><Text style={{ color: "white", fontSize: 90 }}>The idea</Text></AttentionTarget>;
}

# Spotlight and callouts

<View style={{ width: 1696, height: 650 }}>
<Steps count={3}>{step => <AttentionStage style={{ width: 1696, height: 580 }}><MovingIdea step={step} /><Spotlight target="idea" /><Callout target="idea">Follow the idea</Callout></AttentionStage>}</Steps>
</View>
```

## Configure

**target**

Use an AttentionTarget ID.

**padding / darkness**

Control the spotlight cutout and dimming.

Only imported effects enter the compiled deck. [Installation and versioning →](https://legend.so/slides/effects/installation/)

[View Markdown](https://legend.so/slides/effects/spotlight.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Spotlight+and+callouts&body=Page%3A+https%3A%2F%2Flegend.so%2Fslides%2Feffects%2Fspotlight%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)