From our partner: The AI visual builder for Next.js & Tailwind: Generate UI with AI. Customize it with a visual editor.
The other day I revisited this awesome demo of a gooey countdown using SVG filters. The demo by Graham Pyne shows a morphing text effect where one number morphs into another. I wanted to integrate this in a menu and see how variations on the filter would look like for a hover effect.
Combining the morphing with some filter adjustments and other animations (like on translations), make this a playground for endless possibilities. I’m sharing three simple ideas with you, hope these give you a starting point for your own experiments!
If you want to understand the underlying gooey filter effect, Lucas Bebber explains it really well in this article. He also made a fantastic set of demos a couple of years ago that show how this gooey effect can be used in several scenarios.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.
Let me know what you come up with and ping me @codrops or @crnacura!
