Dice
One or two CSS 3D dice with drawn pips that tumble to a seeded result on click or Space, with a total and an announcement.
Preview
Total 8
Click, Enter or Space to roll both.
Ink
Ember
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | 1 | 2 | 1 | One or two dice. Two shows the sum. |
| size | number | 72 | Edge length of a die in px. |
| tone | "paper" | "ink" | "ember" | "paper" | Colour from theme tokens. |
| defaultValues | DieValue[] | [1, 6] | Faces showing at first. |
| seed | number | 1 | Seed for the sequence of rolls, so results are repeatable. |
| onRoll | (values: DieValue[], total: number) => void | — | Called when a roll lands. |
| label | string | "Roll the dice" | Accessible name; the faces showing are appended. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.