How can I tell whether to show less GPU-intensive graphics on my page?

Question

I have a webpage which has some visual effects on it that I think really enhance it. However, they are somewhat GPU intensive. For any desktop, they're child's play. However, on my laptop and phone, the devices heat up rather fast.

I don't want to harm my users' devices, nor cause them to heat up, nor run their fans just because they're viewing my page. However, I don't want to abandon these effects entirely. How can I tell whether it's OK to use these effects, versus when I should use the fallback?

My first instinct was to query [the Battery Status API](https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API), but that is highly discouraged and basically only works in Chromium now. I don't know any alternative way to ask "is this a laptop or a desktop?" or "does this have enough GPU power to handle this confidently?"