Full Screen Scroll FX

Heroes 2K

About

React + GSAP full-screen scroll slideshow with animated sidebar navigation and smooth scroll triggered animations, fully customizable through props

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

Code

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

Usage.tsx

import React from "react";
import { FullScreenScrollFX, FullScreenFXAPI } from "@/components/ui/full-screen-scroll-fx";


const sections = [
  {
    leftLabel: "Silence",
    title: <>Absence</>,
    rightLabel: "Silence",
    background: "https://cdn.21st.dev/assets/mirror/25/2585dc7b94bccd4e7e1563adf7c49b1736bbc2c72c0a679839e14cccec86732c.jpg",
    audioSrc: "/sfx/click-01.mp3",
  },
  {
    leftLabel: "Essence",
    title: <>Stillness</>,
    rightLabel: "Essence",
    background: "https://cdn.21st.dev/assets/mirror/a8/a80c2e08f6ff1d61e187a0680491a5a6adfa759246e773ce2e07a79e38b2c9fd.jpg",
    audioSrc: "/sfx/whoosh-02.mp3",
  },
  {
    leftLabel: "Rebirth",
    title: <>Growth</>,
    rightLabel: "Rebirth",
    background: "https://cdn.21st.dev/assets/mirror/e6/e6522958d3a75757d5c9b65b066676fe523d45840d6136c5f7938667683d0b13.jpg",
    audioSrc: "/sfx/whoosh-02.mp3",
  },
  {
    leftLabel: "Change",
    title: <>Opportunity</>,
    rightLabel: "Change",
    background: "https://cdn.21st.dev/assets/mirror/73/73b6aeebbe8634633ffede7c9448bfca20873ecaff295242565cadf0106b9be1.jpg",
    audioSrc: "/sfx/whoosh-02.mp3",
  },
  // ...
];

export default function DemoOne() {
  const apiRef = React.useRef<FullScreenFXAPI>(null);

  return (
    <>
      <FullScreenScrollFX
        sections={ sections }
        header={<><div>The Creative</div><div>Process</div></>}
        footer={<div></div>}
        showProgress
        durations={{ change: 0.7, snap: 800 }}
      />
    </>
  );
}