Spotlight Reveal

Spotlight Reveal: How to create an organic spotlight on complex interfaces

Not long ago, this was one of those things you’d see and think: “I wish I knew how to do that”.
As someone focused on UI/UX and visual branding, creative coding has always appealed to me… but it also felt out of reach. Too technical, too much documentation, and little connection to the visual side.

That has changed quite a bit now.

Today, you can go from idea to reality without wading through endless hours of docs. This effect, for example, isn’t just theory: I was able to replicate, understand, and tweak it to my liking in very little time.

The logic behind the effect: layers and masks

There’s no weird magic here. It’s all about controlling what the user perceives.

The effect is built with three very clear layers:

• Sharp UI
  A fintech dashboard in HTML/CSS and SVG, clean and well-defined.
• Blurred UI
  The same interface duplicated, but with a blur applied on top.
• Canvas as a mask
  A <canvas> that “cuts out” a hole using destination-out, revealing the sharp layer exactly where the cursor is.

What makes the difference: the organic shape

If you make a perfect circle, it feels cold. Mechanical.

To avoid that, the edge of the spotlight is deformed with sinusoidal noise with several harmonics.
The result: an irregular shape that moves subtly over time. It doesn't repeat. It feels alive.

And here are two details that really elevate the result:

• Soft edge
  No hard cuts. I use several layers of decreasing opacity so the transition is progressive and more natural.
• Inertia (lerp)
  The spotlight doesn't follow the mouse instantly. It lags slightly behind, using smooth interpolation.
  That slight delay gives it weight, making it more elegant.

From idea to code

The interesting thing about all this is that you no longer have to struggle with every line of code.

You can focus on the visual logic—on what you want to achieve—and let AI generate the foundation. Then you tweak it.

If you want to replicate it, this is the type of prompt that works well:

Prompt:

Create an HTML/JS canvas animation with a spotlight reveal effect over a fintech UI in dark mode.

Structure:

• Sharp UI (navy background #010408)
• Duplicated UI with blur
• Black canvas acting as a mask

The spotlight must:

• Have an organic shape (not circular) using sinusoidal noise with multiple harmonics
• Animate constantly, even when the mouse is not moving
• Have a soft edge (progressive transition)
• Maintain some opacity within the revealed area
• Include a blue glow with smoothed movement (lerp)

The UI must include:

• Sidebar with icons
• Balance + SVG bar chart
• Transaction list
• Market cards with sparklines
• Portfolio donut chart

Everything in pure HTML/CSS/SVG, without external libraries.

Add controls to adjust:

• Spotlight radius
• Blur
• Organicity
• Opacity
• Glow intensity

Conclusion

These types of experiments mark a clear shift:
going from seeing cool things… to being able to build them yourself.

For me, that’s exactly what it’s about:
translating a visual idea into something interactive, fast, and frictionless.

And, above all, without getting stuck on “I’ll do it someday”.

‍