-
3D Box Loader Animation
HTML
CSS
JavaScript
<div class="mask-container" id="container"> <div class="image-to-reveal" id="reveal"></div> <div class="hint">Move your mouse over the box</div> </div>
:root { --mouse-x: 50%; --mouse-y: 50%; } body { margin: 0; background: #000; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; font-family: sans-serif; } .mask-container { position: relative; width: 80vw; height: 80vh; background: #111; cursor: none; } .image-to-reveal { width: 100%; height: 100%; background-image: url('https://picsum.photos/id/237/1200/800'); background-size: cover; background-position: center; -webkit-mask-image: radial-gradient(circle 150px at var(--mouse-x) var(--mouse-y), black 0%, black 80%, transparent 100%); mask-image: radial-gradient(circle 150px at var(--mouse-x) var(--mouse-y), black 0%, black 80%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: -webkit-mask-image 0.1s ease-out; } .hint { position: absolute; bottom: 20px; width: 100%; text-align: center; color: white; pointer-events: none; opacity: 0.5; }
const container = document.getElementById('container'); const root = document.documentElement; container.addEventListener('mousemove', (e) => { // Get coordinates relative to the container const rect = container.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * 100; const y = ((e.clientY - rect.top) / rect.height) * 100; // Update CSS variables root.style.setProperty('--mouse-x', x + '%'); root.style.setProperty('--mouse-y', y + '%'); }); // Optional: Hide mask when mouse leaves container.addEventListener('mouseleave', () => { root.style.setProperty('--mouse-x', '-50%'); root.style.setProperty('--mouse-y', '-50%'); });
Live Preview
- 3D Box Loader Animation