Прожектор-фонарик

Текст скрыт в темноте и читается только в круге света за курсором — radial-маска.

Водите мышью по сцене.

водите мышью — фонарик ваш

В темноте прячется контент, который читают только любопытные.

Код

<section class="dark">
  <h2 class="spot">Текст, скрытый в темноте…</h2>
</section>

<style>
.dark { background: #08090c; }
.spot { color: #e9ecf1;
  mask-image: radial-gradient(circle 150px
    at var(--sx, 50%) var(--sy, 50%),
    #000 35%, rgba(0,0,0,.06) 75%);      /* фонарик = маска */
  -webkit-mask-image: radial-gradient(circle 150px
    at var(--sx, 50%) var(--sy, 50%),
    #000 35%, rgba(0,0,0,.06) 75%);
}
</style>

<script>
var el = document.querySelector(".spot");
document.querySelector(".dark").addEventListener("pointermove", function (e) {
  var r = el.getBoundingClientRect();
  el.style.setProperty("--sx", (e.clientX - r.left) / r.width * 100 + "%");
  el.style.setProperty("--sy", (e.clientY - r.top) / r.height * 100 + "%");
});
</script>

Промпт для ИИ

Сделай прожектор за курсором: тёмная секция, текст видим через mask-image: radial-gradient(circle 150px at var(--sx) var(--sy), #000 35%, rgba(0,0,0,.06) 75%) — вне круга остаётся 6% видимости (силуэт читается). pointermove пишет --sx/--sy в процентах от текста. cursor:none в секции — фонарик заменяет курсор. На тачах — обычный текст без маски.