Make an unforgettable first impression with the Interactive Overlay Hero, a high-impact section inspired by brutalist editorial design and "Awwwards" winning websites. This widget is designed to turn your hero section into an interactive playground.

The visual foundation is a massive, viewport-responsive headline that spans the entire screen, acting almost as a texture. Sitting elegantly on top is a floating portrait card—a smaller image container with a stylish fixed tilt (-6deg) that mimics a tossed photograph.

The magic lies in the interaction: using lightweight JavaScript, the image actively follows the user's mouse cursor across the screen. This creates a playful "reveal" effect, allowing users to physically move the image aside to read the text underneath. Combined with a smooth, staggered entrance animation that slides the text up line-by-line, this widget offers a premium, immersive experience perfect for fashion brands, creative portfolios, and bold landing pages.

Key Features:

• Cursor-Following Interaction: The central image tracks mouse movement smoothly, adding dynamic playfulness to the page.
• Stylish Fixed Tilt: The image maintains a cool, editorial rotation angle (customizable) while moving, simulating a 3D physical object.
• Massive Responsive Typography: Text scales using viewport units (vw), ensuring the headline remains impactful and perfectly wrapped on any device.
• Staggered Text Entrance: Headlines animate in line-by-line with a premium easing curve for a cinematic loading sequence.
• Z-Index Layering: Creates true depth by physically layering the interactive image over the static background text.
• Zero Dependencies: Achieves complex motion effects using only Vanilla JavaScript and CSS—no heavy libraries required.