Text Highlight

1import { cn } from '@/lib/utils';
2import { type VariantProps, cva } from 'class-variance-authority';
3import * as React from 'react';
4 
5function buildHighlightBackground(rgb: string, angle: string) {
6  return [
7    `conic-gradient(at 0 100%, rgb(${rgb} / 100%) 1%, #fff0 3%) no-repeat 0 0 / auto 120%`,
8    `conic-gradient(from 180deg at 100% 0, #fff0, rgb(${rgb} / 100%) 1%, #fff0 4%) no-repeat 100% 100% / auto 120%`,
9    `linear-gradient(${angle}, rgb(${rgb} / 60%), rgb(${rgb} / 20%) 75%, rgb(${rgb} / 55%)) no-repeat center / auto`,
10  ].join(', ');
11}
12 
13const textHighlightVariants = cva(
14  'relative inline-block w-fit select-none whitespace-nowrap text-center font-semibold',
15  {
16    variants: {
17      size: {
18        sm: 'px-2 py-1 text-lg',
19        default: 'px-3 py-1.5 text-2xl',
20        lg: 'px-4 py-2 text-4xl',
21      },
22    },
23    defaultVariants: {
24      size: 'default',
25    },
26  }
27);
28 
29export interface TextHighlightProps
30  extends React.HTMLAttributes<HTMLSpanElement>,
31    VariantProps<typeof textHighlightVariants> {
32  /** RGB values (space-separated, e.g. "255 232 62") */
33  color: string;
34  /** Gradient angle (e.g. "50deg") */
35  angle?: string;
36  /** Rotation applied to the highlight (e.g. "1deg") */
37  rotate?: string;
38  /** Scale applied to the highlight (e.g. "1.1") */
39  scale?: string;
40  /** Skew applied to the highlight (e.g. "-5deg") */
41  skew?: string;
42}
43 
44const TextHighlight = React.forwardRef<HTMLSpanElement, TextHighlightProps>(
45  (
46    {
47      children,
48      className,
49      size,
50      color,
51      angle = '50deg',
52      rotate = '0deg',
53      scale = '1',
54      skew = '0deg',
55      ...props
56    },
57    ref
58  ) => {
59    return (
60      <span
61        ref={ref}
62        className={cn(textHighlightVariants({ size }), className)}
63        {...props}
64      >
65        <span
66          aria-hidden="true"
67          className="absolute inset-0"
68          style={{
69            zIndex: -1,
70            borderRadius: '3px 5px 3px 5px',
71            background: buildHighlightBackground(color, angle),
72            rotate,
73            scale,
74            transform: `skew(${skew})`,
75          }}
76        />
77        {children}
78      </span>
79    );
80  }
81);
82TextHighlight.displayName = 'TextHighlight';
83 
84export { TextHighlight, textHighlightVariants };