Cursor Spotlight Reveal

DEMO

CODE

<div class="demo-stage csr-stage"><div class="csr-layer csr-base">SPOTLIGHT</div><div class="csr-layer csr-hidden">SPOTLIGHT</div><p class="csr-hint">枠内でマウスを動かすと文字が照らされます</p></div>

.csr-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:300px; overflow:hidden; cursor:crosshair; }
.csr-layer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:clamp(2rem,9vw,4rem); letter-spacing:.12em; pointer-events:none; }
.csr-base { color:rgba(255,255,255,.07); }
.csr-hidden { color:#E91B89; -webkit-mask:radial-gradient(circle 90px at var(--x,-300px) var(--y,-300px), #000 0%, #000 38%, transparent 72%); mask:radial-gradient(circle 90px at var(--x,-300px) var(--y,-300px), #000 0%, #000 38%, transparent 72%); }
.csr-hint { position:absolute; bottom:1rem; color:rgba(255,255,255,.35); font-family:'Oswald',sans-serif; letter-spacing:.12em; font-size:.72rem; }

(function(){
  var stage = document.querySelector('.csr-stage');
  var hidden = stage && stage.querySelector('.csr-hidden');
  if(!hidden) return;
  stage.addEventListener('mousemove', function(e){
    var r = stage.getBoundingClientRect();
    hidden.style.setProperty('--x', (e.clientX - r.left) + 'px');
    hidden.style.setProperty('--y', (e.clientY - r.top) + 'px');
  });
})();

AI PROMPT

マウス位置の円形スポットライトで隠れた文字を照らし出すエフェクトを作って。同じテキストを2枚重ね、下層（base）は薄い色、上層（hidden）はaccent色にして -webkit-mask / mask に radial-gradient(circle 90px at var(--x) var(--y), #000 0% 38%, transparent 72%) を指定。親要素のmousemoveで getBoundingClientRect から相対座標を取り、hidden.style.setProperty('--x'/'--y', ...) でCSS変数を更新するとスポットライトがカーソル追従する。ヒーロー・ティザー・インタラクティブ演出に。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。