The widget library for WordPress is here Download plugin

Interactive Parallax Collage Hero (Mouse-Move Effect)

Immerse your visitors immediately with the Interactive Parallax Collage Hero, a high-end landing page section that brings static imagery to life through user interaction. Inspired by Awwwards-winning design trends, this widget transforms a standard hero section into a 3D visual playground.

The layout features a sophisticated three-column structure: a central typographic core flanked by a scattered collage of four images. The defining feature is the Mouse-Move Parallax engine: as users move their cursor across the screen, the floating images shift in opposite directions at varying speeds (based on their assigned "depth"), creating a stunning sense of dimensionality and space.

Even when the user is idle, the images engage in a subtle, continuous "bobbing" float animation, ensuring the page never feels static. Combined with masked text reveals—where headlines slide up smoothly from invisible containers—this widget is perfect for digital agencies, architectural firms, and high-fashion portfolios looking to make a bold, modern statement.

Key Features:

  • Mouse-Interactive Parallax: Images react dynamically to cursor movement, shifting position to create a realistic 3D depth effect.
  • Continuous Floating Animation: Images gently float and breathe in an idle state, adding organic life to the section even without user interaction.
  • Cinematic Text Reveals: Headlines and subtitles utilize professional "masked" entrance animations, sliding up smoothly for a premium editorial look.
  • Staggered Image Entrance: Upon page load, images zoom and scale into place sequentially, guiding the user's eye toward the center content.
  • Fully Customizable: Edit all four images, change the background color (default is dark monochrome), and update typography to match your brand identity.

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.