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
freeze-frame.mdx
---
title: Freeze and annotate
---
import { View, Text } from "react-native";
import { FreezeFrame } from "slides:presenting/FreezeFrame";
import Animated, { useAnimatedStyle } from "react-native-reanimated";
export function Orbit({time}) { const style = useAnimatedStyle(() => ({transform: [{translateX: 600 + Math.sin(time.value) * 300},{translateY: 220 + Math.cos(time.value) * 100}]})); return <View style={{width: 1696,height: 650}}><Animated.View style={[{width: 100,height: 100,borderRadius: 50,backgroundColor: "#67e8f9"},style]} /></View>; }
# Freeze and annotate
<View style={{ width: 1696, height: 650 }}>
<Steps count={2}>{step => <FreezeFrame paused={step > 0} annotation={<Text style={{color: "white",fontSize: 48}}>Pause to explain this frame</Text>}>{time => <Orbit time={time} />}</FreezeFrame>}</Steps>
</View>
Configure
paused
Pause the supplied clock.
children
Feed the supplied shared seconds to your animation.
