Dia Text Reveal

1"use client";
2 
3import { cn } from "@/lib/utils";
4import {
5  animate,
6  type MotionProps,
7  motion,
8  useInView,
9  useMotionValue,
10  useReducedMotion,
11  useTransform,
12} from "motion/react";
13import {
14  type ComponentType,
15  type ElementType,
16  type ReactNode,
17  type Ref,
18  useCallback,
19  useEffect,
20  useImperativeHandle,
21  useLayoutEffect,
22  useMemo,
23  useRef,
24  useState,
25} from "react";
26 
27type EaseValue =
28  | "linear"
29  | "easeIn"
30  | "easeOut"
31  | "easeInOut"
32  | "circIn"
33  | "circOut"
34  | "circInOut"
35  | "backIn"
36  | "backOut"
37  | "backInOut"
38  | "anticipate"
39  | readonly [number, number, number, number]
40  | ((t: number) => number);
41 
42export interface DiaTextRevealHandle {
43  /** (Re)starts the sweep immediately, ignoring startOnView/inView gating. */
44  play: () => void;
45  /** Resets to the first phrase and starts the sweep immediately. */
46  replay: () => void;
47}
48 
49export interface DiaTextRevealProps {
50  /** Render as a different element/component instead of `span`. */
51  as?: ElementType;
52  className?: string;
53  colors?: string[];
54  delay?: number;
55  /** Sweep direction across the text. @default "ltr" */
56  direction?: "ltr" | "rtl";
57  duration?: number;
58  /** Easing for the reveal sweep. */
59  ease?: EaseValue;
60  fadeDuration?: number;
61  /** Easing for the fade-out between repeats. */
62  fadeEase?: EaseValue;
63  /** Lock width to the longest phrase so rotating text does not shift layout. */
64  fixedWidth?: boolean;
65  holdDuration?: number;
66  inViewMargin?:
67    | `${number}px`
68    | `${number}px ${number}px`
69    | `${number}px ${number}px ${number}px`
70    | `${number}px ${number}px ${number}px ${number}px`;
71  /** Called every time a phrase finishes revealing (fully visible). */
72  onComplete?: () => void;
73  once?: boolean;
74  ref?: Ref<DiaTextRevealHandle>;
75  repeat?: boolean;
76  repeatDelay?: number;
77  startOnView?: boolean;
78  text: string | string[];
79  /** Final revealed text color. @default "currentColor" */
80  textColor?: string;
81}
82 
83const DEFAULT_EASE: EaseValue = [0.23, 1, 0.32, 1];
84 
85function buildGradient(colors: string[], textColor: string, angle: number) {
86  const bandStart = 40;
87  const bandEnd = 60;
88  const stops = colors.map((color, index) => {
89    const t = colors.length === 1 ? 0.5 : index / (colors.length - 1);
90    const pct = bandStart + t * (bandEnd - bandStart);
91    return `${color} ${pct}%`;
92  });
93 
94  // First third = final text color, middle = chromatic ribbon, last third =
95  // transparent (hidden). Start at background-position 100% (transparent),
96// … truncated