Anatomy
- Section introduction
- Expandable layer pills
- Five aligned glass planes
- Layer icon and label
- Progress indicator
Section · Product storytelling
Architecture layer stack
Scroll-controlled glass stack explaining the layers behind the AI workforce.
Component gallery
The section at every supported size.
Turns technical platform architecture into an ordered, explorable product narrative.
Build recipe
Anatomy and content rules
Content checklist
- Use one plane per pill
- Hide future layers until active
- Keep the completed stack cube-like
- Use Phosphor icons only
Composition guidance
Place it with compatible sections.
Works beside
Agent builder walkthroughOutcomes compositionLive usage
/#productSource reference
app/components/ProductLayerStack.tsx