Animated Text

1"use client";
2 
3import { FC, useRef, useEffect } from "react";
4import { HTMLMotionProps, motion, useAnimation, useInView } from "motion/react";
5 
6type AnimationType =
7  | "blink"
8  | "rise"
9  | "expand"
10  | "glide"
11  | "cascade"
12  | "flicker"
13  | "elastic"
14  | "float";
15 
16interface Props extends HTMLMotionProps<"div"> {
17  text: string;
18  type?: AnimationType;
19  delay?: number;
20  duration?: number;
21  custom?: number;
22}
23 
24const animationVariants = {
25  blink: {
26    container: {
27      hidden: { opacity: 0 },
28      visible: (i: number = 1) => ({
29        opacity: 1,
30        transition: { staggerChildren: 0.05, delayChildren: i * 0.3 },
31      }),
32    },
33    child: {
34      visible: {
35        opacity: 1,
36        y: 0,
37        transition: {
38          type: "spring",
39          damping: 12,
40          stiffness: 100,
41          y: {
42            type: "keyframes",
43            times: [0, 0.5, 1],
44            values: [0, -10, 0],
45          },
46        },
47      },
48      hidden: { opacity: 0, y: 10 },
49    },
50  },
51  rise: {
52    container: {
53      hidden: { opacity: 0 },
54      visible: {
55        opacity: 1,
56        transition: { staggerChildren: 0.1, delayChildren: 0.2 },
57      },
58    },
59    child: {
60      visible: { opacity: 1, y: 0, transition: { duration: 0.5 } },
61      hidden: { opacity: 0, y: 20 },
62    },
63  },
64  expand: {
65    container: {
66      hidden: { opacity: 0, scale: 0.8 },
67      visible: {
68        opacity: 1,
69        scale: 1,
70        transition: { staggerChildren: 0.05, delayChildren: 0.2 },
71      },
72    },
73    child: {
74      visible: {
75        opacity: 1,
76        scale: 1,
77        transition: {
78          type: "spring",
79          damping: 15,
80          stiffness: 400,
81          scale: {
82            type: "keyframes",
83            times: [0, 0.6, 1],
84            values: [0, 1.1, 1],
85          },
86        },
87      },
88      hidden: { opacity: 0, scale: 0 },
89    },
90  },
91  float: {
92    container: {
93      hidden: {},
94      visible: (i: number = 1) => ({
95        transition: { staggerChildren: 0.03, delayChildren: 0.2 * i },
96      }),
97    },
98    child: {
99      hidden: {
100        y: 50,
101        opacity: 0,
102      },
103      visible: {
104        y: 0,
105        opacity: 1,
106        transition: {
107          duration: 0.5,
108          ease: "easeOut",
109        },
110      },
111    },
112  },
113  glide: {
114    container: {
115      hidden: {},
116      visible: (i: number = 1) => ({
117        transition: { staggerChildren: 0.03, delayChildren: 0.2 * i },
118      }),
119    },
120    child: {
121      hidden: {
122        y: 20,
123// … truncated