Layer Stack
A screen pulled apart into its layers, from the grid up to the one thing that matters on it.
Usage
import { LayerStack } from '@wdzyi/ui';
<div style={{ position: 'relative', aspectRatio: '4 / 3' }}>
<LayerStack on={hovered} />
</div>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- onboolean = false
- Pulls the layers apart, and brings them back when it goes off.
Notes
- It fills its nearest positioned parent and keeps its proportions in a box of any shape, so it needs no sizes of its own.
- The layers leave a few milliseconds apart, top first, so the stack opens rather than jumps.
- With reduced motion, it changes without the glide.