Smooth Scroll Parallax Effect

Heroes 1

About

Get a nice landing page with smooth scroll with lenis and parallax effect

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

Code

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

Usage.tsx

import { SmoothScrollContainer, Navigation, ParallaxHero, ParallaxImage, ScheduleSection } from "@/components/ui/smooth-scroll-parallax-effect";
import { SiSpacex } from "react-icons/si";

const SmoothScrollHeroDemo = () => {
  const scheduleItems = [
    { title: "NG-21", date: "Dec 9th", location: "Florida" },
    { title: "Starlink", date: "Dec 20th", location: "Texas" },
    { title: "Starlink", date: "Jan 13th", location: "Florida" },
    { title: "Turksat 6A", date: "Feb 22nd", location: "Florida" },
    { title: "NROL-186", date: "Mar 1st", location: "California" },
    { title: "GOES-U", date: "Mar 8th", location: "California" },
    { title: "ASTRA 1P", date: "Apr 8th", location: "Texas" },
  ];

  const parallaxImages = [
    {
      src: "https://cdn.21st.dev/assets/mirror/68/68fd4edf19855762d0020e6ddbf3fdd31b7f768a6c65014d50ec6b36ef305b54.jpg",
      alt: "Space launch example",
      start: -200,
      end: 200,
      className: "w-1/3"
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/bc/bca64f76b38b6b3e0f1c2357292903fc428e16d47b49005201be8ba51377ce8c.jpg",
      alt: "Space launch example",
      start: 200,
      end: -250,
      className: "mx-auto w-2/3"
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/04/04691b2e29925f30eac3817ea8f65d973484b711822252a13c15248859e464da.jpg",
      alt: "Orbiting satellite",
      start: -200,
      end: 200,
      className: "ml-auto w-1/3"
    },
    {
      src: "https://cdn.21st.dev/assets/mirror/71/711f1a9ccb3786dcc00e8031191dc4d58c9377cefb54bf927806921a4a05a818.jpg",
      alt: "Orbiting satellite",
      start: 0,
      end: -500,
      className: "ml-24 w-5/12"
    }
  ];

  const handleCtaClick = () => {
    document.getElementById("launch-schedule")?.scrollIntoView({
      behavior: "smooth",
    });
  };

  return (
    <SmoothScrollContainer className="bg-background">
      <Navigation
        logo={<SiSpacex className="text-3xl" />}
        ctaText="LAUNCH SCHEDULE"
        onCtaClick={handleCtaClick}
      />
      
      <ParallaxHero
        backgroundImage="https://cdn.21st.dev/assets/mirror/3e/3ea1ee3ce8a8134c194baf880a7afabc7a43bad8d5672f7b0f74fff87344dcc4.jpg"
      >
        <div className="mx-auto max-w-5xl px-4 pt-[200px]">
          {parallaxImages.map((img, index) => (
            <ParallaxImage key={index} {...img} />
          ))}
        </div>
      </ParallaxHero>

      <ScheduleSection
        title="Launch Schedule"
        items={scheduleItems}
        id="launch-schedule"
      />
    </SmoothScrollContainer>
  );
};

export default SmoothScrollHeroDemo