Interaction between the banner and the mouse cursor

Ask Me Anything Q&A Themesofficehoursrepo

Topic summary

A user wants to recreate an interactive banner effect from the Shopify Supply homepage where the banner responds to mouse cursor movement.

Solution provided:

  • This effect requires custom coding and isn’t available in default Shopify themes
  • Implementation involves three main steps:
    1. Create a custom section in the theme code (interactive-banner.liquid)
    2. Add JavaScript to track mouse position and update visual elements accordingly
    3. Apply CSS styling for transitions, gradients, and visual polish

Alternative: Hire a Shopify developer to build this as a custom section if coding isn’t an option.

The discussion remains open with no follow-up from the original poster.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
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 Likes
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