The Outlined Overlap Hero is an ultra-modern, editorial-inspired header component designed to make a massive visual impact the moment a page loads. It is a masterclass in high-end typography, utilizing a "sandwich" stacking technique where a bold heading is physically split by a media panel—passing behind the image as a solid fill and emerging over the top as a sharp, technical outline.

This widget is built specifically for designers and developers who need to break the "standard" boxy layout of typical websites. It is an ideal fit for:

• Premium Portfolios: For photographers, creative directors, and architects who want their names to feel "built-into" the imagery.
• High-End Fashion & Editorial: Sites that require a "Vogue" or "High-Snobiety" aesthetic where typography is treated as a structural element.
• Agency Landing Pages: To demonstrate technical sophistication and a "motion-first" design philosophy.
• Case Studies: Perfect for the top of a deep-dive project page to establish a strong brand identity immediately.

1. Sophisticated Stacking Logic (The "Sandwich" Effect)

The core of this widget is its three-dimensional stacking. The solid "Fill" text sits at the deepest layer, the image panel occupies the middle ground, and a perfectly synchronized "Outline" layer sits on top. This creates a complex visual depth that is usually impossible to achieve in standard website builders without heavy custom coding.

2. Dynamic Real-Time Clipping

The widget uses a high-performance JavaScript engine to calculate the exact intersection between your text and the image panel. As the screen resizes or the content changes, the "Outline" layer is clipped in real-time. This ensures that the outline only appears when it is physically overlapping the image, maintaining a clean, professional look at all times.

3. Live-Sync Typography

The "Fill" and "Outline" layers are intelligently linked. Using a built-in MutationObserver, the widget detects any changes you make to the heading in the editor. If you change a single letter or add a line break, the outline layer mirrors it instantly, keeping the effect perfectly aligned without any manual adjustment.

4. Editorial Meta-Data Layout

Beyond the heading, the widget includes a structured "Meta" area (typically for project indexing like 01 / 14). This reinforces the editorial "magazine" feel and provides a dedicated space for secondary information like dates, categories, or project numbers.

5. Mobile-Responsive Intelligence

While the overlapping effect is a desktop powerhouse, the widget automatically adapts for mobile. At smaller breakpoints, the layout shifts to a vertically stacked grid. This prioritizes readability and SEO performance on phones while maintaining the bold, oversized typography that defines the style.

6. Fluid Engine Compatibility

Built to be 100% stable within Squarespace, the widget respects the boundaries of the Fluid Engine while extending its capabilities. It is lightweight, hardware-accelerated, and designed to load instantly without the "jitter" associated with many third-party sliders or hero scripts.