Smooth Scroll Hero

Heroes 2.1K

About

A React component that creates a smooth-scrolling hero section with parallax background effects. Features responsive images for mobile and desktop, with customizable scroll animations built using Framer Motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Smooth Scroll Hero to your project and fits it to your theme.

Code

How Smooth Scroll Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import SmoothScrollHero  from "@/components/ui/smooth-scroll-hero";

const DemoOne = () => {
  return (
    <div className="relative min-h-screen">
				<SmoothScrollHero
					scrollHeight={1500}
					desktopImage="https://cdn.21st.dev/assets/mirror/50/50b4b749aaf073843fc6cd19e1af2e06364caf610ae881ff9d309c3f84049cec.jpg"
					mobileImage="https://cdn.21st.dev/assets/mirror/1c/1c0b50c23cbd64dee0b682b601f50e5876ef5d3edca6056a3da18149021d4a79.jpg"
					initialClipPercentage={25}
					finalClipPercentage={75}
				/>
			</div>
  );
};

export { DemoOne };