How to show worked muscles in a fitness app

Almost every serious fitness app ends up wanting the same screen: a human silhouette with the worked muscles lit up. Users finish a workout and see what they trained. They open an exercise and see what it targets. They tap a muscle and get exercises for it. The feature reads as obvious to users, which is exactly why it’s worth building well. This post is how we build it at Fitness Visuals, and how you can drop the same heatmap into your app.

The feature is really two problems

Under the hood the worked-muscles screen is a data problem and a rendering problem, and they’re independent. The data layer knows that a bench press hits chest, front delts, and triceps. The renderer turns that set of muscles into the picture the user sees. You can nail one and still ship something that looks like a spreadsheet with a diagram taped on, so it’s worth being deliberate about both.

What a good renderer has to do

Before you write any code, this is the checklist a worked-muscles view needs to clear:

• Front and back views, because lats and glutes exist.
• Male and female body models, if your audience isn’t one demographic.
• Runtime composition, so a workout that hits chest, triceps, and front delts lights all three at once instead of needing a pre-rendered image for every combination.
• Intensity levels, primary vs secondary muscles at minimum, volume-based tiers if you’re ambitious.
• Interactivity, so tapping a muscle can open its exercises.
• Theming, so the highlight color matches your brand or the user’s theme.
• One asset across platforms, so a web dashboard or a second app doesn’t mean maintaining a second muscle map.

That list is exactly why we ship the heatmap as a single interactive asset instead of a stack of static images or per-platform code.

The heatmap is a state-machine asset

The body ships as one Rive file that contains its own state machine. Muscles are inputs on the asset: your code sets them, and the asset handles rendering, transitions, and hit-testing internally. Highlight changes animate smoothly instead of snapping, intensity is a runtime value, taps emit the muscle’s name back to your code, and the same file renders on Flutter, SwiftUI, Android, React, and React Native through official Rive runtimes. On the Flutter side the whole integration is a few lines:

AnatomyVisualizer(
  artboardName: 'Male-Front',
  activeMuscles: {'pectoralisMajor', 'deltoids', 'biceps'},
)

You set the active muscles from whatever your data layer computed, and the asset does the rest. The runtime adds roughly 200KB to your app. That widget comes with the paid packs, alongside matching samples for SwiftUI, Android, and React, and the playground runs a demo of the same asset in your browser before you buy anything.

Two packs, one asset

Both packs are the complete asset; they differ in what you can drive:

• Basic ($30, one-time). Front and back views, male and female body shapes, and 29 muscles, including the posterior chain: lats, triceps, glutes, hamstrings, erector spinae, teres major. Still a single highlight color, toggled per muscle.
• Advanced ($50, one-time).Everything in Basic, plus four highlight colors you set at runtime, a 0..4 state input that picks the active one (that’s your intensity tiers and your theming in one input), and tap-to-identify events that hand your code the muscle name and group.

Both are a one-time purchase with a lifetime single-app commercial license, free version updates, and integration samples for Flutter, SwiftUI, Android, and React. You can also just poke the heatmap in your browser before deciding anything.

Don’t skip the data layer

The renderer only draws what you tell it, so the exercise-to-muscle mapping is the other half of the job. You need structured data that says what each exercise works and how hard, and you want to model primary and secondary muscles separately from day one. It’s the difference between a heatmap that looks right to lifters and one that lights up half the body for every compound movement. Feed those muscle sets into activeMuscles and the screen takes care of itself.

Ship it this week

The worked-muscles view is the screen users screenshot and share, and it’s often the visual that separates a polished tracker from a spreadsheet with buttons. Start from the free file to wire up the feature, keep your exercise-to-muscle data clean, and buy the pack when you’re ready for the full body, both views, and theming.