Scroll Text

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Scroll Text
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { motion, type Variants } from "motion/react";
14import { useEffect, useRef, useState } from "react";
15import { cn } from "@/lib/utils";
16 
17interface ScrollTextProps {
18  texts?: string[];
19  className?: string;
20}
21 
22export default function ScrollText({
23  texts = [
24    "TailwindCSS",
25    "Kokonut UI",
26    "shadcn/ui",
27    "Next.js",
28    "Vercel",
29    "Motion",
30    "React",
31    "Resend",
32    "TypeScript",
33    "Fumadocs",
34    "Supabase",
35    "Vercel",
36  ],
37  className,
38}: ScrollTextProps) {
39  const [activeIndex, setActiveIndex] = useState(0);
40  const observerRef = useRef<IntersectionObserver | null>(null);
41  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);
42  const containerRef = useRef<HTMLDivElement>(null);
43 
44  // Scroll to top on mount
45  useEffect(() => {
46    if (containerRef.current) {
47      containerRef.current.scrollTop = 0;
48    }
49  }, []);
50 
51  const handleIntersection = (entries: IntersectionObserverEntry[]) => {
52    entries.forEach((entry) => {
53      if (entry.isIntersecting) {
54        const index = itemsRef.current.findIndex(
55          (item) => item === entry.target
56        );
57        setActiveIndex(index);
58      }
59    });
60  };
61 
62  // Setup intersection observer
63  const setupObserver = (element: HTMLDivElement | null, index: number) => {
64    if (element && !itemsRef.current[index]) {
65      itemsRef.current[index] = element;
66 
67      if (!observerRef.current) {
68        observerRef.current = new IntersectionObserver(handleIntersection, {
69          threshold: 0.7,
70          root: containerRef.current,
71          rootMargin: "-45% 0px -45% 0px",
72        });
73      }
74 
75      observerRef.current.observe(element);
76    }
77  };
78 
79  // Animation variants for the reveal effect
80  const containerVariants: Variants = {
81    hidden: { opacity: 0 },
82    visible: {
83      opacity: 1,
84      transition: {
85        staggerChildren: 0.1,
86      },
87    },
88  };
89 
90  const itemVariants: Variants = {
91    hidden: (index: number) => ({
92      opacity: 0,
93      x: index % 2 === 0 ? -100 : 100,
94      rotate: index % 2 === 0 ? -10 : 10,
95    }),
96    visible: {
97      opacity: 1,
98      x: 0,
99      rotate: 0,
100      transition: {
101        type: "spring",
102        stiffness: 100,
103        damping: 15,
104        duration: 0.5,
105      },
106    },
107  };
108 
109  return (
110// … truncated