The widget library for Squarespace is here Learn more

Awwwards Parallax Stacked Hero

This stacked hero widget is a premium, editorial-style section designed to make a strong first impression. It combines oversized split headline words, layered image cards, and subtle motion to create a polished, cinematic feel.

The layout is built around depth and balance. The headline sits on the left and right, slightly overlapping the image stack in the center, which gives the whole section a bold and modern composition. The stacked images feel like floating cards, with each layer rotated and positioned to create a sense of space and visual rhythm.

The hover interaction adds another level of refinement. Instead of all the images zooming at once, each card moves with its own pace, creating a smoother and more natural parallax effect. When the cursor leaves, the motion eases out gently, so the transition feels intentional rather than abrupt.

The widget is also flexible and easy to customize. The headline text can be changed for different brand stories, and the image cards can be replaced with any visuals that match the page. The overlay on the images can be adjusted through CSS variables, making it easy to fine-tune the mood, contrast, and overall look.

This makes the widget a strong choice for creative studios, portfolios, product launches, editorial landing pages, and brand-focused websites. It feels refined, modern, and visually memorable without becoming overly complex or decorative.

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.