ParallaxHero

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