"use client" import { type MotionValue, motion, useScroll, useTransform } from "motion/react" import { useEffect, useRef } from "react" const items = [ { text: "Content Creation", backgroundColor: "#FCB8FA" }, { text: "Social Media", backgroundColor: "#34C791" }, { text: "Email Marketing", backgroundColor: "#0F8DFF" }, { text: "Analytics", backgroundColor: "#FA5325" }, ] const StickyCard = ({ i, text, backgroundColor, progress, range, targetScale, }: { i: number text: string backgroundColor: string progress: MotionValue range: [number, number] targetScale: number }) => { const scale = useTransform(progress, range, [1, targetScale]) const rotateX = useTransform(progress, range, [0, 25]) const rotateY = useTransform(progress, range, [0, i % 2 === 0 ? 10 : -10]) const top = useTransform(progress, range, [0, 100]) return (

{text} {i + 1}

) } export const TtpPerspectiveCarousel = () => { const scrollContainerId = "preview-scroll-container" const scrollContainerRef = useRef(null) useEffect(() => { const container = document.getElementById(scrollContainerId) scrollContainerRef.current = container }, []) const { scrollYProgress } = useScroll({ target: scrollContainerRef, offset: ["start start", "end end"], container: scrollContainerRef, }) return (

{items.map((item, i) => { const targetScale = 0.3 return ( ) })}

) }