Text Animation Dia Text Animation

1"use client";
2// beui.dev/components/motion/text-animation
3 
4import {
5  type MotionStyle,
6  motion,
7  type UseInViewOptions,
8  useInView,
9  useReducedMotion,
10} from "motion/react";
11import { useCallback, useEffect, useRef, useState } from "react";
12import { EASE_IN_OUT, EASE_OUT } from "@/lib/ease";
13import { cn } from "@/lib/utils";
14 
15const CHROMATIC_PALETTE = [
16  "#60a5fa",
17  "#818cf8",
18  "#c084fc",
19  "#fb7185",
20  "#fbbf24",
21];
22 
23const TRAIL_HALF_WIDTH = 14;
24const REVEAL_START = `-${TRAIL_HALF_WIDTH}%`;
25const REVEAL_FINISH = `${100 + TRAIL_HALF_WIDTH}%`;
26 
27export type ChromaticTextRevealProps = {
28  /** Sentence fragment that remains fixed while the final word changes. */
29  prefix: string;
30  /** Words revealed one after another after the fixed prefix. */
31  words: string[];
32  /** Colors used along the moving chromatic edge. */
33  colors?: string[];
34  /** Final text color after the sweep passes. */
35  foregroundColor?: string;
36  /** Sweep duration in seconds. */
37  duration?: number;
38  /** Delay before the first sweep, in seconds. */
39  delay?: number;
40  /** Rest after a word finishes revealing, in seconds. */
41  pauseDuration?: number;
42  /** Returns to the first word after the final word. */
43  loop?: boolean;
44  /** Starts when the text enters the viewport. */
45  startOnView?: boolean;
46  /** Only starts on the first viewport entry. */
47  once?: boolean;
48  /** IntersectionObserver root margin used by the viewport trigger. */
49  inViewMargin?: UseInViewOptions["margin"];
50  className?: string;
51};
52 
53function composeChromaticGradient(colors: string[], foregroundColor: string) {
54  const palette = colors.length > 0 ? colors : CHROMATIC_PALETTE;
55  const colorStops = palette.map((color, index) => {
56    const offset =
57      palette.length === 1
58        ? 0
59        : -TRAIL_HALF_WIDTH +
60          (index / (palette.length - 1)) * TRAIL_HALF_WIDTH * 2;
61    const operator = offset < 0 ? "-" : "+";
62    const distance = Number(Math.abs(offset).toFixed(2));
63    return `${color} calc(var(--chromatic-sweep) ${operator} ${distance}%)`;
64  });
65 
66  return `linear-gradient(90deg, ${foregroundColor} 0%, ${foregroundColor} calc(var(--chromatic-sweep) - ${TRAIL_HALF_WIDTH}%), ${colorStops.join(", ")}, transparent calc(var(--chromatic-sweep) + ${TRAIL_HALF_WIDTH}%), transparent 100%)`;
67}
68 
69export function ChromaticTextReveal({
70  prefix,
71  words,
72  colors = CHROMATIC_PALETTE,
73  foregroundColor = "var(--foreground)",
74  duration = 1.2,
75  delay = 0,
76  pauseDuration = 0.8,
77  loop = true,
78// … truncated