Glitch Text

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Glitch 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 { useRef } from "react";
15import { cn } from "@/lib/utils";
16 
17interface GlitchTextProps {
18  text: string;
19  className?: string;
20  glitchIntensity?: "light" | "medium" | "heavy" | "extreme";
21  color?:
22    | "rainbow"
23    | "blue"
24    | "purple"
25    | "cyan"
26    | "pink"
27    | "orange"
28    | "gradient-orange";
29  backgroundColor?: string;
30  isStatic?: boolean;
31  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | number;
32  fontWeight?: number;
33  letterSpacing?: number;
34}
35 
36const GlitchText = ({
37  text = "Glitch Text",
38  className,
39  glitchIntensity = "medium",
40  color = "gradient-orange",
41  backgroundColor,
42  isStatic = false,
43  size = "md",
44  fontWeight = 700,
45  letterSpacing = 5,
46}: GlitchTextProps) => {
47  const containerRef = useRef<HTMLDivElement>(null);
48 
49  // Vibrant color schemes
50  const colorSchemes = {
51    rainbow: {
52      primary: "oklch(0.85 0.2 var(--rainbow-hue, 270))",
53      before: "oklch(0.9 0.15 calc(var(--rainbow-hue, 270) + 60))",
54      after: "oklch(0.8 0.25 calc(var(--rainbow-hue, 270) - 60))",
55    },
56    blue: {
57      primary: "oklch(0.65 0.2 250)", // Vibrant blue
58      before: "oklch(0.75 0.15 255)", // Lighter blue
59      after: "oklch(0.55 0.25 245)", // Deeper blue
60    },
61    purple: {
62      primary: "oklch(0.6 0.22 290)", // Rich purple
63      before: "oklch(0.7 0.18 295)", // Lighter purple
64      after: "oklch(0.5 0.25 285)", // Deep purple
65    },
66    cyan: {
67      primary: "oklch(0.8 0.15 200)", // Bright cyan
68      before: "oklch(0.85 0.12 205)", // Light cyan
69      after: "oklch(0.7 0.18 195)", // Deep cyan
70    },
71    pink: {
72      primary: "oklch(0.7 0.25 330)", // Vibrant pink
73      before: "oklch(0.8 0.2 335)", // Light pink
74      after: "oklch(0.6 0.28 325)", // Deep pink
75    },
76    orange: {
77      primary: "oklch(0.7 0.25 45)", // Vibrant tangerine orange
78      before: "oklch(0.85 0.2 40)", // Warm light orange
79      after: "oklch(0.6 0.28 50)", // Deep sunset orange
80    },
81    "gradient-orange": {
82      primary:
83        "linear-gradient(135deg, oklch(0.7 0.25 45) 0%, oklch(0.75 0.28 30) 50%, oklch(0.65 0.3 60) 100%)",
84      before:
85        "linear-gradient(135deg, oklch(0.85 0.2 40) 0%, oklch(0.8 0.22 25) 50%, oklch(0.75 0.25 55) 100%)",
86      after:
87// … truncated