Coin Flip Game React component
A real 3D CSS coin, click or tap to flip with a physical spin animation, a yes/no question field, flip history dots, and a heads/tails ratio readout.
About the Coin Flip Game component
Coin Flip Game is a heads-or-tails coin toss for yes-or-no decisions. People type a question, then tap the coin or the button, and a 3D metal coin spins for about a second and lands on Heads (yes) or Tails (no). It keeps the last 12 results as dots with the heads and tails percentages above them.
theme picks one of four looks (night, neon, gold, tide), each with its own coin metal, title and subtitle, and lightMode switches to a light background. headsImage and tailsImage replace the letters on the two faces with your own images, size sets the coin size between 120 and 200px, and accentColor colors the main button. The result is read out to screen readers through a polite live region.
When to use it
Use it as a small playful tool on a blog, a portfolio or a team page, or as an engagement widget on a landing page that can be opened from a button.
To hand out a reward or a discount code instead of a yes or no, use Spin to Win Wheel or Dice Roll Discount Popup.
Installation
Add the Coin Flip Game component to your project with the shadcn CLI. It lands in components/coin-flip-game.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/coin-flip-gameOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<CoinFlipGame /> accepts 12 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "night" | "neon" | "gold" | "tide" | "night" |
| lightMode | boolean | false |
| accentColor | string | "#ffffff" |
| size | number | 160 |
| headsImage | string | — |
| tailsImage | string | — |
| defaultQuestion | string | "Should I ship this today?" |
| asPopup | boolean | false |
| trigger | "manual" | "delay" | "scroll" | "manual" |
| delaySeconds | number | 4 |
| widgetPosition | "bottom-right" | "bottom-left" | "bottom-right" |
| widgetIcon | string | — |
- theme"night" | "neon" | "gold" | "tide"Default: "night"
- lightModebooleanDefault: false
- accentColorstringDefault: "#ffffff"
- sizenumberDefault: 160
- headsImagestring
- tailsImagestring
- defaultQuestionstringDefault: "Should I ship this today?"
- asPopupbooleanDefault: false
- trigger"manual" | "delay" | "scroll"Default: "manual"
- delaySecondsnumberDefault: 4
- widgetPosition"bottom-right" | "bottom-left"Default: "bottom-right"
- widgetIconstring
Collections
Use-case pages that compare Coin Flip Game with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Coin Flip Game FAQ
- Is the result random?
- Yes. Each toss spins the coin by two or two and a half turns, picked with Math.random, so heads and tails are equally likely. The question text does not affect the result.
- How do I show it as a popup?
- Set asPopup. A pill button opens it in a dialog, which closes with the close button, a backdrop click or Escape, and focus goes back to the button. widgetPosition lines the button up on the left or right of its container.
- Can the popup open on its own?
- Yes. trigger="delay" opens it after delaySeconds (4 by default), and trigger="scroll" opens it once, the first time 40% of the component scrolls into view. trigger="manual" only opens it from the button.
- Can I use my logo on the coin?
- Yes. Pass headsImage and tailsImage. Each image fills its face of the coin inside the metal rim.
- Why is the button text hard to read?
- The button text is a fixed near-black, so accentColor should be a light color. The default is white.
