Dice Rolling

Premium Interactions Component by Aidan Looker

Show PreviewBuy for $9
Dice Rolling

About Dice Rolling

What is Dice Rolling?

Dice Rolling is a premium interactive 3D dice component powered by real-time physics simulation. Users can click to roll or drag and throw the die with velocity-based force. It features realistic bouncing and smooth deceleration. Ideal for gamified websites, random decision makers, interactive hero sections, and engagement-driven landing pages.

Core Features

  • Real-time physics simulation with gravity, bounce elasticity, and angular momentum — every roll feels unique and weighted

  • Drag-and-throw interaction with velocity detection, plus click-to-roll with randomised force for natural-feeling results

  • Seven built-in material presets including Frosted Glass, Marble, Wood Grain, Neon Glow, Gemstone, and Metal — or go fully custom

  • Three face content modes: classic pips, numbers, or fully custom text labels per face for decision dice, branded experiences, and more

  • Smooth progressive settle animation with no jarring snaps — the die naturally eases into its final position

Controls inside Framer

Appearance

  • Die Size — adjustable from 40px to 240px

  • Material — choose from 7 presets or create a custom look

  • Face Content — pips, numbers, or custom text per face

  • Face Font — font picker for numbers and custom labels

Physics

  • Roll Force — Light, Medium, Heavy, or Chaos

  • Friction — fine-tune how quickly the die decelerates

  • Bounciness — control bounce elasticity from subtle to springy

  • Spin Intensity — adjust rotational energy per throw

Background

  • Surface — None, Wood, Glass, Marble, or Felt presets

  • Custom BG — override with any colour

  • Vignette — optional radial edge shadow for depth

Animation and Behaviour

  • Hover Lift — subtle scale-up on mouse hover

  • Idle Float — gentle breathing animation when at rest

  • Roll Again Button — toggleable pill button after each result

  • Auto Re-roll — continuous rolling on a configurable delay

Custom Colours (visible when Material is set to Custom)

  • Pip / Text colour

  • Face background colour

  • Border colour

  • Glow colour

Best use cases

  • Gamified landing pages and interactive hero sections that boost engagement and time-on-page

  • Random decision tools, spin-the-wheel alternatives, and "let fate decide" micro-interactions

  • Board game companions, tabletop RPG character builders, and casual gaming interfaces

  • Promotional campaigns with randomised discount reveals, prize draws, or mystery offers

Ship a polished, physics-driven dice interaction in under a minute.

Questions or custom requests?