Scroll And Swap Text

1"use client"
2 
3import React, { ElementType, useMemo, useRef } from "react"
4import { motion, useScroll, useTransform, useSpring } from "motion/react"
5import { cn } from "@/lib/utils"
6 
7// handy function to extract text from children
8const extractTextFromChildren = (children: React.ReactNode): string | undefined => {
9  // Handle null/undefined
10  if (children == null) return ""
11 
12  // Handle string
13  if (typeof children === "string") return children
14 
15  // Handle number
16  if (typeof children === "number") return String(children)
17 
18  // Handle arrays (including fragments)
19  if (Array.isArray(children)) {
20    return children.map(extractTextFromChildren).join("")
21  }
22 
23  // Handle React elements
24  if (React.isValidElement(children)) {
25    const props = (children as React.ReactElement).props
26    const childText = (props as any).children as React.ReactNode
27 
28    // Recursively extract text from children
29    if (childText != null) {
30      return extractTextFromChildren(childText)
31    }
32 
33    return ""
34  }
35}
36 
37interface ScrollAndSwapTextProps {
38  /**
39   * The content to be displayed and animated
40   */
41  children: React.ReactNode
42 
43  /**
44   * HTML Tag to render the component as
45   * @default "span"
46   */
47  as?: ElementType
48 
49  /**
50   * Reference to the container element for scroll tracking
51   */
52  containerRef: React.RefObject<HTMLElement | null>
53 
54  /**
55   * Offset configuration for when the animation should start and end relative to the scroll container. Check motion documentation for more details.
56   * @default ["0 0", "0 1"]
57   */
58  offset?: [string, string]
59 
60  /**
61   * Additional CSS classes for styling the component
62   */
63  className?: string
64 
65  /**
66   * Spring animation configuration for smoothing the scroll-based animation
67   * @default { stiffness: 200, damping: 30 }
68   */
69  springConfig?: {
70    stiffness?: number
71    damping?: number
72    mass?: number
73  }
74}
75 
76/**
77 * ScrollAndSwapText creates a scroll-triggered text animation where text slides vertically
78 * based on scroll progress.
79 */
80const ScrollAndSwapText = ({
81  children,
82  as = "span",
83  offset = ["0 0", "0 1"],
84  className,
85  containerRef,
86  springConfig = { stiffness: 200, damping: 30 },
87  ...props
88}: ScrollAndSwapTextProps) => {
89  const ref = useRef<HTMLElement>(null)
90 
91  // Convert children to string for processing with error handling
92  const text = useMemo(() => {
93    try {
94      return extractTextFromChildren(children)
95    } catch (error) {
96      console.error(error)
97      return ""
98    }
99  }, [children])
100 
101// … truncated