Responsive Stats Preview Card with Subtle Animations

What are you most proud of, and what would you do differently next time?

It was fun playing with the mix-blend-mode CSS property. I used it to overlay the image with the violet hue.

I wanted to give the card a bit of flair, so I used the CountUp.js library to animate the statistics as they count up to their final values.

I also added a gradient shimmer effect to the highlight color in the card heading. This was a fun detail to code and I think it adds a bit of visual interest to the card.

.purple-shimmer {
  -webkit-background-clip: text;
  animation: shimmer 5s infinite linear;
  background: linear-gradient(
    90deg,
    #b159e7 0%,
    #cb80f8 25%,
    #b560e8 50%,
    #cb80f8 75%,
    #b159e7 100%
  );
  background-clip: text;
  background-size: 400% 400%;
  color: transparent;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

What challenges did you encounter, and how did you overcome them?

I found it interesting to integrate Tailwind CSS outside of a React environment. I've used CountUp before, but again, this was in the context of React, and here the plan was to use some of the same tools and libraries but outside of the React ecosystem.

What specific areas of your project would you like help with?

Thanks for any feedback!