Sótano 2 · Archivo

Lo que buscas está aquí

Las cajas de 1987 siguen en la estantería del fondo. Nadie ha encendido la luz desde entonces.

HTML + CSSText & scroll

Hidden text under a flashlight

A dark basement: the beam of a flashlight follows the pointer, a finger or the arrow keys and reveals the writing on the wall.

Settings

16px
1x
85px

Code

<div class="uvq14-fl" tabindex="0" role="group" aria-label="Flashlight: move the light with the mouse, your finger or the arrow keys"><div class="tx"><p class="kc">Basement 2 · Archive</p><h3>What you're looking for is here</h3><p>The boxes from 1987 are still on the back shelf. Nobody has switched the light on since.</p></div><div class="lit" aria-hidden="true" translate="no"></div></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Text & scroll

See all Text & scroll

Where to use it

The page is pitch black until a warm circle of light passes over it. A copy of the text sits under a radial mask that follows the pointer, so the wall and the words appear only inside the beam, and the light wanders on its own when nobody moves it. It suits mystery teasers, escape rooms, games, museums and hidden offers.

Write the headline in the text field, edit the paragraph in the HTML and set the light color with the main color and the darkness with the secondary one. A slider changes the beam radius. The real text is always in the page for screen readers.