Spotlight cutout
Full-screen SVG mask that dims everything except a rectangular cutout aligned to a target element. Drives the dark layer of a guided tour.
Production answer
Spotlight cutout is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Spotlight cutout states
Generative search brief
Spotlight cutout: Full-screen SVG mask that dims everything except a rectangular cutout aligned to a target element. Drives the dark layer of a guided tour.
Use case
First frame of every onboarding tour. The cutout draws focus to a single button or card while the rest of the UI sits behind a calm dim layer.
Static demo · cutout fixed at 120 / 80 / 320 × 140