Magnetic filings: Step-by-step tutorial
Matt Perry
In this tutorial, we're going to build the Magnetic filings example step-by-step.
This example is rated 3/5 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 Magnetic filings tutorial
is exclusive to Motion+
290+ examples & 35+ tutorials
Premium APIs
Visual editor for VS Code
alpha
Discord community
Early access
Lifetime updates
One-time payment, lifetime updates
Already joined?
Introduction
This example shows how to create a grid of metal filings that rotate to point towards the cursor position. Each filing calculates the angle to the cursor and uses spring animations for smooth rotation.
In this tutorial, we'll learn to use the usePointerPosition hook from Motion+ to track cursor position, and the useTransform hook to calculate angles between elements.
