How to create a rolling die using React and framer-motion ?

Namachila October 13, 2025

0 0 2 minutes read

We can create a die using react with plain CSS and framer-motion library for animating the same using the following approach:

Prerequisites:

Knowledge of JavaScript (ES6)
Knowledge of HTML/CSS.
Basic knowledge of ReactJS.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app rolling-die

Step 2: After creating your project folder i.e. rolling-die, move to it using the following command:

cd rolling-die

Step 3: After creating the ReactJS application, Install the framer-motion modules using the following command:

$ npm install framer-motion

App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Example:

App.js

import React, { useState, useEffect } from "react"; 
import { motion } from "framer-motion"; 
import "./App.css"; 
  
// Animation properties for the container 
// which is the face of the die 
const container = { 
  hidden: { opacity: 1, scale: 0 }, 
  visible: { 
    scale: [0, 1], 
    opacity: 1, 
    transition: { 
      staggerChildren: 0.5, 
      delayChildren: 0.5, 
    }, 
  }, 
}; 
  
// Animation properties for the disc(s) that 
// denote(s) the number player gets after rolling the die 
const discsOnTheDie = { 
  hidden: { y: 20, opacity: 0 }, 
  visible: { 
    y: 0, 
    opacity: [0.2, 1], 
  }, 
}; 
  
// Utility function to get the random number 
// from 1 t0 6 just like a physical die 
const rollTheDie = () => { 
  return Math.floor(Math.random() * 7 + 1); 
}; 
  
const App = () => { 
  // Managing state of randomSize aka number on the die 
  // using useState hook 
  const [randomSize, setRandomSize] = useState(rollTheDie()); 
  const discNumbers = new Array(randomSize); 
  
  // Assigning 0 to randomSize to the array 
  for (var i = 0; i < discNumbers.length; i++) { 
    discNumbers[i] = i; 
  } 
  
  useEffect(() => { 
    // This will fire on every change of randomSize 
    setRandomSize(rollTheDie()); 
  }, [randomSize]); 
  
  return ( 
    <div> 
      <motion.ul 
        className="square-container"
        variants={container} 
        initial="hidden"
        animate="visible"
      > 
        {/* Mapping javascript array discNumbers  */} 
        {discNumbers.map((index) => ( 
          <motion.li key={index} className="disc" 
                     variants={discsOnTheDie} /> 
        ))} 
      </motion.ul> 
      <button 
        onClick={() => { 
          setRandomSize(); 
        }} 
      > 
        {" "} 
        ROLL{" "} 
      </button> 
    </div> 
  ); 
}; 
  
export default App; 

App.css

body { 
  overflow: hidden; 
  width: 100vw; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background: linear-gradient(180deg, green, white); 
} 
  
.square-container { 
  display: grid; 
  width: 200px; 
  height: 300px; 
  border-radius: 50px; 
  padding: 30px; 
  gap: 20px; 
  list-style: none; 
  grid-template-rows: repeat(3, 1fr); 
  grid-template-columns: repeat(2, 1fr); 
  background: rgba(255, 255, 255, 0.2); 
} 
  
.disc { 
  background: white; 
  border-radius: 100%; 
  justify-content: center; 
  align-items: center; 
} 
  
button { 
  text-decoration: none; 
  display: inline-block; 
  margin-left: 80px; 
  border: none; 
  color: white; 
  padding: 15px 32px; 
  text-align: center; 
  font-size: 16px; 
  font-weight: 900; 
  border-radius: 50px; 
  background-color: #4caf50; 
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!