Interaction between the banner and the mouse cursor

Ask Me Anything Q&A Themesofficehoursrepo
1

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

2

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