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.
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
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
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
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
Hamim Reza
