---
title: Image shatter
---

import { View, Text } from "react-native";
import { ImageShatter } from "slides:materials/ImageShatter";

export const poster = "data:image/png;base64,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";

# Image shatter

<View style={{ width: 1696, height: 650 }}>
<Steps count={3}>{step => <ImageShatter source={poster} width={1696} height={650} revealAtStep={1} geometry={{imageWidth: 900,imageHeight: 500,centerX: 848,centerY: 325,scale: 1}} />}</Steps>
</View>