Exploded Layers

Подготовленные слои изображения раздвигаются с подписями. Бесплатно, MIT · Контент и соцсети › Интерактивные объяснения

Установка

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.