Interaction between the banner and the mouse cursor

[ozeemendes]

Hi how can I do a top banner like this one in shopify supply home page: https://shopify.supply/

Like I want to create that interaction between the banner and the mouse cursor?

Thanks

[Moeed]

Hey @ozeemendes 

That animated cursor interaction on the Shopify Supply homepage is a custom-coded mouse effect layered over a banner, and while it looks smooth, it’s not something Shopify themes support by default. But here’s how you can achieve something similar:

1) Create a Custom Section

• Go to Online Store → Themes → Edit Code
• Under Sections, click “Add a new section”, e.g., interactive-banner.liquid
• Add basic HTML structure for your banner image and a canvas or div that will respond to cursor movement

2) Add the Mouse Interaction

• Insert JavaScript that tracks the mouse position and updates a shape, gradient, or image mask based on that

3) Style It with CSS

• Add visual polish: transitions, gradients, background images, etc.

If you’d rather not code this yourself, a Shopify developer can easily build this as a custom section for you, just let them know what you're looking for.

Best,

Moeed