Fluid Gradient Text

1"use client"
2 
3import { motion, useMotionValue, useSpring, useTransform } from "motion/react"
4 
5export type FluidGradientTextProps = {
6  /** Text content rendered inside the SVG. */
7  text: string
8  /**
9   * SVG viewBox width used to scale the gradient and text layout.
10   * @default 1200
11   * */
12  svgViewBoxWidth?: number
13  /**
14   * SVG viewBox height used as the base text size.
15   * @default 300
16   * */
17  svgViewBoxHeight?: number
18}
19 
20export function FluidGradientText({
21  text,
22  svgViewBoxWidth = 1200,
23  svgViewBoxHeight = 300,
24}: FluidGradientTextProps) {
25  const gradientX1Raw = useMotionValue(0.5)
26  const gradientX1 = useSpring(
27    useTransform(gradientX1Raw, [0, 1], [0, svgViewBoxWidth]),
28    {
29      stiffness: 150,
30      damping: 25,
31    }
32  )
33 
34  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
35    const containerRect = event.currentTarget.getBoundingClientRect()
36    gradientX1Raw.set(
37      (event.clientX - containerRect.left) / containerRect.width
38    )
39  }
40 
41  const handleMouseLeave = () => {
42    gradientX1Raw.set(0.5)
43  }
44 
45  return (
46    <div
47      className="relative size-full overflow-hidden after:absolute after:bottom-0 after:h-px after:w-full after:bg-current/15"
48      onMouseMove={handleMouseMove}
49      onMouseLeave={handleMouseLeave}
50    >
51      <svg
52        className="size-full translate-y-[37.5%] select-none"
53        viewBox={`0 0 ${svgViewBoxWidth} ${svgViewBoxHeight}`}
54        fill="none"
55        xmlns="http://www.w3.org/2000/svg"
56      >
57        <text
58          x="50%"
59          y="50%"
60          textAnchor="middle"
61          dominantBaseline="central"
62          stroke="currentColor"
63          strokeOpacity="0.1"
64          strokeWidth="2"
65          fill="url(#fluid_gradient_text_linear)"
66          style={{
67            fontFamily: "Helvetica",
68            fontSize: svgViewBoxHeight,
69            fontWeight: "bold",
70          }}
71        >
72          {text}
73        </text>
74        <defs>
75          <motion.linearGradient
76            id="fluid_gradient_text_linear"
77            x1={gradientX1}
78            y1="0"
79            x2={svgViewBoxWidth / 2}
80            y2={svgViewBoxHeight}
81            gradientUnits="userSpaceOnUse"
82          >
83            <stop offset="0.625" stopColor="currentColor" stopOpacity="0" />
84            <stop offset="1" stopColor="currentColor" />
85          </motion.linearGradient>
86        </defs>
87      </svg>
88    </div>
89  )
90}