Effects
LEGEND APPSPreview
Image shatter
Reveal an image, then break it into falling pieces.
← All effects
Video recorded in Legend Slides for macOS (development build).
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
---
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 →