Depth Layered Stack Features Block for React

The stage has a perspective; inside it one square is rotated with rotateX(58deg) rotateZ(-40deg) and transform-style: preserve-3d, and each plane is placed along its local z axis by a --rise custom property (0, 5 and 10 rem). Picking a layer adds a --lift of 2.5 rem to that plane. There's no script frame loop: a transition on transform does the movement.

Edit the three Layer objects at the top (title, text and rise) and the three plane drawings (DataPlane, LogicPlane and ViewPlane), which are plain boxes and lines. The list reads top to bottom the way the stack looks, so LIST is the layers from the highest down.

Each layer is a real button in a heading, with aria-pressed while it is the picked one. Pointer hover, keyboard focus and a tap all pick it. The stack rests again when the pointer or focus leaves the list. The planes are decoration and hidden from assistive technology: the list says everything they show.

The planes jump to their lifted or resting position without a transition, and the one-time fade-up of the two halves on load is off.

Yes. The planes are your card colour with hairlines and a shadow, the contents are greyscale and the one filled element is your foreground colour, so it reads in light and dark and in any preset. The primary colour is not used.

The list comes first and the stage sits under it behind a rule, at a shorter height and a smaller square, with a one-line hint under it. Tapping a layer lifts its plane.