Curious how you built your muscle heat map

[thesaiteja24]

Hi, I’m Sai. I came across your app while browsing Reddit and really liked how you’ve implemented the muscle heat map.

I’m currently building a fitness tracking and logging app, and I’ve been exploring different ways to visualize muscle activation. Seeing your implementation got me curious — it looks clean and well thought out.

I’d love to learn how you approached building it and what your overall setup looks like. If you’re open to chatting or sharing a bit about the implementation, that’d be great.

[aree6]

Hi Sai, thanks for reaching out!
My muscle heatmap is built around a rolling volume calculation system that maps workout sets to specific muscle regions.

The core approach is calculating rolling 7-day volumes(weekly sets) for each of the muscle.

The body maps use color gradients (red or blue based on theme applied).

I use a this function that takes the muscle's set count and maximum volume to calculate a color intensity:

const getVolumeColor = (sets: number, maxSets: number): string => {
  if (sets === 0) return 'hsla(0, 0%, 100%, 1)';
  const ratio = sets / Math.max(maxSets, 1);
  const lightness = 84 - ratio * 64; // 84% → 20%
  return `hsl(var(--heatmap-hue), 75%, ${lightness}%)`;
};

This creates a gradient from light to dark based on the ratio of current volume to maximum volume.

[thesaiteja24]

Thanks for the reply, but i was more curious about the actual images part I explored code base a little to see the implementation and found out the files related to that in components/bodyMap folder I don't know how you managed to pull it of but great work man.
By the way do you have any idea on how the Hevy app or Lyfta app display the muscle distribution using what looks like a 3d model I have attached the image