---
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>