AMBIENT LIGHT
INTERACTION_013CSS + JS
Mouse Glow
Large ambient light that trails the pointer across a section.
Mouse / MediumView
Back to library
INTERACTION_012
Custom Cursor.
A precise dot follows the pointer at full speed while a ring lerps behind it. Hovering interactive elements expands the ring and can swap in a label like VIEW or COPY.
- CATEGORY
- Mouse
- COMPLEXITY
- Advanced
- TECH
- CSS + JS
- PLATFORM
- Desktop
- PERFORMANCE
- Medium
LIVE PLAYGROUND
MOVE INSIDE
JavaScript / JS
let mx = 0, my = 0, rx = 0, ry = 0;
addEventListener("pointermove", (e) => { mx = e.clientX; my = e.clientY; });
(function loop() {
rx += (mx - rx) * 0.15;
ry += (my - ry) * 0.15;
dot.style.transform = `translate3d(${mx}px, ${my}px, 0)`;
ring.style.transform = `translate3d(${rx}px, ${ry}px, 0)`;
requestAnimationFrame(loop);
})();