"use client"; import React, { useEffect, useRef, useState } from "react"; import { useMotionValueEvent, useScroll } from "motion/react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; export const StickyScroll = ({ content, contentClassName, }: { content: { title: string; description: string; content?: React.ReactNode | any; }[]; contentClassName?: string; }) => { 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 (

{content.map((item, index) => (

{item.title} {item.description}

))}

); };

Sticky Scroll Reveal

Instalação

Dependências