Exploded Layers

Prepared image layers pulled apart with captions. Free, MIT · Content and social › Interactive explainers

Prepared image layers that line up into one object and pull apart along a common axis with a slider: captions appear once the stack opens, a part is picked on the picture or in the text list, and its description shows next to the scene. Motion is CSS transforms of the same images (none under reduced motion); a missing image is marked while the other parts keep working.

Installation

npx valyro-cli@latest add exploded-layers

npx shadcn@latest add https://valyro.xyz/r/exploded-layers.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ExplodedLayers } from 'valyro-ui';

Props

Prop	Type	Default
`layers` *	`ExplodedLayer[]`		Layers from bottom to top. Every image shares the canvas, so they line up when assembled.
`canvasSize` *	`{ width: number; height: number }`		Size of the common canvas of the sources; it reserves the scene's space before the images load.
`separation`	`number`		How far the stack is opened, 0 (assembled) … 1.
`defaultSeparation`	`number`	`0`	Initial `separation` when uncontrolled.
`onSeparationChange`	`(value: number) => void`		Called with the new `separation` when it changes.
`selectedId`	`string \| null`		Id of the selected layer, or null.
`defaultSelectedId`	`string \| null`	`null`	Initial `selectedId` when uncontrolled.
`onSelectedIdChange`	`(id: string \| null) => void`		Called with the new `selectedId` when it changes.
`angle`	`LayerAngle`	`DEFAULT_ANGLE`	Tilt of the opened scene in degrees: `x` tips it back, `y` turns it. Default `{ x: 55, y: -30 }`.
`labels`	`Partial<ExplodedLayersLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Feature Hotspots — Numbered points on an image that open a note about each detail
Prediction Card — The reader guesses first, then sees the answer and the explanation
Detail Dial — Choose how deep an explanation goes: short, detailed or full
Version Scrubber — Step through prepared versions of a design with one slider
Page Minimap — Schematic map of a long page with the visible area
Article Header — Article header: section, headline, lede, authors and date
Byline — Byline: authors, published and updated dates, reading time
Article Figure — Image with caption and photo credit
Pull Quote — Pull quote with attribution
Key Points — “Key points” summary block
Editor Note — Update, correction, disclosure and sponsored-content notes
Article Toc — Article table of contents that tracks the current section

Previous: Feature Hotspots · Next: Prediction Card · All Content and social