Mystery Box - Copy this React, Tailwind Component to your project
Design a mystery box page with a dark, crypto themed UI.** 1. **Page Overview:** The page should have a **dark mode** theme with a **crypto aesthetic**. At the top, display a brief description of the **mystery box** and its **price**. Include a **Buy Mystery Box** button with a hover effect. 2. **Initial Page Animation:** Upon loading, the page should feature **subtle animations** like glowing outlines or pulsating lights to grab attention. Use sleek, **lightning style animations** that complement the dark background. 3. **Mystery Box Animation:** When the user clicks the **Buy Mystery Box** button, the screen should expand to cover the full viewport (100vh) with a **box animation**. The **mystery box** should appear to "open" with dynamic, attractive animations (e.g., a glowing, rotating box that smoothly splits open). 4. **Reveal the Reward:** After the mystery box opens, reveal the **NFT reward** or **voucher** with an exciting, glowing effect. Consider adding a **confetti or particle animation** to make it feel celebratory and rewarding. The reward could be represented as a visually appealing NFT image or icon with additional details such as name and price. 5. **Overall Design and Animations:** The page should have **glowing elements**, **neon effects**, and **smooth transitions** to create an engaging and immersive experience. Ensure the animations are fluid, making the mystery box feel like a fun, high energy experience. focuses on the essential details of the design while leaving room for creativity in terms of animations and visual effects!
