Magnetic filings

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.

Get started

Let's start with a basic template that generates the filings based on a provided grid size.

function Filing() {
    return <div className="filing" />
}

export default function MagneticGrid({ size = 16 }) {
    return (
        <div className="container">
            <div
                className="square"
                style={{
                    "--grid-size": size,
                    "--grid-cols": size,
                    "--grid-rows": size,
                }}
            >
                {Array.from({ length: size * size }).map((_, index) => (
                    <Filing key={index} />
                ))}
            </div>

            <StyleSheet />
        </div>
    )
}

// Copy Stylesheet from example source