Cool Race Start Animation with Countdown

[Ankit-raj-11]

We want to enhance the start of races in both /practice and /race routes by adding a visually appealing countdown animation. The countdown should display 3 → 2 → 1 → Go! in sequence before the race begins.

Requirements

1. Countdown Animation

   • Display numbers 3 → 2 → 1 → Go! in sequence.
   • Add cool visual effects (e.g., scaling, fade-in/out, color changes, or motion).
   • Optional: Add a sound effect to enhance the experience.

2. Integration

   • Implement the animation in both /practice and /race.
   • Ensure the race timer starts only after the countdown ends.

3. Responsiveness

   • Animation should work smoothly on all screen sizes (desktop, tablet, mobile).

4. Reusable Component

   • Consider creating a reusable React component for the countdown animation to avoid code duplication.

5. Performance

   • The animation should not delay page load or affect typing responsiveness.

Additional Notes

• This will improve user engagement and create a more exciting start to the races.
• Keep the animation fast-paced and visually clear, so it doesn’t distract from the typing experience.

---

Goal: Make the start of each race dynamic and energetic with a visually appealing 3 → 2 → 1 → Go! countdown.

[nitin-999-code]

@Ankit-raj-11 please assign to me
i would like to contribute on this
as a part of HAcktoberfest-2025

[nitin-999-code]

please review and accept my pr