The widget library for Squarespace is here Learn more

Organic Split Hero - Curved Mission Statement Section

lock Export Widget Available with Redesignee Premium

Captivate your audience immediately with the Organic Split Hero, a sophisticated "About Us" or "Mission" section designed to break the mold of traditional boxy web layouts. This widget utilizes a dynamic split-screen architecture where the content panel elegantly overlaps the imagery using a fluid, responsive S-curve.

At its core, this design is about connection. The smooth, organic curve (powered by advanced SVG clip-path technology) visually bridges the gap between your brand's mission statement and the supporting photography, creating a cohesive narrative flow. The left-hand panel features a commanding, large-scale headline (6rem) perfect for short, punchy vision statements, while the right-hand side provides ample space for high-quality team or culture photography.

A subtle but effective animated arrow adds a layer of interactivity, gently bouncing to guide the user’s eye downward from the headline to the descriptive text. This micro-interaction encourages reading and reduces bounce rates. Technically, the widget is built for performance and flexibility: the curve scales perfectly across all devices without pixelation, and the layout intelligently stacks into a vertical format on mobile screens to ensure legibility.

Key Features:

  • Responsive Organic Curve: Utilizes a scalable SVG clipPath to create a smooth, non-destructive wave shape that adapts to any screen size.
  • Modern Split-Screen Layout: overlapping design adds depth and dimension, moving away from flat, standard grids.
  • Animated Directional Cue: A bouncing arrow icon serves as a visual guide, directing focus to your core message.
  • High-Impact Typography: Bold, uppercase headlines are paired with clean sans-serif body text for maximum readability.
  • Fully Editable Media: Easily swap the background image and text to align with your specific 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.