November 2, 2023
Dynamic Cursor Tracking
With this concept I set out to create a hover state that follows the user's cursor. This is not natively offered in Framer, so I had to find a custom way to create it.
Below is a live demo you can interact with to get a feel for it:
Hi, I'm Jamie
There's no easy way around it– as you probably guessed there are multiple hover states for each button.
The hover areas are highlighted green in the example below. There's 9 total hover areas:
After that you just need to duplicate the variant 9x times and connect them. Since there's 9 hover areas, each variant will have 9 connections like you can see in the default variant below:
Once you've done the hard work once, you can duplicate the component and create additional versions. Here's an example of a button with multiple component properties:
As you can see, Framer is really an amazing tool for building dynamic interactions like this without any code.