Updates radial-gradient mask-position in real time following cursor movement.
Dark mask layer where a circular flashlight spotlight reveals hidden glowing text beneath cursor.
Updates radial-gradient mask-position in real time following cursor movement.
<div class="stage"><div class="spot-mask-box" id="smBox"><div class="sm-hidden">SECRET CIPHER: 7702-X</div><div class="sm-hint">Hover mouse to illuminate 🔦</div></div></div>* { box-sizing: border-box; } body { margin:0; min-height:100vh; display:grid; place-items:center; background:#000; font-family:monospace; } .stage { padding:40px; width:340px; } .spot-mask-box { position:relative; height:180px; background:#0a0a0f; border:1px solid #1f2937; border-radius:20px; display:grid; place-items:center; color:#38bdf8; font-size:16px; font-weight:800; overflow:hidden; } .sm-hidden { opacity:0; transition:opacity 0.2s; } .spot-mask-box:hover .sm-hidden { opacity:1; } .sm-hint { position:absolute; bottom:12px; font-size:11px; color:#6b7280; }
Discussion (0)
Sign in to join the discussion
Only registered developers with verified email addresses can leave comments.
No comments yet. Be the first to start the conversation!