Casino Slotmachine in html and css, with 6 reels wide and 4 high. Add a bonus game. Also add professional looking animations.
Generated Prompt
## APPLICATION OVERVIEW The application is a web-based casino slot machine game featuring a six-reel, four-row layout. The primary purpose is to provide an engaging and interactive gaming experience, complete with a bonus game and professional animations that enhance user engagement. ## CORE FEATURES 1. **Slot Machine Interface**: A clean and intuitive interface displaying 6 reels and 4 rows, where users can spin to win. 2. **Bonus Game**: A secondary mini-game that activates under certain winning conditions, providing additional chances to win and enhancing gameplay. 3. **Animations**: Smooth and professional animations for spinning reels, revealing results, and transitions to the bonus game, creating a dynamic experience. 4. **Responsive Design**: The application will be fully responsive, ensuring a seamless experience across devices including desktops, tablets, and smartphones. 5. **User Interaction**: Simple controls for spinning the reels and accessing the bonus game, designed to be user-friendly and engaging. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - The design will prioritize clean lines, ample white space, and a simple aesthetic that focuses on the slot machine functionality. - **Color Mode**: Light theme featuring a minimal color palette with dark text on light backgrounds to enhance readability and maintain a professional look. - **Layout**: The main layout will include a centered slot machine interface with the reels prominently displayed. Bonus game options will be easily accessible below the main interface, with clear buttons for user interaction. - **Typography**: Use a sans-serif font for a modern look, with larger headings to create a visual hierarchy. Font sizes should vary for titles, buttons, and body text to ensure readability and usability. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for a robust and type-safe application structure. - **Styling**: Tailwind CSS for quick and efficient styling, allowing for responsive and utility-first design. - **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist aesthetic. - **State Management**: Use React's built-in state management for handling the game state, including reel outcomes and bonus game conditions. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript and install Tailwind CSS. 2. **Create Slot Machine Component**: Develop a `SlotMachine` component that holds the reels and their logic. 3. **Implement Reel Logic**: Create an array of symbols for the reels and implement the spinning logic that randomly selects symbols. 4. **Design UI**: Use Tailwind CSS to style the slot machine interface, ensuring a minimalist layout with clear spacing and typography. 5. **Add Animation**: Integrate CSS animations for spinning reels and transitions to the bonus game using keyframes. 6. **Bonus Game Logic**: Create a separate component for the bonus game that can be triggered based on winning conditions from the main game. 7. **Test Responsiveness**: Ensure that the application is responsive by testing on various devices and screen sizes. ## USER EXPERIENCE Users will interact with the slot machine by clicking a "Spin" button, which initiates the spinning of the reels. The results will display shortly after with a smooth animation. If certain conditions are met, users will be prompted to play the bonus game, enhancing their engagement. The layout and controls will be designed for ease of use, providing a seamless experience as users navigate through the game. This fully functional minimalist application will align with the user’s vision, delivering an engaging and visually appealing casino slot machine experience.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
