Exploded Layers

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

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';

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.

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