AMBIENT LIGHT
INTERACTION_013CSS + JS
Mouse Glow
Large ambient light that trails the pointer across a section.
Mouse / MediumView
Back to library
INTERACTION_014
Cursor Parallax.
Each layer receives a depth factor and translates by a fraction of the normalized pointer offset, producing dimensional depth without scroll.
- CATEGORY
- Mouse
- COMPLEXITY
- Intermediate
- TECH
- CSS + JS
- PLATFORM
- Desktop
- PERFORMANCE
- Light
LIVE PLAYGROUND
JavaScript / JS
scene.addEventListener("pointermove", (e) => {
const r = scene.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width - 0.5;
const y = (e.clientY - r.top) / r.height - 0.5;
scene.querySelectorAll("[data-depth]").forEach((layer) => {
const d = Number(layer.dataset.depth);
layer.style.transform = `translate3d(${x * d * 40}px, ${y * d * 40}px, 0)`;
});
});