<mr-app data-stats="true"> ... </mr-app>

Stats can be attached to an mr-app using data-stats:


Enables a visual of a stats counter in the top left corner. The stats counter can show a few different options, by default it shows 0.

Note this is different than the stats that are enabled by use of the <mr-stats> entity being directly added.

This stats toggle is great for use on desktop; however, it can cause performance bottle-necks in headset. We recommend for you to use the <mr-stats> tag for headset testing.

Change color! mr-panel { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; width: 100vw; height: 100vh; } mr-button { font-family: system-ui; background-color: white; padding: 8px 16px; font-size: 150%; border-radius: 20px; } function changeColor() { let hue = Math.floor(Math.random() * 360); let color = 'hsl(' + hue + ', 100%, 80%)'; document.querySelector("#panel").style.backgroundColor = color; } changeColor();