Effects
LEGEND APPSPreview
Image shatter
Reveal an image, then break it into falling pieces.
All effectsRecorded in Legend Slides for macOS (release build).
Requires a Legend Slides build with effect installation support. Installs the materials pack (1.0.2, 41 KB source) and its dependencies. macOS host capabilities: reanimated, skia, webgpu. Installed decks work offline.
Use it in a deck
image-shatter.mdx
---
title: Image shatter
---
import { View, Text } from "react-native";
import { ImageShatter } from "slides:materials/ImageShatter";
export const poster = "https://legend.so/slides/effects/sprites/3a6256d54ebda659424dbc1c9b1f1be0338004cdf97c30fbe0ff2cb4c74b35d4.png";
# 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>
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 →