speeding text

"use client"

import { motion } from 'motion/react'

const SpeedingText = ({ word = 'animations' }: { word?: string }) => {
  const wordLengthHalf = Math.floor(word.length / 2)

  return (
    <div className="w-40 h-40 flex items-center justify-center">
      <div>
        {Array.from(Array(2)).map((wordHalf, index) => (
          <motion.p
            animate={{ opacity: 1, x: 0, skewX: 0 }}
            className='text-orange-400 text-5xl'
            initial={{ opacity: 0, x: index > 0 ? 200 : -200, skewX: index > 0 ? 70 : -70 }}
            key={"word.slice(index * wordLengthHalf, index * wordLengthHalf + wordLengthHalf)}-"+index}
            transition={{
              stiffness: 200,
              type: 'spring'
            }}
          >
            {word.slice(index * wordLengthHalf, index * wordLengthHalf + wordLengthHalf)}
          </motion.p>
        ))}
      </div>
    </div>
  )
}

export default SpeedingText