Dia Text Reveal

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import {
5  animate,
6  motion,
7  useInView,
8  useMotionValue,
9  useReducedMotion,
10  useTransform,
11  type HTMLMotionProps,
12} from "motion/react"
13 
14import { cn } from "@/lib/utils"
15 
16const DEFAULT_COLORS = ["#c679c4", "#fa3d1d", "#ffb005", "#e1e1fe", "#0358f7"]
17const BAND_HALF = 17
18const SWEEP_START = -BAND_HALF
19const SWEEP_END = 100 + BAND_HALF
20 
21const sweepEase = (t: number) =>
22  t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2
23 
24function buildGradient(pos: number, colors: string[], textColor: string) {
25  const bandStart = pos - BAND_HALF
26  const bandEnd = pos + BAND_HALF
27 
28  if (bandStart >= 100) {
29    return `linear-gradient(90deg, ${textColor}, ${textColor})`
30  }
31  const n = colors.length
32  const parts: string[] = []
33 
34  if (bandStart > 0)
35    parts.push(`${textColor} 0%`, `${textColor} ${bandStart.toFixed(2)}%`)
36 
37  colors.forEach((c, i) => {
38    const pct = n === 1 ? pos : bandStart + (i / (n - 1)) * BAND_HALF * 2
39    parts.push(`${c} ${pct.toFixed(2)}%`)
40  })
41 
42  if (bandEnd < 100)
43    parts.push(`transparent ${bandEnd.toFixed(2)}%`, `transparent 100%`)
44 
45  return `linear-gradient(90deg, ${parts.join(", ")})`
46}
47 
48function measureWidths(el: HTMLElement, texts: string[]) {
49  const ghost = el.cloneNode() as HTMLElement
50  Object.assign(ghost.style, {
51    position: "absolute",
52    visibility: "hidden",
53    pointerEvents: "none",
54    width: "auto",
55    whiteSpace: "nowrap",
56  })
57  el.parentElement!.appendChild(ghost)
58  const widths = texts.map((t) => {
59    ghost.textContent = t
60    return ghost.getBoundingClientRect().width
61  })
62  ghost.remove()
63  return widths
64}
65 
66/**
67 * Props for {@link DiaTextReveal}.
68 */
69export interface DiaTextRevealProps extends Omit<
70  HTMLMotionProps<"span">,
71  "ref" | "children" | "style" | "animate" | "transition" | "color"
72> {
73  /**
74   * Text to reveal. Pass multiple strings to rotate when {@link DiaTextRevealProps.repeat} is `true`.
75   */
76  text: string | string[]
77  /**
78   * Colors sampled across the moving gradient band. Defaults to a built-in palette.
79   */
80  colors?: string[]
81  /**
82   * CSS color for revealed text after the sweep and for leading/trailing regions during the animation.
83   * @defaultValue `"var(--foreground)"`
84   */
85  textColor?: string
86  /**
87   * Duration of one sweep pass, in seconds.
88   * @defaultValue `1.5`
89   */
90  duration?: number
91  /**
92   * Delay before the sweep starts, in seconds.
93   * @defaultValue `0`
94   */
95  delay?: number
96  /**
97// … truncated