Hey, so in my Portfolio I have a Hero Design which includes a background blur.
Behind the background blur, there are some colorful circles that move randomly when I move the mouse - the problem is that it’s super performance-heavy because it has to render the blur every time for each circle when moving the mouse.
Is there a workaround to keep the interactive blur mouse movement (or a similar one) without the PC dying when opening my home page?
(also for some reason, my nav blur doesn’t work on the home page and I have no idea why)
I took a look at your portfolio, and the interactive blur effect with the moving circles is a fantastic touch! However, I understand the performance concerns you’re facing. Here are a couple of suggestions to optimize it:
Debouncing Mouse Events: Consider implementing a debounce mechanism for the mouse movement events. This can help reduce the frequency of updates triggered by mouse movement, potentially improving performance.
Throttle Animation Updates: Throttle the updates for the moving circles. Instead of updating their positions for every mouse movement event, you can limit the frequency of these updates to ensure a smoother performance.
CSS Backdrop Filter: For the Hero Design, consider using the CSS backdrop-filter property instead of relying on a blur effect through interactions. This property provides a native browser solution for a background blur and could be less resource-intensive.
Regarding the nav blur issue, I noticed that the nav element on your home page doesn’t have a background applied, which might be causing the blur to appear differently. Double-check the styling and ensure that the nav element has the appropriate background for the blur effect to be visible.
If you encounter further challenges, feel free to provide more details or share specific interactions.
Great work on your portfolio, and I hope these suggestions help enhance the performance!
If i wanted to ask Chat GPT I would’ve asked - none of these things are applicable in webflow and I am already using backdrop filter. Furthermore none of them fix the main perfomance issue - there has to be an alternative to get a similar effect without using the circles and heavy background blur.
