fillingtext

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 FillingText = () => {
10    return (
11        <div className="grid place-items-center gap-6">
12            <FillText text="React" />
13            <FillText text="Motion" />
14            <FillText text="Tailwind" />
15        </div>
16    )
17}
18
19export default FillingText
20
21const FillText = ({ text }: { text: string }) => {
22    return (
23        <motion.div initial="initial" whileHover="hovered" style={{ lineHeight: 0.8 }} 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 text-transparent stroke-current" key={i} style={{ WebkitTextStroke: "4px black" }}>
27                        {l}
28                    </motion.span>
29                ))}
30            </div>
31            <div aria-hidden className="absolute inset-0">
32                {text.split("").map((l, i) => (
33                    <motion.span className="inline-block" key={i} variants={{
34                        initial: { y: "-100%" },
35                        hovered: { y: 0 }
36                    }}
37                        transition={{
38                            delay: 0.03 * i,
39                            duration: 0.25,
40                            ease: "easeInOut"
41                        }}
42                    >
43                        {l}
44                    </motion.span>
45                ))}
46            </div>
47        </motion.div>
48    )
49}
50