Animating a radial gradient with Framer Motion

Learn how to build a spotlight effect by animating a radial gradient that follows the mouse cursor. Built with React, Framer Motion and Tailwind CSS. 🔗 LINKS Code: https://buildui.com/recipes/spotlight Motion values: https://www.framer.com/motion/motionvalue/ 🕐 TIMESTAMPS 0:00 – Intro 0:21 – Radial gradient 2:55 – Tracking the mouse position 7:50 – Updating the gradient position with React state 9:26 – Too many re-renders 10:37 – Refactoring to motion values 13:41 – Revealing the spotlight on hover 15:30 – Adding a border glow 16:59 – Final demo