multi-direction-slide-text

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