Goomorphic Menu
The idea for this menu came from a post by Kumail Nanji on X, where he showcased a beautifully designed Morphing Navbar created in Figma. I was instantly captivated by the design and knew I wanted to bring it to life using web technologies.
Using React for structure, Framer Motion for smooth animations and an SVG filter I set out to replicate Kumail's design with interactivity and performance in mind.
I chose the name "goomorphic" to highlight the versatility of this style. The concept is rooted in the idea that components can not only have a gooey, liquid-like appearance but can also morph from one form to another seamlessly.
This opens up exciting possibilities for user interfaces, where a button could transform into a menu or an icon could morph into a different interactive element—all with a fluid, gooey effect.
The code for this project is available on GitHub:
https://github.com/eduardconstantin/react-motion-components
And I also set up a storybook playground here:
