Flashlight

`<pura-flashlight>` hides a second layer of content behind a beam of light that follows the pointer across the section, the classic awwwards hero flashlight (Aceternity's SVG Mask Effect). The default slot is the always-visible base layer; the `reveal` slot is an overlay clipped by a `mask-image: radial-gradient()` whose centre is steered by `--pura-flashlight-x` / `--pura-flashlight-y` on pointer move, plus a soft screen-blended halo so the beam reads as light. `size` sets the beam diameter, `softness` its edge feather, and `resting` the pre-pointer paint: `closed` (default) keeps the reveal layer hidden until hover, `center` shows it through a centred beam. SSR paints exactly that resting state, and under reduced motion the reveal layer renders fully visible with no pointer dependence. Give the reveal layer its own background and mark purely decorative copies `aria-hidden="true"` so screen readers hear the content once. Each instance registers in `window.__puraFlashlights` by `data-pura-id` and mirrors state in `data-pura-flashlight-*`. Unlike `pura-spotlight` (onboarding focus) and `pura-magic-card` (card-scoped glow), this masks a whole alternate content layer.

Preview

<!-- hidden message revealed by the beam -->
<pura-flashlight size="260" softness="0.3">
  <div class="hero-dark">What you see in the dark</div>
  <div slot="reveal" aria-hidden="true" class="hero-lit">What the light reveals</div>
</pura-flashlight>

<!-- color photo revealed over its grayscale twin, beam centred before hover -->
<pura-flashlight resting="center" size="300" style="--pura-flashlight-radius: 12px;">
  <img src="https://picsum.photos/seed/flash/900/420?grayscale" alt="City at night" style="display:block; width:100%;" />
  <img slot="reveal" src="https://picsum.photos/seed/flash/900/420" alt="" aria-hidden="true" style="display:block; object-fit:cover;" />
</pura-flashlight>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/flashlight.js"></script>

import "./pura/lib/flashlight.js";