Text Drop

SyntaxUI is a UI library

Step 1. Create a DropCharacters component

DropCharacters.tsx

import { motion } from 'framer-motion'
import React from 'react'

interface AnimatedCharactersProps {
  text: string
  className?: string
}

const DropCharacters: React.FC<AnimatedCharactersProps> = ({
  text,
  className = '',
}) => {
  const item = {
    hidden: {
      y: '200%',
      opacity: 0,
      transition: { ease: [0.455, 0.03, 0.515, 0.955], duration: 0.85 },
    },
    visible: {
      y: 0,
      opacity: 1,
      transition: { ease: [0.455, 0.03, 0.515, 0.955], duration: 0.75 },
    },
  }

  return (
    <div className={className}>
      {text.split(' ').map((word, wordIndex) => (
        <span key={wordIndex} className="whitespace-nowrap">
          {[...word, '\u00A0'].map((char, charIndex) => (
            <span key={charIndex} className="inline-block overflow-hidden">
              <motion.span className="inline-block" variants={item}>
                {char}
              </motion.span>
            </span>
          ))}
        </span>
      ))}
    </div>
  )
}

export default DropCharacters

Step 2. Create a TextDrop component

TextDrop.tsx

import { motion } from 'framer-motion'
import DropCharacters from './DropCharacters'

const TextDrop = ({ text }: { text: string }) => {
  const container = {
    visible: {
      transition: {
        staggerChildren: 0.025,
      },
    },
  }

  return (
    <motion.div initial="hidden" animate="visible" variants={container}>
      <div>
        <DropCharacters
          text={text}
          className="text-3xl font-semibold tracking-tight text-red-500" // Add your own class names here
        />
      </div>
    </motion.div>
  )
}

export default TextDrop

Step 3. Call the TextDrop component in your page

page.tsx

import TextDrop from './TextDrop'

export default function Page() {
  return <TextDrop text="SyntaxUI is a UI library" />
}

Text Drop

Build Faster, Launch Sooner!