text-animate

1"use client"
2 
3import { useRef, useState } from "react"
4import { motion, useInView } from "motion/react"
5 
6import { FadeIn } from "@/components/fade-in"
7 
8import TextAnimate from "../ui/text-animate"
9 
10// @ts-ignore
11const AnimationDemo = ({ type, children }) => {
12  const ref = useRef(null)
13  const isInView = useInView(ref, { once: true })
14  const [count, setCount] = useState(0)
15 
16  return (
17    <div className="flex flex-col relative" ref={ref}>
18      <div className="mt-8">
19        <FadeIn key={count}>{children}</FadeIn>
20      </div>
21      <div className="absolute top-0 -right-5 md:right-5">
22        <Refresh onClick={() => setCount(count + 1)} />
23      </div>
24      <div className="absolute bottom-0 -left-5 md:hidden">
25        <Refresh onClick={() => setCount(count + 1)} />
26      </div>
27    </div>
28  )
29}
30 
31const button = {
32  rest: { scale: 1 },
33  hover: { scale: 1.1 },
34  pressed: { scale: 0.95 },
35}
36const arrow = {
37  rest: { rotate: 0 },
38  hover: { rotate: 360, transition: { duration: 0.4 } },
39}
40 
41// @ts-ignore
42const Refresh = ({ onClick }) => {
43  return (
44    <motion.div
45      className="p-1 border border-dotted rounded w-7 h-7  flex justify-center items-center cursor-pointer"
46      onClick={onClick}
47      variants={button}
48      initial="rest"
49      whileHover="hover"
50      whileTap="pressed"
51    >
52      <motion.svg
53        width="16"
54        height="16"
55        xmlns="http://www.w3.org/2000/svg"
56        variants={arrow}
57      >
58        <path
59          d="M12.8 5.1541V2.5a.7.7 0 0 1 1.4 0v5a.7.7 0 0 1-.7.7h-5a.7.7 0 0 1 0-1.4h3.573c-.7005-1.8367-2.4886-3.1-4.5308-3.1C4.8665 3.7 2.7 5.85 2.7 8.5s2.1665 4.8 4.8422 4.8c1.3035 0 2.523-.512 3.426-1.4079a.7.7 0 0 1 .986.9938C10.7915 14.0396 9.2186 14.7 7.5422 14.7 4.0957 14.7 1.3 11.9257 1.3 8.5s2.7957-6.2 6.2422-6.2c2.1801 0 4.137 1.1192 5.2578 2.8541z"
60          className="fill-black dark:fill-white"
61          fillRule="nonzero"
62        />
63      </motion.svg>
64    </motion.div>
65  )
66}
67 
68export function TextAnimationDemo() {
69  return (
70    <AnimationDemo type="TextAnimate">
71      <div>
72        <div className="flex flex-col">
73          <div className="flex flex-col py-4">
74            <div className="grid grid-cols-1 md:grid-cols-2">
75              <div>
76                <p className="text-sm font-semibold">Roll In</p>
77                <div className="md:mt-12">
78                  <TextAnimate text="Roll In" type="rollIn" />
79                </div>
80              </div>
81 
82              <div>
83                <p className="text-sm font-semibold">Whip In</p>
84                <div className="md:mt-12">
85                  <TextAnimate
86                    text="Whip In"
87                    type="whipIn"
88                    className="text-lg"
89                  />
90                </div>
91              </div>
92              <div>
93                <p className="text-sm font-semibold">fade In</p>
94                <div className="md:mt-12">
95                  <TextAnimate text="Fade In" type="fadeIn" />
96                </div>
97              </div>
98 
99              <div>
100                <p className="text-sm font-semibold">Pop In</p>
101                <div className="md:mt-12">
102                  <TextAnimate text="Pop In" type="popIn" />
103                </div>
104              </div>
105 
106              <div>
107                <p className="text-sm font-semibold">Fade In Up</p>
108                <div className="md:mt-12">
109                  <TextAnimate text="Fade In Up" type="fadeInUp" />
110                </div>
111              </div>
112 
113              <div>
114                <p className="text-sm font-semibold">Shift In Up</p>
115                <div className="md:mt-12">
116                  <TextAnimate text="Shift In Up" type="shiftInUp" />
117                </div>
118              </div>
119 
120              <div>
121                <p className="text-sm font-semibold">Whip In Up</p>
122                <div className="md:mt-12">
123                  <TextAnimate text="Whip In Up" type="whipInUp" />
124                </div>
125              </div>
126 
127              <div>
128                <p className="text-sm font-semibold">Calm In Up</p>
129                <div className="md:mt-12">
130                  <TextAnimate text="Calm In Up" type="calmInUp" />
131                </div>
132              </div>
133            </div>
134          </div>
135        </div>
136      </div>
137    </AnimationDemo>
138  )
139}