Spotlight Shader
A canvas shader with configurable spotlight beams shining from corners or edges. Supports multiple spotlights with custom colors, positions, and animations.
New components and templates every month
Build your next project in minutes, not hours.
We are a team of developers who are passionate about creating web apps that make you feel like you're in the future.
The shader accepts an array of spotlight configurations. Each spotlight has a position (top-left, top-right, bottom-left, etc.), color, intensity, size, and spread angle. Beams render as cones with soft gradients.
Colors can be specified as RGB tuples, hex strings, or CSS variables like "var(--color-yellow-500)". The shader parses these and converts them for canvas rendering. An ambient color provides the background between spotlights.
Optional animation causes spotlights to subtly shift position over time. An ease-in duration controls how quickly spotlights appear when the component mounts. A blur prop softens the edges of the light beams.
Works well for dramatic hero sections, event pages, product launches, or anywhere you want theatrical lighting effects behind content.
More from Shaders
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessAbout this block
The shader accepts an array of spotlight configurations. Each spotlight has a position (top-left, top-right, bottom-left, etc.), color, intensity, size, and spread angle. Beams render as cones with soft gradients.
Colors can be specified as RGB tuples, hex strings, or CSS variables like "var(--color-yellow-500)". The shader parses these and converts them for canvas rendering. An ambient color provides the background between spotlights.
Optional animation causes spotlights to subtly shift position over time. An ease-in duration controls how quickly spotlights appear when the component mounts. A blur prop softens the edges of the light beams.
Works well for dramatic hero sections, event pages, product launches, or anywhere you want theatrical lighting effects behind content.