Frontend Mentor - Launch countdown timer solution

This is a solution to the Launch countdown timer challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • AI Collaboration
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• See hover states for all interactive elements on the page
• See a live countdown timer that ticks down every second (starting at 14 days)
• Bonus: When a number changes, the card performs a realistic 3D flip animation from the middle.

Screenshot

Links

• Solution URL: [https://github.com/dreamer111111/launch-countdown-timer]
• Live Site URL: [https://launch-countdown-timer-blue.vercel.app/]

My process

1.Build the UI 2.Data Flow 3.Custom Hook and the complex time convertion 4.Flip Card Animation

Built with

• Semantic HTML5 markup
• Flexbox & CSS Grid
• Mobile-first workflow
• React - JS Library
• TailwindCSS - For utility-first styling and 3D animations

What I learned

This project was a deep dive into React state management and CSS 3D transforms. The biggest challenge was making the "flip" happen every second without causing performance issues.

1. The "Key" Animation Trick: I learned that React usually reuses DOM elements. To trigger a CSS animation every time a second changes, I used the key prop on the animated element. Changing the key forces React to treat the card as a brand-new element, re-triggering the CSS flip animation.

2. 3D CSS Layering: To create the flip effect, I used a "sandwich" of three layers:

• A background layer showing the next number.
• A static bottom half.
• An animated top "leaf" that rotates on the X-axis using origin-bottom.

3. Math & Logic: I used the Modulo operator (%) to strip away days and hours to find the remaining minutes and seconds. Formatting the strings with .padStart(2, '0') ensured the UI stayed consistent.

// Example of the math used to calculate remaining seconds
const seconds = String(Math.floor((distance % (1000 * 60)) / 1000)).padStart(2, '0');

Continued development

I want to explore more complex physical animations using libraries like Framer Motion, though doing this with pure CSS and Tailwind was a great way to understand the underlying "physics" of web animation. I also plan on adding sound effects (a mechanical "click") to match the flip animation.

AI Collaboration

I worked with Gemini to debug the React 19 "cascading renders" error. We moved away from using useEffect to trigger animation states and instead used the React key property to handle animations via the DOM lifecycle, which is much more performant.

Author

Frontend Mentor - [https://www.frontendmentor.io/profile/dreamer111111]

Twitter - [https://x.com/royrudro032]