React Exploded View

Copy Page

Some products are genuinely stacked — IC packages, metal layers, PCB build-ups, optical coatings, protocol stacks — and a flat cross-section drawing never quite lands. Drag the separation control and the stack comes apart.

Installation

Props

StackLayer is { id, label, thickness?, material?, description?, color? }. Omit color and layers cycle through the chart tokens, which are already CVD-safe and theme-aware.

Ordering and honesty

List layers bottom-first. It reads backwards in JSX but it matches how every cross-section diagram, process flow, and build-up spec is written, so the array will line up with the document your engineer is copying from. The legend reverses it for display.

The separation is a presentation device, not a scale drawing — the on-screen gap has no relationship to thickness. If someone might mistake it for one, put the real numbers in the legend, which is exactly what thickness is for.

No WebGL, no 3D library: each layer is a <div> tilted by a fixed rotateX/rotateZ and offset in plain 2D. The projection is deliberately orthographic rather than perspective — a perspective projection magnifies the raised layers by an amount that depends on the container height, which the stack's own height then feeds back into, so the top of a tall stack clips off. Isometric is also the projection every mechanical drawing already uses. The frame height is therefore exact at any spread or layer count, and the whole thing stays under a kilobyte.