ParallaxHero

Scroll parallax with blend text

A full-screen parallax hero section where the background image scrolls at a different speed than the foreground text, creating natural depth. Text uses mix-blend-mode difference to stay visible against any background color. Built for landing pages, portfolio showcases, and brand introduction sections that need an elegant scroll experience. Features Background image parallax — moves slower than scroll speed Configurable parallax strength (0–50%) Dual text areas — top right-aligned and bottom left-aligned Mix-blend-mode difference ensures text contrast on any background Grayscale toggle for background image Independent font controls for top and bottom text Text color control for both text elements Border radius control (0–100px) Responsive image handling with object-fit cover Framer Motion useScroll and useTransform for smooth parallax No dependencies Property Controls Content — top text · bottom text · background image Styling — text color · border radius · grayscale toggle Parallax — parallax strength (0–50%) Typography — top text font · bottom text font · size, weight, spacing, line height Technical Details Framer Motion useScroll and useTransform for parallax calculation Fixed positioning with clip-path for correct scroll behavior mix-blend-mode difference on text for universal contrast Responsive image with object-fit cover Use Cases Landing page heroes · Portfolio showcases · Product feature sections · Brand introductions · Storytelling sections · Editorial layouts · Agency homepages SEO Keywords framer parallax hero · framer scroll parallax · framer hero section · framer parallax component · framer hero background · framer scroll effect · framer parallax section · framer landing page hero · framer hero component · framer scroll component · framer code component · framer parallax background

Scroll parallax with blend text