ChanceBox is a modern, interactive web utility designed to help users make decisions through gamified randomization. It features a customizable Spin Wheel, a predictive 3D Coin Toss, and an interactive Dice Roll, all wrapped in a premium Glassmorphism UI.
The defining feature of this project is the integration of a custom, interactive 3D WebGL Prism background that renders in real-time, providing a sleek, futuristic aesthetic without compromising performance.
- 🎡 Dynamic Spin Wheel: Users can input custom questions and comma-separated options. The wheel dynamically calculates slice angles using trigonometric functions and utilizes randomized rotational offsets to determine a winner.
- 🪙 3D Coin Toss: Features a CSS 3D-transformed coin with interactive prediction logic. Users guess the outcome, and the DOM updates dynamically to announce a win or loss.
- 🎲 Interactive Dice Roll: A gamified dice roller with mathematical validation to check user predictions against a randomized index.
- 🔊 Procedural Audio Engine: Utilizes the native browser Web Audio API to synthesize retro-arcade style "Win" and "Lose" chimes procedurally using sine and sawtooth oscillators.
- 💎 Glassmorphism UI: Built with advanced CSS techniques including
backdrop-filter, semi-transparent layers, and a custom minimal scrollbar. - 🌌 WebGL Background: Utilizes the OGL library to render a lightweight, glowing 3D geometric background directly on the canvas.
- 📱 Fully Responsive: Implemented CSS Media Queries to seamlessly shift the layout from a side-by-side desktop dashboard to a touch-friendly, scrollable mobile interface.
- Frontend: HTML5, CSS3
- Logic & DOM Manipulation: Vanilla JavaScript (ES6+)
- Audio Synthesis: Web Audio API
To run this project locally, no build tools or package managers are required.