Cursor
Movement
Position
VanillaJS
Characters
Direction
Interactive
Indicator
Pixels
Search
K
Documentation
Webflow
Code
Setup: External Scripts
External Scripts in Webflow
Make sure to always put the External Scripts before the Javascript step of the resource.
In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?
HTML
Copy
Step 1: Copy structure to Webflow
Copy structure to Webflow
In the video below we described how you can copy + paste the structure of this resource to your Webflow project.
Copy to Webflow
Webflow structure is not required for this resource.
Step 1: Add HTML
HTML
Copy
<div class="coordinates__inner" data-coordinates-wrap>
<p class="coordinates__p">X:<span data-coordinates-x>0</span>px</p>
<p class="coordinates__p">Y:<span data-coordinates-y>0</span>px</p>
</div>HTML structure is not required for this resource.
Step 2: Add CSS
CSS
Copy
.coordinates__inner {
position: relative;
z-index: 1;
display: flex;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
}
.coordinates__p {
font-family: "Haffer Mono", monospace;
font-size: 1em;
line-height: 1.25;
text-transform: uppercase;
}Step 2: Add custom Javascript
Custom Javascript in Webflow
In this video, Ilja gives you some guidance about using JavaScript in Webflow:
Step 2: Add Javascript
Step 3: Add Javascript
Javascript
Copy
function initCursorCoordinates() {
const xEl = document.querySelector('[data-coordinates-x]');
const yEl = document.querySelector('[data-coordinates-y]');
if (!xEl || !yEl) return;
document.addEventListener('mousemove', (event) => {
xEl.textContent = Math.round(event.pageX);
yEl.textContent = Math.round(event.pageY);
});
}
document.addEventListener("DOMContentLoaded", () => {
initCursorCoordinates();
});Step 3: Add custom CSS
Step 2: Add custom CSS
Custom CSS in Webflow
Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:
CSS
Copy
Implementation
Display coordinates
The function looks for two elements on the page:
- One with the attribute
[data-coordinates-x] - One with the attribute
[data-coordinates-y]
As you move your cursor across the page, the current X and Y positions will be displayed as text inside those elements.
Quick tip
For best visual alignment, use a monospace typeface so all characters have equal width.
Coordinates follow cursor
If you check the website we listed as 'original source' here in the Vault, you see they make these coordinates stick to your actual mouse position, to really sell the effect. This can be easily achieved by combining this resource with the Basic Custom Cursor!
Search
K
Resource Details
Last updated
October 29, 2025
Type
The Vault
Category
Cursor Animations
Need help?
Join Slack
Original source
Ilja van EckCreator Credits
We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.