Elevate your Framer site with the Stealth Spotlight.
Modern tech websites rely on subtle, high-end interactions to stand out. The Stealth Spotlight is a plug-and-play code component that adds a buttery-smooth, glowing mouse-reveal effect to your backgrounds. It stays pitch black until the user interacts, creating a deeply engaging "flashlight" effect over a precise architectural grid.
Why you'll love it:
Zero Design Required: Drop it onto your canvas and it works instantly.
Highly Customizable: Switch between precise Lines or modern Dots. Dial in your exact grid size, dot thickness, and custom brand colors right from the Framer properties panel.
Flawless Performance: Built natively with Framer Motion and optimized CSS masking. It runs at a perfect 60FPS with zero lag, ensuring your site stays lightning-fast.
Smart Canvas: The grid remains fully visible inside the Framer Editor so you can design effortlessly, but switches to "stealth mode" the second you hit publish.
Integrated Typography: Includes built-in, customizable text overlays that sit perfectly above the interaction.
How to use it:
Drag the component onto your canvas and set width/height to 100%.
Tweak the colors and grid type in the right-hand panel.
Hit preview and watch it glow.
If the platform asks you to list the included features or properties.
Grid Type Selector: Toggle between Lines, Dots, or None.
Grid Density: Sliders for Grid Spacing and precise Dot Size.
Spotlight Physics: Adjustable Glow Radius and Edge Softness.
Color Controls: Custom Background, Grid, and Text colors.
Custom Override: Ability to connect custom native Framer frames to be revealed by the spotlight.
1x Framer Remix Link (containing the fully set up component and a demo landing page).
Abdul Sami
