An interactive dice roller targeting smartphones with the Web Sensor API.
Alternatives To Diceroll
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Next.js107,3697,7163,62421 hours ago1,624September 23, 20222,136mitJavaScript
The React Framework
Swr26,941134513 hours ago124September 12, 202277mitTypeScript
React Hooks for Data Fetching
Trpc26,23656a day ago332September 22, 202288mitTypeScript
🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
9 days ago35gpl-3.0TypeScript
✨ Seamlessly visualize your JSON data instantly into graphs.
21 hours ago100gpl-3.0TypeScript
Lenster is a decentralized and permissionless social media app built with Lens Protocol 🌿
Nativebase19,3184,291305a month ago348September 23, 2022320mitTypeScript
Mobile-first, accessible components for React Native & Web to build consistent UI across Android, iOS and Web.
Nx17,76712626421 hours ago846September 23, 2022624mitTypeScript
Smart, Fast and Extensible Build System
Next Auth17,0042173a day ago567August 01, 2022247iscTypeScript
Authentication for the Web.
Sst15,2284a day ago681September 23, 2022673mitJavaScript
💥 SST makes it easy to build full-stack serverless apps.
Blitz12,8343113 days ago421September 13, 2022195mitTypeScript
⚡️ The Missing Fullstack Toolkit for Next.js
Alternatives To Diceroll
Select To Compare

Alternative Project Comparisons


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:

© 2020 Gabriel Saillard [email protected]
Licensed under the Do What The Fuck You Want To Public License
Popular Reactjs Projects
Popular Nextjs Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.