Depth Layers
NewPro
A stack of layers, such as an image, a card and text, that shift by different amounts with the pointer or the phone's tilt.
Customize
28px
6°
Idle drift
When to use it
- Key art in the hero of a game or product page
- A feature image that needs more presence than a flat picture
- Campaign or season banners built from separate cut-out layers
Good to know
- Plan
- Pro
- Dependencies
- None beyond React
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 232
Installation
Depth Layers is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy depth-layers.tsx into components/ui.
Usage
import { DepthLayers, DepthLayer } from "@/components/ui/depth-layers";
<DepthLayers strength={28} className="h-96 rounded-3xl">
<DepthLayer depth={-0.8} frame>
<img src="/sky.jpg" alt="" className="size-full object-cover" />
</DepthLayer>
<DepthLayer depth={0.5} className="grid place-items-center">
<div className="rounded-2xl bg-ink-800 p-6">Out now</div>
</DepthLayer>
</DepthLayers>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | DepthLayer elements, from the back to the front. |
| strength | number | 28 | How far a layer at depth 1 shifts, in pixels. |
| tilt | number | 6 | How far the whole stack turns toward the pointer, in degrees. |
| deviceTilt | boolean | true | Follow the phone's tilt where the device has a motion sensor. On iOS the browser asks for permission on the first tap inside the stack. |
| idle | boolean | true | Drift slowly while nothing is steering the stack. |
| className | string | — | Extra classes for the stack. Give it a size. |
| DepthLayer.depth | number | 0 | Distance from the stack's plane: negative is farther, positive is nearer. Usually between -1 and 1. |
| DepthLayer.frame | boolean | false | Stay inside the stack's box and move only the content, for images that must never show a gap at the edge. |