Hi, Bran! Welcome to the Vercel Community

This sounds like a fun project! Thanks for sharing

We don't have a guide for this specific usecase, but maybe you could try prompting v0 with something like:

Create a complete Next.js webpage that displays a muscle heatmap.

Layout:

• A centered heading: "Muscle Heatmap"
• A responsive container displaying the front and back views of a human body side by side.

Functionality:

• Use inline SVG illustrations for both front and back views, with each muscle group represented as a distinct path or group.
• Assign unique id attributes to each muscle group (e.g., biceps-left, quads-right, trapezius).
• Introduce a hardcoded array named highlightedMuscles containing strings corresponding to muscle group IDs (e.g., ["biceps-left", "quads-right"]).
• Highlight the specified muscle groups in red with 70% opacity.

Styling:

• Utilize Tailwind CSS for layout and styling.
• Ensure the SVGs are responsive and maintain clarity across devices.

Additional Notes:

• Include comments in the code to guide beginners on where to replace placeholder SVGs with their own exported from Figma.
• Provide instructions on how to modify the highlightedMuscles array to highlight different muscle groups.

Could you give that a go?

I also recommend checking out @floguo's v0 session for inspiration on prompting →

https://community.vercel.com/t/crafting-personalized-software-with-v0/4728

Vercel Community

Topic | Vercel Community

Connect, learn, share projects, and get community support