Cursor Spotlight Reveal

A spotlight follows the pointer and reveals text hidden in the dark.

Original
Vanilla JS
Reduced-motion ready
Customisable
1.2 KB gzip

An original by PasteMotion · MIT License

WidthFull

Code

index.html

<div class="cursor-spotlight" data-demo>
  <p class="cursor-spotlight__hidden">There's always more to see<br />when you shine a light on it.</p>
</div>

How to use it

Paste the HTML where the animation should appear.
Add the CSS to your stylesheet. Every class starts with the animation's name, so it won't clash with yours.
Add the script just before the closing </body> tag.
Adjust the custom properties (--accent) on .cursor-spotlight to restyle it without touching the rest.
Reduced-motion users are covered: the animation calms down or stops when that setting is on.