1
npm i framer-motion

1
'use client';
2

3
import { useEffect, useRef } from 'react';
4
import { motion, useAnimationControls } from 'framer-motion';
5

6
type EpicNameDropProps = {
7
  name: string;
8
  className?: string;
9
  designationClassName?: string;
10
  designation?: string;
11
};
12

13
const EpicNameDrop = ({
14
  name,
15
  designation,
16
  designationClassName,
17
  className
18
}: EpicNameDropProps) => {
19
  const controls = useAnimationControls();
20
  const designationControls = useAnimationControls();
21
  const designationRef = useRef<HTMLParagraphElement | null>(null);
22

23
  useEffect(() => {
24
    (async () => {
25
      if (!designationRef.current) return;
26

27
      const width = designationRef.current?.offsetWidth;
28

29
      await Promise.all([
30
        controls.start('start'),
31
        designationControls.start({
32
          y: '-100%',
33
          x: `-${width}px`,
34
          transition: {
35
            duration: 1,
36
            ease: 'backOut'
37
          }
38
        })
39
      ]);
40
      await Promise.all([
41
        controls.start('enter'),
42
        designationControls.start({
43
          y: 0,
44
          x: `-${width}px`,
45
          transition: {
46
            duration: 1,
47
            ease: 'backOut'
48
          }
49
        })
50
      ]);
51
      await Promise.all([
52
        controls.start('slide'),
53
        designationControls.start({
54
          y: 0,
55
          x: `${width}px`,
56
          transition: {
57
            duration: 2,
58
            ease: 'linear'
59
          }
60
        })
61
      ]);
62
      await Promise.all([controls.start('exit'), designationControls.start('exit2')]);
63
      controls.start('textEntry');
64

65
      return () => controls.stop();
66
    })();
67
  }, [designationRef]);
68

69
  return (
70
    <div
71
      className={`h-full w-full flex flex-col flex-nowrap whitespace-nowrap overflow-hidden items-center justify-center relative`}
72
    >
73
      <motion.div
74
        initial={{
75
          y: '-100%',
76
          x: '70%'
77
        }}
78
        variants={{
79
          start: {
80
            y: '-100%',
81
            x: '70%',
82
            transition: {
83
              duration: 1,
84
              ease: 'backOut'
85
            }
86
          },
87
          enter: {
88
            y: 0,
89
            x: '70%',
90
            transition: {
91
              duration: 1,
92
              ease: 'backOut'
93
            }
94
          },
95
          slide: {
96
            y: 0,
97
            x: '-150%',
98
            transition: {
99
              duration: 1.4,
100
              ease: 'linear'
101
            }
102
          },
103
          exit: {
104
            display: 'none'
105
          }
106
        }}
107
        animate={controls}
108
        className="h-full w-full flex items-center justify-start absolute z-30"
109
      >
110
        <p className={`!text-[150px] font-extrabold ${className}`}>{name}</p>
111
      </motion.div>
112
      <motion.div
113
        initial={{
114
          y: '-100%',
115
          x: `-2360px`
116
        }}
117
        variants={{
118
          exit2: {
119
            display: 'none'
120
          }
121
        }}
122
        animate={designationControls}
123
        className="h-full w-full flex flex-col items-center justify-between absolute z-30 py-[50px]"
124
      >
125
        <p ref={designationRef} className={`!text-[150px] font-extrabold ${designationClassName}`}>
126
          {Array(2).fill(designation).join(' ')}
127
        </p>
128
        <p className={`!text-[150px] font-extrabold ${designationClassName}`}>
129
          {Array(2).fill(designation).join(' ')}
130
        </p>
131
      </motion.div>
132

133
      {/* For the background just like in the preview,
134
       you have to go to https://stackbits.dev/docs/prismaticHaze 
135
      and get that background in your project and then uncomment the code below */}
136
      {/* <motion.div
137
        initial={{
138
          opacity: 0
139
        }}
140
        animate={{
141
          opacity: 0.5,
142
          transition: {
143
            duration: 1,
144
            delay: 5
145
          }
146
        }}
147
        className="h-full w-full absolute"
148
      >
149
        <PrismaticHazeBackground>
150
          <div className="h-full w-full"></div>
151
        </PrismaticHazeBackground>
152
      </motion.div> */}
153

154
      <div
155
        className={`h-full absolute top-0 left-0 z-10 w-full flex flex-col flex-nowrap whitespace-nowrap overflow-hidden items-center justify-center`}
156
      >
157
        <motion.p
158
          initial={{
159
            opacity: 0,
160
            y: '50px'
161
          }}
162
          variants={{
163
            textEntry: {
164
              opacity: 1,
165
              y: 0,
166
              transition: {
167
                duration: 0.5,
168
                ease: 'backOut'
169
              }
170
            }
171
          }}
172
          animate={controls}
173
          className={className}
174
        >
175
          {name}
176
        </motion.p>
177
        <motion.p
178
          initial={{
179
            opacity: 0,
180
            y: '50px'
181
          }}
182
          variants={{
183
            textEntry: {
184
              opacity: 1,
185
              y: 0,
186
              transition: {
187
                duration: 0.5,
188
                ease: 'backOut',
189
                delay: 0.5
190
              }
191
            }
192
          }}
193
          animate={controls}
194
          className={`text-xl ${designationClassName}`}
195
        >
196
          {designation}
197
        </motion.p>
198
      </div>
199
    </div>
200
  );
201
};
202

203
export default EpicNameDrop;