scroll-based-velocity

1"use client";
2 
3import React, { useRef } from "react";
4import {
5    motion,
6    useScroll,
7    useSpring,
8    useTransform,
9    useMotionValue,
10    useVelocity,
11    useAnimationFrame,
12    wrap,
13} from "framer-motion";
14import { cn } from "@workspace/ui/lib/utils";
15 
16interface ScrollBasedVelocityProps {
17    text: string;
18    default_velocity?: number;
19    className?: string;
20    containerRef?: React.RefObject<HTMLElement | null>;
21}
22 
23interface ParallaxProps {
24    children: string;
25    baseVelocity: number;
26    className?: string;
27    containerRef?: React.RefObject<HTMLElement | null>;
28}
29 
30function ParallaxText({ children, baseVelocity = 100, className, containerRef }: ParallaxProps) {
31    const baseX = useMotionValue(0);
32    const { scrollY } = useScroll(containerRef ? { container: containerRef } : undefined);
33    const scrollVelocity = useVelocity(scrollY);
34    const smoothVelocity = useSpring(scrollVelocity, {
35        damping: 50,
36        stiffness: 400,
37    });
38    const velocityFactor = useTransform(smoothVelocity, [0, 1000], [0, 5], {
39        clamp: false,
40    });
41 
42    /**
43     * This is a magic wrapping for the length of the text - you
44     * have to replace for wrapping that works for you or dynamically
45     * calculate
46     */
47    const x = useTransform(baseX, (v) => `${wrap(-12.5, 0, v)}%`);
48 
49    const directionFactor = useRef<number>(1);
50    useAnimationFrame((t, delta) => {
51        let moveBy = directionFactor.current * baseVelocity * (delta / 1000);
52 
53        /**
54         * This is what changes the direction of the scroll once we
55         * switch scrolling directions.
56         */
57        if (velocityFactor.get() < 0) {
58            directionFactor.current = -1;
59        } else if (velocityFactor.get() > 0) {
60            directionFactor.current = 1;
61        }
62 
63        moveBy += directionFactor.current * moveBy * velocityFactor.get();
64 
65        baseX.set(baseX.get() + moveBy);
66    });
67 
68    return (
69        <div className="overflow-hidden whitespace-nowrap flex flex-nowrap" style={{ width: '100%' }}>
70            <motion.div
71                className={cn("flex whitespace-nowrap", className)}
72                style={{ x }}
73            >
74                {Array.from({ length: 8 }).map((_, i) => (
75                    <span key={i} className="block mr-10 last:mr-10">{children}</span>
76                ))}
77            </motion.div>
78        </div>
79    );
80}
81 
82export function ScrollBasedVelocity({
83    text,
84    default_velocity = 5,
85    className,
86    containerRef,
87// … truncated