Exploded Stack
An isometric exploded view of layers that pulls apart in real 3D.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Show architecture, a tech stack, pricing tiers or a design system as stacked glass plates. Hover explodes the stack; the active layer lifts and glows, and labels counter-rotate so they always face the viewer.
Installation
$ npx shadcn@latest add https://guetix.com/r/exploded-stack.json
Uses the shadcn CLI. It creates components/guetix/exploded-stack.tsx and installs nothing else.
Usage
example.tsx
"use client";
import ExplodedStack from "@/components/guetix/exploded-stack";
export default function ExplodedStackDemo({ variant = "animated" }: { variant?: string }) {
return (
<ExplodedStack animated={variant !== "regular"}
layers={[
{ label: "Database", description: "Postgres · Drizzle", color: "#22d3ee" },
{ label: "API", description: "Server actions · zod", color: "#a78bfa" },
{ label: "UI", description: "React · Tailwind", color: "#4ade80" },
{ label: "Edge", description: "CDN · cache · images", color: "#fb923c" },
]}
/>
);
}
Architecture diagramsTech-stack sectionPricing tiersOnboarding explainer
Under the hood
The details that make it feel right, and that a one-line prompt usually misses:
- 01The labels are billboards: they apply the inverse of the stage rotation (`rotateZ(42deg) rotateX(-60deg)`).
- 02Spacing animates through a single `--gap` variable inside `translateZ(calc(i × gap))`.
- 03A synced side legend gives keyboard and screen-reader access to a purely visual 3D scene.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layers | { label: string; description?: string; color: string }[] | — | Bottom → top, 3–6 look best. |
| defaultExploded | boolean | false | Start exploded. |
| legend | boolean | true | Show the side legend. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- The 3D scene is decorative; the legend buttons drive it (`aria-pressed`).
- Reduced motion: no float or spring.