Architecture Visualization Studio

Build pages that make software architecture and ideas felt, not just diagrammed. The goal is output that makes a viewer think "I've never seen our company's work look like this" — polished, animated, professional, not AI-slop. This skill bundles the hard-won code and taste from a long real build so you assemble from proven parts instead of rediscovering them.

The two deliverables (often combined on one page)

1. Scroll-story — a fixed 3D low-poly world (Three.js) that the camera flies through as the user scrolls (GSAP ScrollTrigger). A request/object travels the world; sections reveal over it. For stakeholders to feel the product. → templates in assets/scene/ + assets/scroll/.
2. Architecture map — a dark "blueprint" SVG system map with switchable overlay lenses (one map, N aspects: Systems / Data Flow / Ownership / Reliability / …), clickable nodes that open drill-down component diagrams, and an ERD for the data model. For architects to explore. → assets/diagrams/.

Both are design-system aware (adapt to provided brand colors/fonts/logos; degrade to tasteful neutral defaults) and ship with edit mode (assets/edit-mode/).