Building an Interactive 3D Magnetic Input Field with GSAP & Tailwind CSS

Most input fields are static, flat, and honestly... a bit boring. But what if your search bar or newsletter signup actually reacted to the user's mouse and felt alive? I wanted to create something that demands user attention and provides a high-end feel. So, I built an Interactive 3D Magnetic Input Field using HTML, Tailwind CSS, and GSAP. What I Built A highly interactive, premium input field component designed to make standard text inputs feel like a premium experience. Here is what makes it stand out: ✅ Smooth 3D Magnetic Hover Effect : The input card dynamically tilts based on cursor movement, creating a stunning parallax depth illusion. ✅ Elastic Bounce on Focus : The moment the user clicks, the input pops out with a satisfying elastic bounce. ✅ Vibrant Emerald Glow : Upon focus, it illuminates with a sleek green glow, perfectly guiding the user's attention. ✅ Built with GSAP : Smooth, high-performance animations that feel completely natural. See It in Action The Design Breakdown