Dynamic Focus Zoom Effect with CSS @property

How It Works

The dynamic focus zoom effect is created using CSS custom properties and a radial-gradient mask. By updating these properties based on mouse movement, we simulate a spotlight effect that follows the cursor.

First, we define the --focal-size @property rule, which controls the size of the spotlight effect. This allows for smooth transitions when changing the spotlight size.

Then, we use the mask-image property to create a radial gradient mask. The gradient is centered at the mouse position and transitions from transparent to black.

The mouse position is set using the --mouse-x and --mouse-y custom properties, which are updated using JavaScript.

Interactivity

We want to update the spotlight effect based on the mouse position, so we listen for pointermove events and update the --mouse-x and --mouse-y properties accordingly.

In order to activate the spotlight effect, we toggle the --focal-size property between 7vmax and 100%, whenever the Alt key is pressed.

Transitioning between states

In our transition, we target our --focal-size property and use the new linear timing function, which allows to generate spring-like easing curves.

Spring easing curves are a great way to create more natural and organic animations.

I've created the one I use in this demo using this website from Kevin Grajeda.

And that's it! Once again, thanks to Adam Argyle for the inspiration and the great talk.

I learned a lot from this project and I hope you did too! Especially working with mask-image combined with @property was a new experience for me.

Browser Support

Below you can see the current browser support for the features used in this demo.

Thanks for reading and see you in the next one 👋