1// This template requires the 'motion' animation library to be installed:
2//
3// npm install motion
4
5"use client";
6
7import { motion } from "motion/react";
8
9const FlippingText = () => {
10 return (
11 <div className="grid place-items-center gap-6">
12 <FlipText text="React" />
13 <FlipText text="Motion" />
14 <FlipText text="Tailwind" />
15 </div>
16 )
17}
18
19export default FlippingText
20
21const FlipText = ({ text }: { text: string }) => {
22 return (
23 <motion.div initial="initial" whileHover="hovered" style={{ lineHeight: 0.75 }} className="relative w-max block overflow-hidden whitespace-nowrap text-4xl font-black uppercase sm:text-7xl md:text-8xl lg:text-9xl">
24 <div>
25 {text.split("").map((l, i) => (
26 <motion.span className="inline-block" key={i} variants={{
27 initial: { y: 0 },
28 hovered: { y: "-100%" }
29 }}
30 transition={{
31 delay: 0.03 * i,
32 duration: 0.25,
33 ease: "easeInOut"
34 }}
35 >
36 {l}
37 </motion.span>
38 ))}
39 </div>
40 <div aria-hidden className="absolute inset-0">
41 {text.split("").map((l, i) => (
42 <motion.span className="inline-block" key={i} variants={{
43 initial: { y: "100%" },
44 hovered: { y: 0 }
45 }}
46 transition={{
47 delay: 0.03 * i,
48 duration: 0.25,
49 ease: "easeInOut"
50 }}
51 >
52 {l}
53 </motion.span>
54 ))}
55 </div>
56 </motion.div>
57 )
58}
59