Mouse followed SpotLight

How to import code
Free
For individuals building simple Dashboards.
$0
Free forever
Access to 300 Components
Free Figma Kit
1 Project
Unlimited AI usage
Export Dashboard to Figma
Share with others
More awesome features
Save 15%
Starter
For teams building advanced Dashboards.
$32
Per member/month
Billed yearly
Access to 300 Components
PRO Figma Kit
3 Project
Unlimited AI usage
Export Dashboard to Figma
Share with others
More awesome features
Save 25%
Pro
For teams and professionals building Dashboards.
$40
Per member/month
Billed yearly
Access to 300 Components
PRO Figma Kit
Unlimited Project
Unlimited AI usage
Export Dashboard to Figma
Share with others
More awesome features

Mouse follow feature is part of Animation addon and it can be applied to any object. In this example, I created Container with static width and height and added half transparent radial gradient in Background options. You can also experiment with mix blend feature.

Now, you just need to place this container inside Animation container and enable mouse follow option. By default, it will be applied to whole window. If you want to limit it only by specific block, you need to add additional steps

Place class to block where you want to limit. Now, put the same class inside Animation trigger. Don’t forget to add dot before class name (you can use also any css selector)

If you want to clip spot by container, also put Overflow hidden in Spacing panel of bound container and enable clip by object in Animation container. You can set also custom z-index if you want to put this spotlight above content blocks (your content blocks must have bigger z-index).

Also, don’t forget to set position relative in bound container and put your mouse followed container as direct child of bound container

«
»