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
The Magnetic Illusion
Using GSAP (GreenSock), the component tracks the mouse position relative to the center of the input field. As the cursor moves around it, the component slightly rotates and translates in 3D space. It makes the digital interface feel like a physical, tangible object.
Focus State Polish
An input field's main job is to be typed in. By combining a scale-up "bounce" effect with a vibrant emerald green drop-shadow/glow when focused, the user gets immediate, satisfying visual feedback that the field is ready for their input.
Where to Use This
- Modern Search Bars — Make your site's primary search feel premium.
- Hero Section CTAs — Grab attention immediately on your landing pages.
- Newsletter Signups — Give users a fun reason to type in their email.
Get the Free Code
This component is part of the Input Field category on my UI library.
👉 Get the free code → No sign-up required. Just copy, paste, and ship. 🚀
Top comments (0)