Swoosh Text

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Swoosh Text
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { motion } from "motion/react";
14import { cn } from "@/lib/utils";
15 
16interface SwooshTextProps {
17  text?: string;
18  className?: string;
19  shadowColors?: {
20    first?: string;
21    second?: string;
22    third?: string;
23    fourth?: string;
24    glow?: string;
25  };
26}
27 
28export default function SwooshText({
29  text = "Hover Me",
30  className = "",
31  shadowColors = {
32    first: "#07bccc",
33    second: "#e601c0",
34    third: "#e9019a",
35    fourth: "#f40468",
36    glow: "#f40468",
37  },
38}: SwooshTextProps) {
39  const textShadowStyle = {
40    textShadow: `10px 10px 0px ${shadowColors.first}, 
41                     15px 15px 0px ${shadowColors.second}, 
42                     20px 20px 0px ${shadowColors.third}, 
43                     25px 25px 0px ${shadowColors.fourth}, 
44                     45px 45px 10px ${shadowColors.glow}`,
45  };
46 
47  const noShadowStyle = {
48    textShadow: "none",
49  };
50 
51  return (
52    <div className="w-full text-center">
53      <motion.div
54        className={cn(
55          "w-full cursor-pointer text-center font-bold text-3xl",
56          "tracking-widest transition-all duration-200 ease-in-out",
57          "text-black italic dark:text-white",
58          "stroke-[#d6f4f4]",
59          className
60        )}
61        style={textShadowStyle}
62        whileHover={noShadowStyle}
63      >
64        {text}
65      </motion.div>
66    </div>
67  );
68}