Card Bounce on Hover is a motion-driven UI component designed to add intentional, directional feedback on hover.
Instead of freely following the cursor, the component intelligently detects the dominant direction of cursor movement and responds along only one axis—horizontal or vertical.
This constraint creates a controlled, premium interaction that feels deliberate rather than playful or chaotic.The result is a subtle bounce that enhances affordance without overpowering surrounding UI.
The component is built using Framer Motion springs, ensuring smooth, natural motion with configurable physics.It works especially well for logos, brand badges, feature icons, or any circular or square UI element that needs light interactivity.
On hover, the badge reacts based on where the cursor enters or moves:
Horizontal cursor movement triggers a left or right bounce
Vertical cursor movement triggers an up or down bounce
When the cursor leaves, the badge smoothly returns to its resting position.
The component is fully self-contained and does not rely on external state or layout constraints.It can be dropped into any Framer canvas and reused across sections without additional setup.
This interaction is particularly useful when you want to:
Add motion without distraction
Reinforce hierarchy on hover
Make static visuals feel responsive
Maintain a clean, editorial UI aesthetic
AxisBounce Badge is ideal for landing pages, portfolios, SaaS websites, and design systems where motion needs to feel purposeful and restrained.
The following properties can be customized directly from Framer’s property panel:
Visual
Image (badge or icon image)
Size (width & height)
Background color
Border radius
Border width
Border color
Motion
Bounce strength (movement distance)
Spring stiffness (responsiveness)
Spring damping (smoothness / resistance)
These controls make it easy to fine-tune both the look and feel of the interaction to match your brand or design system.
Arvind Singh
