profile picture of Olivier Larose

Olivier Larose

January 30, 2024





Gradient Mouse Move

How to Animate a Linear Gradient using Framer Motion and Next.js

A website tutorial featuring an animation of a css linear gradient using Framer Motion and Next.js. Inspired by

Live Demo
background video

It seems you don’t have access to this tutorial.

This tutorial is part of the Web Animation Course.

Learn more

Related Animations


June 2, 2024

Mouse Image Distortion

A website animation featuring an image distortion in a curved, using the sin function, React, React Three Fiber and Framer Motion


May 4, 2024

Paint Reveal

A website tutorial on making a paint reveal / erasing effect using the destination out blend mode of the canvas API, made with React and Next.js


March 8, 2024

Blend Mode Cursor

A website tutorial featuring a moving cursor on mouse move, colored with CSS blend mode difference, made with React and GSAP. Inspired by