🦾 Muscle Map — Interactive Anatomical Web Component

<muscle-map> is a framework-agnostic Web Component that displays a detailed male muscular anatomy map. Click any muscle group to cycle through four states:

• 🔘 Rest (grey)
• 🟠 Active (orange)
• 🟢 Trained (green)
• 🔴 Sore (red)

Dual front/back views. 22 muscle groups. Export to JSON. Shadow DOM isolated. Zero dependencies.

Demo

<muscle-map></muscle-map>
<script type="module" src="src/muscle-map.js"></script>

Live Demo →

Installation

npm

npm install @amonbaehler/muscle-map

CDN (unpkg)

<script type="module" src="https://unpkg.com/@amonbaehler/muscle-map/src/muscle-map.js"></script>

Direct Download

Download src/muscle-map.js and include it in your project.

Usage

Basic

<muscle-map></muscle-map>

Single View

<muscle-map view="front"></muscle-map>
<muscle-map view="back"></muscle-map>

With Initial State

<muscle-map state='{"Chest":"active","Abs":"trained","Biceps":"sore"}'></muscle-map>

API

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | view | "both" "front" "back" | "both" | Which anatomical view(s) to show | | state | JSON string | null | Initial muscle states, e.g. '{"Chest":"active"}' |

Methods

const map = document.querySelector('muscle-map');

// Set a muscle state
map.setState('chest', 'active');   // slug: chest, abs, biceps, deltoids, etc.

// Get all states
const states = map.getState();
// { Chest: "rest", Abs: "active", Biceps: "trained", ... }

// Export as JSON
const json = map.exportJSON();

// Reset all to "rest"
map.resetAll();

Events

map.addEventListener('muscle-state-change', (e) => {
  console.log(e.detail); // { muscle: "chest", state: "active", label: "Chest" }
});

map.addEventListener('muscle-reset', () => {
  console.log('All muscles reset');
});

map.addEventListener('muscle-export', (e) => {
  console.log(e.detail.json);   // JSON string
  console.log(e.detail.states); // Object
});

States

| State | Color | Meaning | |-------|-------|---------| | rest | #2a2f3e | Not trained | | active | #f97316 | Currently working | | trained | #22c55e | Recently trained | | sore | #ef4444 | Needs recovery |

Supported Muscles

Front: Chest, Obliques, Abs, Biceps, Triceps, Deltoids, Forearms, Hands, Adductors, Quadriceps, Knees, Tibialis, Calves, Ankles, Feet, Head

Back: Neck, Traps, Upper Back, Lats, Lower Back, Glutes, Hamstrings, Calves, Head

Browser Support

All modern browsers that support Custom Elements v1 and Shadow DOM:

• Chrome 67+
• Firefox 63+
• Safari 10.1+
• Edge 79+

License

MIT © Amon Baehler

Credits

Anatomical SVG path data derived from react-muscle-highlighter (MIT License).