Smarter Hover Effect

This component adds a smooth, expanding circle to any card, button, or frame when hovered. The circle starts where the cursor enters, grows to fill the area, and fades out where the cursor leaves.

It’s ideal for adding subtle delight and premium interaction without heavy setup.

Features

• Designed specifically for Framer

• Lightweight and performance friendly

• Always covers the full surface, no matter the dimensions

• Cursor based hover expansion from entry point

• Smooth collapse toward cursor exit position

• Multiple animation types, spring, linear, ease options

• Adjustable animation duration

• Natural fade in and fade out timing

Use case ideas

• Premium brand websites

• Marketing call-to-action highlights

• SaaS feature grids with subtle motion

• Unique interactive buttons

• Card hover effects for modern websites

How to use it

1. Make your card design frame and name it "Card". Don't add background or border yet.

2. Wrap it inside another frame and name it "Card holder". Add background color, border, etc.

3. Add "Smarter Hover Effect" inside "Card Holder", set it to absolute position and pin it to all edges.

4. Make sure the "Card" frame inside "Card Holder" has a higher Z index than "Smarter Hover Effect".

5. Now select your "Card" frame and go to Styles then set Pointer to None.

6. In the "Smart Hover Effect" control panel, set up your hover color, animation style and duration.

7. Click Preview to see it in action.

---

If you purchase Smarter Hover Effect, check out the Remix link for usage examples.

---