Cursor cut-off with Background Video
Hi everyone!
I crafted this cut-off effect for an upcoming project and thought I should share it with the community.
The window circle is animated using native Webflow interactions to follow the mouse movement through the viewport.
Using CSS3 Blending Modes I managed to make the background behind visible. In this case, I used a video background but it can be replaced by a static image or a gif. (Keep the same classes and replace the video bg for a regular div, then add the background image in the styling panel).
The Green version contains the demo content and some cosmetic styling, but I also included a "Warm/Clean" version (see footer) that contains just the effect so it's easier to implement on your own projects.
I encourage you to play around with backgrounds in both the Mask-BG and the Animated-BG to achieve some mesmerizing visuals.
A like is very appreciated if you clone and enjoy this work ♥️
Have fun building!