Exploded View

$ pnpm dlx shadcn@latest add @remocn/exploded-view

Usage

ExplodedView draws a stack of square slabs in isometric projection, left of center. The slabs spring apart from the top down, each one leaving a beat after the one above it. A leader line then draws out from each slab to the right, and a numbered label slides in at its end. After a short hold the labels retract, the slabs spring shut, and the stack gives a small downward knock as it clicks together.

import { ExplodedView } from "@/components/remocn/exploded-view";
 
export const Stack = () => (
  <ExplodedView
    layers={3}
    labels={["Edge", "Runtime", "Database"]}
    highlight={2}
  />
);

layers is clamped to 2–6. labels are listed top slab first and numbered 01, 02 and so on; a slab with no label gets no leader line. highlight picks the slab painted in the highlight colors, counted from the top starting at 0; an index past the last slab highlights nothing. The labels use Inter with a system fallback.

Timing

At 30 fps and speed={1}, with 4 slabs:

All labels are on screen together for only a few frames before they retract at frame 33. If they need longer, slow the whole piece with speed={0.5}, which doubles every time in the table.