Library

Parallax Hero

Parallax Hero

Multi-layer scroll parallax with sticky positioning, background blur, and text fade. Uses useScroll + useTransform for independent motion layers.

scrollparallaxheroframer-motion

Installation

bash
# Copy parallax-hero.tsx to your project
cp components/ui/parallax-hero.tsx your-project/components/ui/parallax-hero.tsx

How to use

tsx
import { ParallaxHero } from "@/components/ui/parallax-hero";
tsx
<ParallaxHero
  heading={<>Your Heading<br /><span className="text-blue-400">Here</span></>}
  subheading="A beautiful parallax hero section"
  backgroundImage="https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80"
  scrollHeight={50}
>
  <button className="px-6 py-3 bg-white text-black rounded-full">
    Get Started
  </button>
</ParallaxHero>

Dependencies

framer-motion

Exports

ParallaxHero

File

components/ui/parallax-hero.tsx
Preview
Parallax Hero
Component

Multi-layer scroll parallax with sticky positioning, background blur, and text fade effects. Scroll down to see it in action.

useScrolluseTransform
Made with