seperate-away-text

1"use client"
2 
3import clsx from "clsx"
4import { motion } from "motion/react"
5 
6interface SeparateAwayTextProps {
7  textLeft?: string
8  textRight?: string
9  className?: string
10}
11 
12export const SeparateAwayText: React.FC<SeparateAwayTextProps> = ({
13  textLeft = "",
14  textRight = "",
15  className = "",
16}) => {
17  const separate = {
18    hidden: { opacity: 0, y: 0 },
19    visible: (custom: number) => ({
20      opacity: 1,
21      y: custom * 5,
22      transition: { duration: 1.5 },
23    }),
24  }
25 
26  return (
27    <div className={className}>
28      <motion.h1
29        custom={-1}
30        variants={separate}
31        initial="hidden"
32        animate="visible"
33        className={clsx(
34          "font-display text-center font-bold drop-shadow-sm",
35          "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
36          "tracking-[-0.02em]",
37          "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
38        )}
39      >
40        {textLeft}
41      </motion.h1>
42      <motion.h1
43        custom={1}
44        variants={separate}
45        initial="hidden"
46        animate="visible"
47        className={clsx(
48          "font-display text-center font-bold drop-shadow-sm",
49          "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
50          "tracking-[-0.02em]",
51          "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
52        )}
53      >
54        {textRight}
55      </motion.h1>
56    </div>
57  )
58}