scroller.jsx

import { useMotionValue } from 'framer-motion';
import { animate } from 'framer-motion';
import { motion } from 'framer-motion'
import { useEffect } from 'react';
import useMeasure from 'react-use-measure';

const CarouselWords = () => {
  return (
    <div className="flex flex-col overflow-hidden">
      <CarouselWord word={"Headless"} duration={40} />
      <CarouselWord word={"Your unique UX"} direction={-1} duration={32} />
      <CarouselWord word={"Easy to integrate"} duration={38} />
      <CarouselWord word={"Creative control"} direction={-1} duration={37} />
      <CarouselWord word={"Extend and Adapt"} duration={45}/>
    </div>
  );
};

// eslint-disable-next-line react/prop-types, no-unused-vars
const CarouselWord = ({ word, direction = 1, duration = 7 }) => {
  const xTranslation = useMotionValue(0)
  let [ref, {width}] = useMeasure()

  useEffect(() => {
    let controls;
    const finalPosition = direction * (-width / 2 - 16)
    console.log(finalPosition)

    controls = animate(xTranslation, [0, finalPosition], {
      ease: "linear",
      duration: duration,
      repeat: Infinity,
      repeatType: "loop",
      repeatDelay: 0,
    })
  }, [xTranslation, width])
  
  return (
    <motion.div
      ref={ref}
      style={{x: xTranslation}}
      className='w-max'
    >
      <div className={`text-[10rem] font-[700] leading-[0.9] gap-8 flex justify-end`}>
        <span className=" text-footer-bag">{word}</span>
        <span className=" text-white" style={{"-webkit-text-stroke-width": "0.075rem", "-webkit-text-stroke-color": "rgb(0,0,0)",}}>{word}</span>
        <span className=" text-footer-bag">{word}</span>
        <span className=" text-white" style={{"-webkit-text-stroke-width": "0.075rem", "-webkit-text-stroke-color": "rgb(0,0,0)",}}>{word}</span>
        <span className=" text-footer-bag">{word}</span>
        <span className=" text-white" style={{"-webkit-text-stroke-width": "0.075rem", "-webkit-text-stroke-color": "rgb(0,0,0)",}}>{word}</span>
        <span className=" text-footer-bag">{word}</span>
        <span className=" text-white" style={{"-webkit-text-stroke-width": "0.075rem", "-webkit-text-stroke-color": "rgb(0,0,0)",}}>{word}</span>
      </div>
    </motion.div>
  );
};

export default CarouselWords;