xlibs-components/dist/components/aceternity/sticky-scroll.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useRef, useState } from "react";
import { useMotionValueEvent, useScroll } from "framer-motion";
import { motion } from "framer-motion";
import { cn } from '../../lib/utils.js';
export const StickyScroll = ({ content, contentClassName, }) => {
    const [activeCard, setActiveCard] = React.useState(0);
    const ref = useRef(null);
    const { scrollYProgress } = useScroll({
        // uncomment line 22 and comment line 23 if you DONT want the overflow container and want to have it change on the entire page scroll
        // target: ref
        container: ref,
        offset: ["start start", "end start"],
    });
    const cardLength = content.length;
    useMotionValueEvent(scrollYProgress, "change", (latest) => {
        const cardsBreakpoints = content.map((_, index) => index / cardLength);
        const closestBreakpointIndex = cardsBreakpoints.reduce((acc, breakpoint, index) => {
            const distance = Math.abs(latest - breakpoint);
            if (distance < Math.abs(latest - cardsBreakpoints[acc])) {
                return index;
            }
            return acc;
        }, 0);
        setActiveCard(closestBreakpointIndex);
    });
    const backgroundColors = [
        "#0f172a", // slate-900
        "#000000", // black
        "#171717", // neutral-900
    ];
    const linearGradients = [
        "linear-gradient(to bottom right, #06b6d4, #10b981)", // cyan-500 to emerald-500
        "linear-gradient(to bottom right, #ec4899, #6366f1)", // pink-500 to indigo-500
        "linear-gradient(to bottom right, #f97316, #eab308)", // orange-500 to yellow-500
    ];
    const [backgroundGradient, setBackgroundGradient] = useState(linearGradients[0]);
    useEffect(() => {
        setBackgroundGradient(linearGradients[activeCard % linearGradients.length]);
    }, [activeCard]);
    return (_jsxs(motion.div, { animate: {
            backgroundColor: backgroundColors[activeCard % backgroundColors.length],
        }, className: "relative flex h-[30rem] justify-center space-x-10 overflow-y-auto rounded-md p-10", ref: ref, children: [_jsx("div", { className: "div relative flex items-start px-4", children: _jsxs("div", { className: "max-w-2xl", children: [content.map((item, index) => (_jsxs("div", { className: "my-20", children: [_jsx(motion.h2, { initial: {
                                        opacity: 0,
                                    }, animate: {
                                        opacity: activeCard === index ? 1 : 0.3,
                                    }, className: "text-2xl font-bold text-slate-100", children: item.title }), _jsx(motion.p, { initial: {
                                        opacity: 0,
                                    }, animate: {
                                        opacity: activeCard === index ? 1 : 0.3,
                                    }, className: "text-kg mt-10 max-w-sm text-slate-300", children: item.description })] }, item.title + index))), _jsx("div", { className: "h-40" })] }) }), _jsx("div", { style: { background: backgroundGradient }, className: cn("sticky top-10 hidden h-60 w-80 overflow-hidden rounded-md bg-white lg:block", contentClassName), children: content[activeCard].content ?? null })] }));
};