# Image shatter

Reveal an image, then break it into falling pieces.

Source: https://legend.so/slides/effects/image-shatter/

Legend Slides: Preview.

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

[Image shatter preview](https://legend.so/slides/effects/previews/image-shatter/612a8c489c0f9e24160df82bd3bb13869059e8795332db67418a85b222f882b6.mp4)

Video recorded in Legend Slides for macOS (development build).

[Install in Slides](legend-slides://effects/install?pack=materials&version=1.0.0)[Open example in Slides](legend-slides://effects/example?effect=image-shatter)[Download example](https://legend.so/slides/effects/examples/image-shatter/15cff3df3e7c428c6d8f907f40b35429f2c9acb32341ca3185819d63e7790c5b.mdx)

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

## Use it in a deck

```mdx
---
title: Image shatter
---

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


# Image shatter

<View style={{ width: 1696, height: 650 }}>
<Steps count={3}>{step => <ImageShatter source={"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAACgCAIAAABseyVrAAADvElEQVR4nO3ZsY3cMBCG0evAoXtwBa7LHRhw6HouO8BFOVgYF7iA1UqUOENSmAd88ehn8CK9ffn6TSrb2/QF0sQAUOkAUOkAUOkAUOkAUOkAUOkAUOkAUOkAUOkAUOkAUOm6AHz/eEypZ/PP348p9Wz+8+tzSj2b//54nxIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBxj3+f+y0I4HDzggAONy8I4HDzvQEcPu8sgwEATm1eBMCpzYsAOLX5lgBOvbDRQDaAC5unA7iweTqAC5vvBODC8xoZ5AHo3DwFQOfmKQA6N98AQOcL9w0kAQjZPBhAyObBAEI2AwAAAKsCCHnhjoEMAIGbhwEI3DwMQODmRQEEvvCVgXAA4ZsHAAjfPABA+GYAAABgJQDhL9w0EAsgaXMqgKTNqQCSNgMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAJoAMA8+fiAWQYeD5E7EAMgw8fyIWQIaB508AAAAAUwHEGti8Hw4g1sDm/XAAsQY274cDiDWweX8JAFEGXh3PABBl4NXxDABRBl4dzwAQZeDVcQAAAGABAP0Gdi4nAeg3sHM5CUC/gZ3LSQD6DexcXgjAZQaHN/MAXGZweDMPwGUGhzfzAFxmcHhzOQBnDbQczAZw1kDLwWwAZw20HMwGcNZAy8EVATQyaD81AEAjg/ZTAwA0Mmg/NQBAI4P2U+sCCGwYgMCGAQhsGIDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACoDkO4eACodACodACodACodACodACodACodACqdP8H+BPsTDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADUBiDdPQBUOgBUOgBUOgBUOgBUOgBUOv8B/AfwHwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADghgCkuweASgeASgeASgeASgeASgeASgeASgeASgeASgeASgeASvcfT6aDDVH/LJsAAAAASUVORK5CYII="} width={1696} height={650} revealAtStep={1} geometry={{imageWidth: 900,imageHeight: 500,centerX: 848,centerY: 325,scale: 1}} />}</Steps>
</View>
```

## Configure

**source**

Supply an image URI.

**revealAtStep**

Reveal on this step and shatter on the next.

**geometry**

Supply image size, position, scale and radius.

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

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