A building cake-slice: tilted stack of horizontal layers that separate vertically as you scroll, with labels fading in next to each one. The materials / architecture / fabric pattern.
An object cut open like a piece of cake — multiple horizontal layers stacked at a tilted-isometric angle. As you scroll, the layers separate vertically and their labels appear on the side, naming the material or layer of each. Used on building / architecture sites, fabric and materials brands, food / packaging sites, anywhere you want to communicate "here's what's inside, layer by layer."
The stack uses a tilted container (transform: rotateX(60deg) rotateZ(-10deg)) with transform-style: preserve-3d. Inside, several layer divs stack with different vertical offsets. As scroll progress --p grows, each layer's translateY is biased away from center — top layers go further up, bottom layers further down — exposing the gap between them. A row of labels next to the stack has a staggered fade-in tied to --row-p values that activate one at a time as --p crosses thresholds.
Scroll inside. The 5-layer building separates vertically and the materials list fades in row-by-row.
Five layers, top to bottom — the entire materials story.
Build a cross-section / materials-stack scroll reveal. Sticky pin (position:sticky top:0 height:100vh) inside a tall 1800px parent. Two-column layout inside the pin: info column on the LEFT (display-serif headline + materials list with 5 rows), the cake-slice STACK on the RIGHT. The stack: 280×360 container with transform-style:preserve-3d and transform:rotateX(60deg) rotateZ(-10deg) (the isometric tilt). Inside, 5 absolutely-positioned slab divs, each height:56px, different earth-tone gradient (slate red, hay gold, slate teal, dark charcoal, terracotta). Each slab's transform is translateY based on its index AND a scroll-driven --p custom property — top slab translates further negative as --p grows, bottom further positive, middle stays put. This creates a vertical separation that "opens up" the structure as you scroll. Each info row has a data-row attribute (0-4) and a --row-p variable activated when scroll progress crosses thresholds 0.1, 0.3, 0.5, 0.7, 0.85 — opacity:calc(0.3 + --row-p * 0.7) and translateX(-8px → 0) for a staggered fade-in. Bottom progress bar tied to --p.