SlotReality
An interactive web platform designed to raise public awareness about the dangers and psychological traps of online gambling. Developed under a strict 5-hour hackathon deadline, this project uses experiential learning to let users feel the mechanism of addiction rather than just reading about it.
The Challenge
Online gambling addiction is a rising crisis in Indonesia, often fueled by misleading visuals and 'near-miss' psychology. Traditional education methods (text/lectures) are boring and fail to capture the emotional descent into addiction. The challenge was to create an impactful digital campaign in just 5 hours.
The Solution
We built 'SlotReality', a high-fidelity web experience that simulates a slot machine to demonstrate rigged odds. Unlike real gambling sites, this simulation reveals the mathematical improbability of winning. It combines gamification with hard data (divorce rates, demographics) to break the cycle of curiosity.
Key Features
Technology Stack
Next.js 14
Framework for component architecture and performance.
GSAP
Complex timeline animations for the slot machine mechanics.
Framer Motion
Smooth layout transitions and entry animations.
Tailwind CSS
Rapid UI development under tight deadline.
Development Process
Research & Problem Definition
Analyzed real-world data (Money Kompas, Detik) regarding gambling-induced divorce rates and demographics to form the narrative.
UI/UX Design
Designed the emotional flow, creating assets that shift from 'exciting' to 'distressing' to mirror addiction.
Slicing & Layout
Rapidly constructed the static sections (Hero, Map, Game, Footer) using Tailwind CSS.
Animation Implementation
Integrated GSAP for the slot mechanics and Framer Motion/AOS for scroll-triggered storytelling.
Finishing & Presentation
Final code optimization, bug fixing, and preparing the pitch deck for the 5-hour sprint deadline.
Engineering Challenges
The 5-Hour Sprint
Building a fully interactive, animated platform with a map and game logic in just 5 hours required extreme coordination and prioritizing core features over nice-to-haves.
Map Visualization
Displaying complex provincial data interactively was technically demanding. We used CSS/SVGs to visualize the spread of gambling cases across Indonesia.