Weave Text

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6import { useInViewport } from "@/registry/lib/use-in-viewport"
7 
8export interface WeaveTextProps extends React.ComponentProps<"span"> {
9  /**
10   * Colors woven through the gradient, left to right. The first color is
11   * repeated at the end so the loop is seamless.
12   */
13  colors?: string[]
14  /** Seconds for one full pass. Lower is faster. */
15  duration?: number
16  /** Render a static gradient with no animation. */
17  paused?: boolean
18}
19 
20const DEFAULT_COLORS = ["#2dd4bf", "#38bdf8", "#3b82f6", "#67e8f9"]
21 
22export function WeaveText({
23  children,
24  className,
25  colors = DEFAULT_COLORS,
26  duration = 8,
27  paused = false,
28  style,
29  ...props
30}: WeaveTextProps) {
31  const root = React.useRef<HTMLSpanElement>(null)
32  const onScreen = useInViewport(root)
33  const backgroundImage = React.useMemo(() => {
34    const stops = colors.length > 0 ? colors : DEFAULT_COLORS
35    return `linear-gradient(90deg, ${[...stops, stops[0]].join(", ")})`
36  }, [colors])
37 
38  return (
39    <span
40      ref={root}
41      data-slot="weave-text"
42      className={cn(
43        "inline-block bg-[length:200%_auto] bg-clip-text text-transparent",
44        !paused && "animate-weave motion-reduce:animate-none",
45        !onScreen && "[animation-play-state:paused]",
46        className
47      )}
48      style={{
49        backgroundImage,
50        animationDuration: `${duration}s`,
51        ...style,
52      }}
53      {...props}
54    >
55      {children}
56    </span>
57  )
58}