This component recreates the iconic DVD idle screensaver: your logo (or any custom SVG) bounces around the screen, smoothly changing color whenever it hits the edge of the viewport. The screensaver automatically activates after a period of inactivity, and instantly disappears as soon as the user moves the mouse or presses a key.
What you can control
Custom SVG Logo → Upload or paste your own icon.
Inactivity Timeout → Decide how long before the screensaver activates.
Movement Speed → Adjust how fast the logo bounces around.
Color Changes → Enjoy randomized colors whenever the logo hits a border.
Of course, it’s entirely up to you how you intend to use the component. However, to achieve that classic screen saver look, all you need to do is:
Copy the component into your canvas.
Set up the position to Fixed with a width of 100% Relative and a height of 100vh. This ensures that the component will always cover the entire screen.
In the Styles section, set up the Pointer events and User Select both to „None.”
Change the Z index to a higher number so that the component sits comfortably „on top” of your content. That’s it, now you can adjust the component setting to your liking!
Build by Upper Left Studio - a small design studio specializing in digital products and eCommerce (Shopify).
We help clients transform strategic vision into compelling digital products, seamlessly guiding each stage from initial concept to final launch. Have a question? hit us at: hello@upperleft.design
Cezary Ołowski
