Roll the dice!

This is a 3D motion-activated dice built with React, Next.js, Typescript and the Web Sensors API.

Try it live at diceroll.gaby.dev!

This should work on any web browser, however:

• Browsers without sensors support (gyroscope + accelerometer) will graciously fall back to a static version of the cube without the orientation animation.
• Desktop browsers will display a pop-up with a QR code to encourage users to try it on their phone.

The cube itself is made with CSS perspective and transforms on a bunch of <div>s. A .svg texture file contains the dots and is placed on each face and aligned with background-position.

The gyroscope API is used to detect when angular velocity of the device is past a certain threshold, to trigger a dice roll.

A random number is chosen using Math.random() and after a little CSS animation, the cube is rotated to put the correct face on top, using an array of X/Y/Z rotation values (in deg):

this.faceViews = [ [0, 0, 0], [90, 0, 0], [0, 90, 0], [0, -90, 0], [-90, 0, 0], [-180, 0, 0] ]

Using the RelativeOrientationSensor API or the DeviceOrientationEvent API depending on browser support, an offset is applied to those values to factor in the device's orientation for a cool 3D effect.

// Calculate perspective rotation with device orientation effect rx = x + (ax * 40) if (this.state.face === 5) { ry = y rz = z + (-ay * 40) } else if (this.state.face === 2) { ry = y rz = z + (ay * 40) } else if (this.state.face === 6) { ry = y + (ay * 40) rz = z } else { ry = y + (-ay * 40) rz = z }

.cube { transform-style: preserve-3d; transform: rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg); }

Finally, the rounded edges of the cube's faces are filled with a second layer that is offset by the border-radius in px, so you can't see inside the cube through the edges: