FX · Interactions

Hovering darkens everything except a beam that follows the pointer.

bash
npx shadcn@latest add https://www.rad-ui.com/r/flashlight.json
React
import Flashlight from "@/components/fx/flashlight" <Flashlight><Grid /></Flashlight>
  • Fully lit by default and whenever keyboard focus is inside, so nothing is hidden from people not using a mouse.
  • The darkness is an aria-hidden overlay; content and focus order are untouched.
  • Forced-colours mode drops the overlay.
PropTypeDefaultDescription
radius
number
140

Beam radius in px.

darkness
number
0.82

How dark the surroundings get, 0–1.

...props
ComponentProps<'div'>
—

Passed to the root div.