Section Transition System

import SectionTransitionSystem from "./index.jsx";

const sections = [
  {
    imageSrc: "/demo-assets/card-sample-1.jpg",
    heading: "Parallax hero",
    body: "This section moves on the y axis while the next section scrolls in.",
    mode: "parallax",
    y: 300,
    opacity: 0.75,
  },
  {
    bg: "#0a0a0a",
    eyebrow: "No transition",
    heading: "Static content block",
    body: "A normal section in the flow. No data attribute — it just scrolls naturally.",
  },
  {
    imageSrc: "/demo-assets/card-sample-2.jpg",
    heading: "Pinned section",
    body: "This section stays fixed while the next one wipes over it.",
    mode: "pin",
  },
  {
    bg: "#141414",
    eyebrow: "After the pin",
    heading: "Keep scrolling",
    body: "This section scrolled over the pinned one above.",
  },
  {
    bg: "#0a0a0a",
    heading: "Almost there",
    body: "One more section before the reveal.",
  },
  {
    imageSrc: "/demo-assets/card-sample-3.jpg",
    heading: "Revealed from behind",
    body: "This section rises from behind the one before it.",
    mode: "reveal",
    y: 240,
    opacity: 0.5,
  },
];

export default function SectionTransitionSystemDemo() {
  return <SectionTransitionSystem sections={sections} />;
}