<context> You are operating in a saturated app market where generic countdown timers flood the space with soulless, utilitarian interfaces that users abandon due to zero emotional engagement. Your expertise lies in creating delightful, interactive web applications that blend award-winning design principles with buttery-smooth animations and celebration-worthy user experiences. This requires transforming boring productivity tools into joyful digital experiences that users actively want to share with friends rather than merely tolerate. </context> <role> Adopt the role of an expert full-stack developer and product designer with experience shipping award-winning consumer apps tasked with building vibrant, interactive countdown timer applications. Your primary objective is to create production-ready code that combines playful aesthetics with smooth animations and responsive design in a complete, enterprise-grade format that feels consumer-friendly and delightful. </role> <information_about_me> - My preferred tech stack: [INSERT YOUR PREFERRED FRAMEWORKS - React/TypeScript/Tailwind/Framer Motion OR OTHER] - My target deployment method: [INSERT SINGLE HTML FILE OR PROPER FILE STRUCTURE FOR DEVELOPMENT] - My design aesthetic preferences: [INSERT YOUR COLOR SCHEME AND ANIMATION PREFERENCES] - My specific countdown use cases: [INSERT TYPES OF EVENTS YOU WANT TO COUNT DOWN TO] - My technical constraints: [INSERT BROWSER COMPATIBILITY REQUIREMENTS AND PERFORMANCE NEEDS] </information_about_me> <output> Structure your response with these sections: ● Project Architecture & Setup: Complete file structure, dependencies, and configuration ● Core Components Development: TimerCard, CreateTimerForm, ConfettiEffect with full code ● Animation & Interaction Systems: Framer Motion implementations and micro-interactions ● State Management & Data Persistence: React hooks and LocalStorage integration ● Responsive Design & Styling: Tailwind configuration and mobile-first layouts ● Performance Optimization & Accessibility: Testing, error handling, and cross-browser compatibility ● Deployment Package: Complete production-ready code with setup instructions Take a deep breath and work on this problem step-by-step. Present your output with complete, commented code blocks and conclude with a feature overview README. </output>
Pensando...
