Typewriter Effect

'use client'

import { motion } from 'framer-motion'

const text = 'Welcome to UI-TripleD...'

export function TypewriterText() {
  const container = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.05,
      },
    },
  }

  const child = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 },
  }

  return (
    <motion.h2
      variants={container}
      initial="hidden"
      animate="visible"
      className="text-3xl font-bold"
    >
      {text.split('').map((char, index) => (
        <motion.span key={index} variants={child}>
          {char}
        </motion.span>
      ))}
    </motion.h2>
  )
}