Conic gradient pointer
Matt Perry
In this tutorial, we're going to build the Conic gradient pointer example step-by-step.
This example is rated advanced difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).
Here's a live demo of the example we're going to be creating:
Checking Motion+ status…
The Conic gradient pointer tutorial
is exclusive to Motion+
300+ examples & 40+ tutorials
Premium APIs
Motion Studio editing tools
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
Introduction
The Conic gradient pointer example shows how to create a dynamic conic gradient that follows your pointer as you move it across the screen. This creates a striking visual effect where the gradient's center point tracks with your cursor position.
This example uses motionValue from Motion to track the gradient's center coordinates, and frame to schedule efficient updates. Motion values let you track state that changes frequently (like pointer position) without triggering component re-renders, while frame ensures DOM updates happen at the optimal time in the browser's render cycle.
