Interactive Diagram — Mechanical / Parts-Anatomy Variant

What it does

• Clickable parts — every labeled component on the diagram is its own tap target, inviting the learner to explore at their own pace
• Reveal panel — tapping a part opens a side or popover panel with the part's name, function, and a short teaching note
• Hover and active states — parts highlight on hover and stay highlighted while their panel is open, so the learner never loses their place
• Visited tracking — viewed parts subtly mark themselves so the learner can see what they've covered and what's still unexplored
• Keyboard and tap friendly — works equally well on desktop click, tablet tap, and keyboard arrow navigation

Best use cases

• Mechanical and trades — bike anatomy, engine parts, tool components, machine breakdowns
• Healthcare and fitness — muscle groups, skeletal landmarks, organ systems, posture checkpoints
• Music education — parts of an instrument, mixing console layout, pedalboard signal flow
• Cooking and food — knife anatomy, kitchen station layout, plate composition
• Product and design — anatomy of a webpage, parts of a typeface, product feature breakdown

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 diagram background, base illustration color, hover highlight, active highlight, and panel background. Swap entirely to match your niche register.
• Fonts — two roles: a display font for part names and headings, plus a clean body font for descriptions
• Copy — title, intro line, label text for each part, and a short teaching paragraph per part with optional 'related parts' links
• Images — the diagram itself is the largest customization. Replace the bicycle with any subject illustration; the click-to-reveal pattern stays the same.
• Behavior — choose whether one panel opens at a time or panels stack, and tune the hover highlight and reveal animation speed