Cursor-Reactive Gradients: Making CSS Respond to Mouse Position

Cursor-Reactive Gradients: Making CSS Respond to Mouse Position The logo on my portfolio site changes colour as you move your mouse. Not with a library. Not with a pre-built animation. With about 15 lines of maths that convert cursor position into RGB values and generate a three-point radial gradient in real time. And when you scroll, the same gradient system responds using sine and cosine wave functions. Here's how the whole thing works. The core function: gradientCreator The entire gradient system lives in one function that takes two numbers and returns a CSS background: export const gradientCreator = ( xPc : number , yPc : number ) => { const colourCreator = ( number : number ) => { const colour = Math . floor (( 255 / 100 ) * number ); return colour < 255 ? Math . floor (( 255 / 100 ) * number ) : 255 ; }; const colour1 = colourCreator ( xPc ); const colour2 = colourCreator ( yPc ); const colour3 = 255 - colourCreator ( xPc ); return `radial-gradient(at 50% 0, rgb( ${ colour1 } , $