Sliced Text

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Sliced 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 SlicedTextProps {
17  text: string;
18  className?: string;
19  containerClassName?: string;
20  splitSpacing?: number;
21}
22 
23const SlicedText: React.FC<SlicedTextProps> = ({
24  text = "Sliced Text",
25  className = "",
26  containerClassName = "",
27  splitSpacing = 2,
28}) => (
29  <motion.div
30    className={cn(
31      "relative inline-block w-full text-center",
32      containerClassName
33    )}
34    initial="default"
35    whileHover="hover"
36  >
37    <motion.div
38      className={cn("absolute -ml-0.5 w-full text-4xl", className)}
39      transition={{ duration: 0.1 }}
40      variants={{
41        default: {
42          clipPath: "inset(0 0 50% 0)",
43          y: -splitSpacing / 2,
44          opacity: 1,
45        },
46        hover: {
47          clipPath: "inset(0 0 0 0)",
48          y: 0,
49          opacity: 0,
50        },
51      }}
52    >
53      {text}
54    </motion.div>
55    <motion.div
56      className={cn("absolute w-full text-4xl", className)}
57      transition={{ duration: 0.1 }}
58      variants={{
59        default: {
60          clipPath: "inset(50% 0 0 0)",
61          y: splitSpacing / 2,
62          opacity: 1,
63        },
64        hover: {
65          clipPath: "inset(0 0 0 0)",
66          y: 0,
67          opacity: 1,
68        },
69      }}
70    >
71      {text}
72    </motion.div>
73 
74    <div className={cn("invisible text-4xl", className)}>{text}</div>
75  </motion.div>
76);
77 
78export default SlicedText;