Effects
LEGEND APPSPreview

Exploded layers

Reveal and compare caller-supplied content while keeping its state mounted.

All effects
Recorded in Legend Slides for macOS (release build).

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

exploded-layers.mdx
---
title: Exploded layers
---

import { View, Text } from "react-native";
import { ExplodedLayers } from "slides:presenting/Composition";

export const layers = [
  { id: "view", label: "View", content: <Text style={{ color: "white", fontSize: 34 }}>What the user sees</Text>, color: "#155e75" },
  { id: "state", label: "State", content: <Text style={{ color: "white", fontSize: 34 }}>The current model</Text>, color: "#214b74" },
  { id: "data", label: "Data", content: <Text style={{ color: "white", fontSize: 34 }}>Where it comes from</Text>, color: "#312e81" },
];

# Exploded layers

<View style={{ width: 1696, height: 650 }}>
<Steps count={2}>{step => <ExplodedLayers expanded={step > 0} layers={layers} style={{ width: 1696, height: 580 }} />}</Steps>
</View>

Configure

content
Supply the illustrations or React content.
style
Give the composition explicit stage bounds.

Only imported effects enter the compiled deck. Installation and versioning โ†’

More in the presenting pack