TEXTURE / 3%
Back to library
INTERACTION_013
Mouse Glow.
A wide, heavily blurred radial gradient tracks the pointer at section scope, lighting a dark background as if from above.
- CATEGORY
- Mouse
- COMPLEXITY
- Easy
- TECH
- CSS + JS
- PLATFORM
- Desktop
- PERFORMANCE
- Medium
LIVE PLAYGROUND
AMBIENT LIGHT
JavaScript / JS
section.addEventListener("pointermove", (e) => {
const r = section.getBoundingClientRect();
glow.style.transform =
`translate3d(${e.clientX - r.left - 300}px, ${e.clientY - r.top - 300}px, 0)`;
});CSS / CSS
.glow {
position: absolute;
width: 600px; height: 600px;
border-radius: 999px;
pointer-events: none;
background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 65%);
transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}