Impatiently waiting for what felt like an eternity, I finally gained access to Counter-Strike 2 beta.🎮
The game's new UI is nothing short of spectacular, but one element in particular caught my eye — the matchmaking button, especially the the background animation
Determined to take on a creative challenge, I set myself a goal for this month - to recreate this button for the web with CSS and animate it with framer motion.
Creating the animated squares was a breeze, but it was the topographic map did gave me some headaches because I didn't want to use just a simple image.
After some relentless tinkering and experimentation I managed to generate the map dynamically using an SVG filter, therefore offering endless variations for this button. As you can see bellow, there are more things implemented, like changing the color (it looks mesmerizing in blue), the width and the label.
The code for this project is available on GitHub: https://github.com/eduardconstantin/react-motion-components
And I also set up a story playground here
Top comments (3)
Good post! Counter-Strike 2 has definitely brought some exciting changes to the franchise! As someone who has been playing CS:GO for quite some time, diving into CS 2 has been a refreshing experience. The gameplay tweaks and enhancements really add to the overall excitement. Plus, being a fan of skin collecting, I've found the variety in CS 2 to be quite enticing. If you're into skin collecting like me, I recommend checking out an article From the link I stumbled upon about making money through skin trading. It's a fascinating read for anyone looking to delve deeper into this aspect of the game.
Thank you!
Your recreation of the Counter-Strike 2 matchmaking button looks amazing! You did a great job of recreating the original animation while also adding your own unique touches.
I'm particularly impressed with how you dynamically generate the topographic map using an SVG filter. This allows you to create an infinite number of variations of the button, making it very versatile.
Recently, with the help of the site fyed.me/. I learned about the expected official release of the game. I tried to play, the game looks cool. We have improved the problems of the old game that irritated players so much. It's a worthy update.
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more