[BUG] problems with useMotionValue and useSpring to make an object follow the cursor after v11.

1. Read the FAQs 👇

Done.

2. Describe the bug

I use useMotionValue and useSpring to track the cursors position and animate a div to follow it, worked fine with the last v10 version. After upgrading to v11 I noticed two specific bugs.

1. If I click while moving my cursor the animated div will accelerate in the direction it was facing while the click happened. it is very easy to reproduce by spamming click while making circles with the cursor in the codeSandbox I provide below.

2. when I have dev tools open the animation is glitchy.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/framer-motion-cursor-lag-khssjf?file=%2Fsrc%2FApp.js%3A9%2C52

4. Steps to reproduce

Steps to reproduce the behavior:

1. create two motion values with useMotionValue().
2. update them with a useEffect and a window.addEventListener("mousemove", handleMouseMove). handleMouseMove just sets the two previous motion values to event.clientX and event.clientY respectively.
3. pass the motion values through a useSpring each.
4. use the values returned from the two useSpring in the style prop of a motion.div for the x and y.
5. 1. bug 1, while making circular movements with the cursor, spam click. the animated div should soon gain speed and move outside the page and the expected path it should follow .
   2. bug 2, inspect the page and open the dev tools. while they are open move the cursor. it doesn't move smoothly anymore.

5. Expected behavior

bug 1 - it should work like pre v11, clicking should not affect the movement/velocity of the element.

bug 2 - it should not be laggy with dev tools open.

6. Video or screenshots

CodeSandbox reproduction.

https://github.com/framer/motion/assets/32646153/b95c7e7d-ccd5-4647-98a6-4105a94c54e2

and locally with a clean Next.js project.

https://github.com/framer/motion/assets/32646153/83b31066-5d0a-40bd-b764-25b723af7a96

7. Environment details

Windows 11 Education 23H2.

Chrome Version 123.0.6312.106 (Official Build) (64-bit).

8. Extra question

In the docs it is mentioned that using motion values inside the style prop does not make use of hardware acceleration.

Is there a better way to implement the functionality I want? what would be the best way to track the cursors position and animate an element?

Start with the CodeSandbox reproduction in src/App.js around lines 9 and 52, then trace the useMotionValue, useSpring, and mousemove setup described in the issue. Reproduce both the click-induced acceleration and the dev-tools lag in Chrome. Done means cursor-following remains smooth, clicks do not alter velocity, and the behavior matches pre-v11 expectations.