Flashlight Reveal

Lights out. Your cursor is a flashlight with a dying battery that reveals a hidden layer.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Animated · Full motion: idle animation, physics and effects. animated (default)

A dark surface hides a second layer. The cursor (or finger) becomes a flashlight with a soft hot-spot and a dying-battery flicker, and the beam reveals what's underneath.

Installation

$ npx shadcn@latest add https://guetix.com/r/flashlight-reveal.json

Uses the shadcn CLI. It creates components/guetix/flashlight-reveal.tsx and installs nothing else.

Usage

example.tsx

"use client";

import FlashlightReveal from "@/components/guetix/flashlight-reveal";

export default function FlashlightRevealDemo({ variant = "animated" }: { variant?: string }) {
  return (
    <FlashlightReveal animated={variant !== "regular"}
      className="h-full min-h-[360px]"
      hidden={
        <div className="relative h-full w-full bg-[#0b1d33] [background-image:linear-gradient(rgba(125,211,252,.18)_1px,transparent_1px),linear-gradient(90deg,rgba(125,211,252,.18)_1px,transparent_1px)] [background-size:24px_24px]">
          <div className="absolute inset-0 grid place-items-center text-center">
            <div>
              <p className="font-mono text-xs uppercase tracking-[0.4em] text-sky-300">Blueprint · Rev 3</p>
              <p className="mt-3 text-4xl font-black text-white">You found the secret.</p>
              <p className="mt-2 font-mono text-sm text-sky-200/80">promo code: LIGHTS-ON</p>
            </div>
          </div>
        </div>
      }
    >
      <div className="grid h-full place-items-center text-center">
        <div>
          <p className="text-3xl font-black text-white/[0.07]">Nothing to see here.</p>
          <p className="mt-2 font-mono text-xs text-white/20">move your flashlight around</p>
        </div>
      </div>
    </FlashlightReveal>
  );
}

Easter eggsPromo codesBefore/after revealsStorytelling sections

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01The beam is a CSS mask on the hidden layer, positioned with variables, so there is no canvas and no re-render per frame.
02A separate `mix-blend-mode: screen` glow layer adds the hot-spot without washing out the reveal.
03Battery flicker = `steps(1,end)` keyframes.

Props

Prop	Type	Default	Description
hidden	ReactNode	—	What the beam reveals.
children	ReactNode	—	The dark surface.
radius	number	130	Beam radius (px).
beamColor	string	—	Beam tint.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

A "Lights on" toggle reveals everything for keyboard and screen-reader users.
Reduced motion: no flicker.

Flashlight Reveal

Lights out. Your cursor is a flashlight with a dying battery that reveals a hidden layer.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Open in v0

Animated · Full motion: idle animation, physics and effects. animated (default)

A dark surface hides a second layer. The cursor (or finger) becomes a flashlight with a soft hot-spot and a dying-battery flicker, and the beam reveals what's underneath.

Installation

$ npx shadcn@latest add https://guetix.com/r/flashlight-reveal.json

Uses the shadcn CLI. It creates components/guetix/flashlight-reveal.tsx and installs nothing else.

Usage

example.tsx

"use client";

import FlashlightReveal from "@/components/guetix/flashlight-reveal";

export default function FlashlightRevealDemo({ variant = "animated" }: { variant?: string }) {
  return (
    <FlashlightReveal animated={variant !== "regular"}
      className="h-full min-h-[360px]"
      hidden={
        <div className="relative h-full w-full bg-[#0b1d33] [background-image:linear-gradient(rgba(125,211,252,.18)_1px,transparent_1px),linear-gradient(90deg,rgba(125,211,252,.18)_1px,transparent_1px)] [background-size:24px_24px]">
          <div className="absolute inset-0 grid place-items-center text-center">
            <div>
              <p className="font-mono text-xs uppercase tracking-[0.4em] text-sky-300">Blueprint · Rev 3</p>
              <p className="mt-3 text-4xl font-black text-white">You found the secret.</p>
              <p className="mt-2 font-mono text-sm text-sky-200/80">promo code: LIGHTS-ON</p>
            </div>
          </div>
        </div>
      }
    >
      <div className="grid h-full place-items-center text-center">
        <div>
          <p className="text-3xl font-black text-white/[0.07]">Nothing to see here.</p>
          <p className="mt-2 font-mono text-xs text-white/20">move your flashlight around</p>
        </div>
      </div>
    </FlashlightReveal>
  );
}

Easter eggsPromo codesBefore/after revealsStorytelling sections

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01The beam is a CSS mask on the hidden layer, positioned with variables, so there is no canvas and no re-render per frame.
02A separate `mix-blend-mode: screen` glow layer adds the hot-spot without washing out the reveal.
03Battery flicker = `steps(1,end)` keyframes.

Props

Prop	Type	Default	Description
hidden	ReactNode	—	What the beam reveals.
children	ReactNode	—	The dark surface.
radius	number	130	Beam radius (px).
beamColor	string	—	Beam tint.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

A "Lights on" toggle reveals everything for keyboard and screen-reader users.
Reduced motion: no flicker.

Flashlight Reveal

Preview

Flashlight Reveal

Preview