Comic Text

1"use client"
2 
3import { type CSSProperties } from "react"
4import { motion } from "motion/react"
5 
6import { cn } from "@/lib/utils"
7 
8type ComicTextProps = {
9  children: string
10  className?: string
11  style?: CSSProperties
12  fontSize?: number
13}
14 
15export function ComicText({
16  children,
17  className,
18  style,
19  fontSize = 5,
20}: ComicTextProps) {
21  if (typeof children !== "string") {
22    throw new Error("children must be a string")
23  }
24 
25  const dotColor = "#EF4444"
26  const backgroundColor = "#FACC15"
27 
28  return (
29    <motion.div
30      className={cn("text-center select-none", className)}
31      style={{
32        fontSize: `${fontSize}rem`,
33        fontFamily: "'Bangers', 'Comic Sans MS', 'Impact', sans-serif",
34        fontWeight: "900",
35        WebkitTextStroke: `${fontSize * 0.35}px #000000`, // Thick black outline
36        transform: "skewX(-10deg)",
37        textTransform: "uppercase",
38        filter: `
39          drop-shadow(5px 5px 0px #000000) 
40          drop-shadow(3px 3px 0px ${dotColor})
41        `,
42        backgroundColor: backgroundColor,
43        backgroundImage: `radial-gradient(circle at 1px 1px, ${dotColor} 1px, transparent 0)`,
44        backgroundSize: "8px 8px",
45        backgroundClip: "text",
46        WebkitBackgroundClip: "text",
47        WebkitTextFillColor: "transparent",
48        ...style,
49      }}
50      initial={{ opacity: 0, scale: 0.8, rotate: -2 }}
51      animate={{ opacity: 1, scale: 1, rotate: 0 }}
52      transition={{
53        duration: 0.6,
54        ease: [0.175, 0.885, 0.32, 1.275],
55        type: "spring",
56      }}
57    >
58      {children}
59    </motion.div>
60  )
61}