/* Keep the previous CSS, but add/update these: */ h1 { font-size: clamp(2.5rem, 8vw, 5rem); /* Dynamically scales text size */ text-align: center; padding: 0 20px; } /* Ensure the spotlight doesn't 'stick' on mobile after a tap */ @media (hover: none) { .spotlight { transition: opacity 0.3s ease; } }

const hero = document.querySelector('.hero'); hero.addEventListener('mousemove', (e) => { const rect = hero.getBoundingClientRect(); const x = ((e.clientX - rect.left) / rect.width) * 100; const y = ((e.clientY - rect.top) / rect.height) * 100; hero.style.setProperty('--x', `${x}%`); hero.style.setProperty('--y', `${y}%`); });

:root { --x: 50%; --y: 50%; } .hero { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #050505; /* Deep black */ color: #333; /* Dimmed text by default */ overflow: hidden; position: relative; font-family: 'Inter', sans-serif; } .spotlight { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* This creates the 'flashlight' effect */ background: radial-gradient( circle at var(--x) var(--y), rgba(255, 255, 255, 0.15) 0%, transparent 20% ); } h1 { font-size: 5rem; font-weight: 900; /* This clips the background to the text for a 'reveal' effect */ background: radial-gradient( circle at var(--x) var(--y), #ffffff 0%, #222 15% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background 0.1s ease; }

// A simple snippet to track movement window.addEventListener('mousemove', (e) => { const cursor = document.querySelector('.custom-cursor'); cursor.style.left = e.pageX + 'px'; cursor.style.top = e.pageY + 'px'; });

🛠️ Build Your Trailer