Gyroscope / accelerometer access on phone

[Simon_Gram]

Hello!
I recently joined Webflow to see it’s possibilities, and so far I’m still learning.
I’m using Webflow because it had the ability to solve one of my problems for my website, but I don’t know how to implement it.
My case is, that whenever a user rotates their phone (activates the gyroscope / accelerometer) Some elements on the page should change color depending on how they tilt it.
It’s used to make the page more interactive, and add a “wow factor”.
So far I’ve stumbled upon this thread and these 2 examples, but I simply don’t know how to implement it/understand their guides properly.
If anyone has some sort of more detailed guide/video tutorial, that would mean the world to me!

Here’s the 2 threads and 1 example:
(Properly the closest to what I want, but instead of changing rotation, it should change color.)

Mouse movement IX to Accelerometer movement on iOS

I’ve been wanting to try this for a while. This is a test of translating an iOS device’s orientation using the accelerometer to control the mouse movement interaction in webflow. https://credit-card-animation.webflow.io/ If you visit this page on an iOS device on iOS >= 13 you have to click the text below the button and allow device orientation before it will work. This is just a test to see if it is possible

• the examples:
  1st:
  https://all-layers.webflow.io/
  2nd:
  https://credit-card-animation.webflow.io/

I hope you can help me.
Thank you a lot in advance!