scroll-text

1import {
2  type MotionValue,
3  motion,
4  useScroll,
5  useSpring,
6  useTransform,
7} from "motion/react";
8import * as React from "react";
9import { cn } from "@/lib/utils";
10 
11// ============================================================================
12// TYPES
13// ============================================================================
14 
15type ScrollEffect =
16  | "fadeIn"
17  | "fadeUp"
18  | "fadeDown"
19  | "parallax"
20  | "scale"
21  | "scaleUp"
22  | "scaleDown"
23  | "rotate"
24  | "blur"
25  | "slideLeft"
26  | "slideRight"
27  | "skew"
28  | "flip"
29  | "reveal";
30 
31interface ScrollTextProps {
32  children: React.ReactNode;
33  effect?: ScrollEffect;
34  className?: string;
35  offset?: [string, string];
36  speed?: number;
37  spring?: boolean;
38  springConfig?: { stiffness?: number; damping?: number; mass?: number };
39  threshold?: [number, number];
40}
41 
42interface ParallaxTextProps {
43  children: React.ReactNode;
44  className?: string;
45  speed?: number;
46  direction?: "up" | "down" | "left" | "right";
47  spring?: boolean;
48}
49 
50interface ScrollRevealProps {
51  children: React.ReactNode;
52  className?: string;
53  direction?: "up" | "down" | "left" | "right";
54  delay?: number;
55  duration?: number;
56  distance?: number;
57  once?: boolean;
58}
59 
60interface ScrollFadeProps {
61  children: React.ReactNode;
62  className?: string;
63  fadeIn?: boolean;
64  fadeOut?: boolean;
65  threshold?: [number, number];
66}
67 
68interface ScrollScaleProps {
69  children: React.ReactNode;
70  className?: string;
71  from?: number;
72  to?: number;
73  threshold?: [number, number];
74}
75 
76interface HorizontalScrollTextProps {
77  children: React.ReactNode;
78  className?: string;
79  speed?: number;
80  direction?: "left" | "right";
81  repeat?: number;
82}
83 
84interface ScrollProgressTextProps {
85  text: string;
86  className?: string;
87  charClassName?: string;
88  stagger?: number;
89}
90 
91interface StickyScrollTextProps {
92  children: React.ReactNode;
93  className?: string;
94  height?: string;
95  effect?: "fade" | "scale" | "blur" | "color";
96}
97 
98// ============================================================================
99// SCROLL TEXT COMPONENT
100// ============================================================================
101 
102const ScrollText = React.forwardRef<HTMLDivElement, ScrollTextProps>(
103  (
104    {
105      children,
106      effect = "fadeIn",
107      className,
108      offset = ["start end", "end start"],
109      speed = 1,
110      spring = false,
111      springConfig,
112      threshold = [0, 1],
113    },
114    forwardedRef,
115  ) => {
116    const internalRef = React.useRef<HTMLDivElement>(null);
117// … truncated