Pointerstable

Diorama

Depth layers that part as the pointer moves, letting you see past the foreground.

Distant subject

Move the pointer to see more of this.

Opticshow strongly depth separates the layers

Parallax46 pxparallax

Foreground blur7 pxblur

Perspective1200 pxperspective

Ease0.110ease

TSX

import { Diorama } from "zerogravity"

<Diorama />

Generated from the controls above. Only props that differ from their defaults are shown.

6 documented props on Diorama
Property	Type	Default	Description
`parallax`	`number`	`46`	Parallax. Range 0 to 140 px.
`blur`	`number`	`7`	Foreground blur. Range 0 to 24 px.
`perspective`	`number`	`1200`	Perspective. Range 400 to 2400 px.
`ease`	`number`	`0.11`	Ease. Range 0.02 to 1.
`background`	`ReactNode`	`—`	The deepest layer, never blurred.
`planes`	`DioramaPlane[]`	`[]`	Foreground layers, each with its own content and depth.

0 external runtime dependencies

Ships with nothing but React.