Hotspot Reveal Diagram — Tool Anatomy Variant

What it does

• Clickable markers on the image — small dots, plus icons, or numbers sit on the diagram and open panels when tapped
• Per-part info panel — each open marker reveals a part name, short description, and optional secondary detail
• Free-explore order — learners can click any marker in any sequence, mimicking handling the real tool
• Active-marker highlight — the selected marker visually stands out so the user always knows where they are
• Responsive image positioning — markers scale and reposition with the image across screen sizes

Best use cases

• Photography and creative tools — camera anatomy, lens diagrams, gimbal layouts
• Trades and equipment training — power tools, kitchen equipment, automotive parts
• Tech and product onboarding — labeled product walkthroughs for new hardware
• Music gear — synthesizer panels, guitar anatomy, mixing consoles
• Lab and clinical equipment — microscopes, monitoring devices, surgical instruments

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 page background, marker dot, active marker state, info-panel background, and label text.
• Fonts — two roles: a clear title font for part names and a readable body font for descriptions.
• Copy — image caption, marker labels, and per-part short descriptions; add or remove markers freely.
• Images — swap in your own product, tool, or device photograph or illustration; the marker layer drops on top.
• Behavior — choose whether one marker opens at a time or several can stay open, and tune panel animation speed.