Decorated Text

1import React from 'react';
2import { motion } from 'motion/react';
3import { cn } from '@/lib/utils';
4 
5interface DecoratedTextProps {
6  text?: string;
7  children?: React.ReactNode;
8  className?: string;
9  bordered?: boolean;
10  showIcons?: boolean;
11  iconClassName?: string;
12  glowEffect?: boolean;
13  flicker?: boolean;
14}
15 
16function DecoratedText({
17  text,
18  children,
19  className,
20  bordered = true,
21  showIcons = true,
22  iconClassName,
23  glowEffect = true,
24  flicker = true,
25}: DecoratedTextProps) {
26  const content = text || children;
27 
28  return (
29    <motion.span
30      className={cn(
31        'group/decorated relative inline-block',
32        bordered && 'border border-black/20 dark:border-white/20',
33        className,
34      )}
35    >
36      {flicker && (
37        <motion.span
38          initial={{ opacity: 0 }}
39          animate={{ opacity: [0, 1, 0.4, 1, 0] }}
40          transition={{
41            duration: 0.45,
42            times: [0, 0.25, 0.5, 0.75, 1],
43            ease: 'easeOut',
44          }}
45          className='absolute inset-0 bg-black/10 dark:bg-white/10 pointer-events-none'
46        />
47      )}
48 
49      <motion.span
50        initial={flicker ? { opacity: 0 } : false}
51        animate={flicker ? { opacity: [0, 1, 0.3, 1] } : { opacity: 1 }}
52        transition={
53          flicker
54            ? { duration: 1.5, ease: 'easeInOut', times: [0, 0.4, 0.65, 1] }
55            : undefined
56        }
57        className='relative z-10 inline-block leading-none'
58      >
59        {content}
60      </motion.span>
61 
62      {showIcons && (
63        <>
64          <Icon
65            className={cn(
66              'absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2 h-3 w-3 text-black dark:text-white',
67              iconClassName,
68            )}
69          />
70          <Icon
71            className={cn(
72              'absolute bottom-0 left-0 -translate-x-1/2 translate-y-1/2 h-3 w-3 text-black dark:text-white',
73              iconClassName,
74            )}
75          />
76          <Icon
77            className={cn(
78              'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 h-3 w-3 text-black dark:text-white',
79              iconClassName,
80            )}
81          />
82          <Icon
83            className={cn(
84              'absolute bottom-0 right-0 translate-x-1/2 translate-y-1/2 h-3 w-3 text-black dark:text-white',
85              iconClassName,
86            )}
87          />
88        </>
89      )}
90 
91      {glowEffect && (
92        <motion.span
93// … truncated