Hotspot Reveal Diagram — Layered Cross-Section Variant

What it does

• Click-by-layer interaction — each visible stratum is a tappable region with its own info panel
• Layer info panels — opens a clean card with the layer name, function, and key facts
• Active-layer highlight — the current layer is visually emphasized while others fade slightly
• Top-to-bottom scannability — layer order is visually obvious, helping learners build a mental hierarchy
• Responsive cross-section — the diagram and panels reflow cleanly across phone, tablet, and desktop

Best use cases

• Skincare and dermatology — skin layers, hair follicle anatomy, sun-damage diagrams
• Geology and earth science — soil profiles, rock strata, ocean depth zones
• Atmospheric science — atmospheric layers, weather-system cross-sections
• Cooking and food science — lasagna or cake layer diagrams, fermentation profiles
• Materials and construction — wall assemblies, roof layers, fabric composites

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — slots for background, each layer fill, active-layer outline, panel background, and label text.
• Fonts — two roles: a clinical title font for layer names and a readable body font for descriptions.
• Copy — diagram title, optional intro, and per-layer name plus description; add or remove layers as needed.
• Images — swap the cross-section illustration for any layered subject; layer regions are repositionable.
• Behavior — single-open vs multi-open layers, and tune the active-layer animation.