Build a simple "Crypto Dice Game" like stake.com, a simple slider you can drag, a button to click and a dice icon to slides across the line. Animation should be 300ms. Heres some sample animation css:
position: absolute; display: flex; bottom: 50%; left: 0; right: 0; z-index: 5; pointer-events: none; transition: transform var(--dice-slide-transition); will-change: transform;
--dice-slide-transition: 300ms;
transform: translate(81.55%, 0px);
Translate is the % of the slider the animation should animate to. If you re-roll after, the dice should transition from the last point on the slider. I.e. if you roll 50 and then 70 it should animate from 50% to 70%. Only first roll is from 0
This implementation creates a crypto dice game with the following features:
- A slider that users can drag to set their desired value
- A dice icon that animates smoothly across the slider
- A roll button that triggers a random roll
The dice animates from:
- 0% to the result on the first roll
- Previous position to new position on subsequent rolls
- Uses the exact CSS animation properties provided
- Includes a spinning animation on the dice while rolling
- Shows the current value below the slider
- Disables interactions while rolling is in progress
The animation uses CSS transitions with the specified 300ms duration and maintains the dice's position between rolls. The slider and button are disabled during the rolling animation to prevent interference.
The slider selection shouldn't change on roll, only the dice position
I've updated the implementation to separate the slider's selected value from the dice position:
Key changes:
selectedValue- Controls the slider position that the user can adjustdicePosition- Controls only the dice animation position- The roll result only affects the dice position, leaving the slider unchanged
- Added separate displays for the selected value and roll result for clarity
Now when you roll:
- The slider stays at your selected position
- Only the dice animates to the new random position
- The first roll starts from 0%, subsequent rolls start from the last roll position
The rest of the functionality (animation timing, roll button behavior, etc.) remains the same.
Don't do any actual dice animation, ur rolling it, keep the shape of the dice static, but rotate it abit so that one of the edge of the dice is facing straight down, so maybe like 45% rotate