glowing-scroll-indicator

1'use client';
2 
3import { motion, MotionValue, useScroll, useTransform } from 'framer-motion';
4import React, { useEffect } from 'react';
5 
6const BARS = 40;
7 
8const ScrollBar = ({
9    index,
10    scrollProgress
11}: {
12    index: number;
13    scrollProgress: MotionValue<number>;
14}) => {
15    const thisBarPosition = index / BARS;
16    const preStep = Math.max(0, (index - 3) / BARS);
17    const postStep = Math.min(1, (index + 3) / BARS);
18 
19    const height = useTransform(
20        scrollProgress,
21        [0, preStep, thisBarPosition, postStep, 1],
22        [5, 15, 35, 15, 5]
23    );
24    const opacity = useTransform(
25        scrollProgress,
26        [0, preStep, thisBarPosition, postStep, 1],
27        [0.1, 0.4, 1, 0.4, 0.1]
28    );
29    const width = useTransform(scrollProgress, [0, thisBarPosition, 1], [1.5, 5, 1.5]);
30 
31    return (
32        <motion.div
33            className="bg-white dark:bg-white"
34            style={{
35                height: height,
36                opacity: useTransform(opacity, (value) => `${value}`),
37                width: useTransform(width, (value) => `${value}px`)
38            }}
39        />
40    );
41};
42 
43const ScrollIndicatorBars = ({
44    container,
45    direction
46}: {
47    container: HTMLElement;
48    direction: 'vertical' | 'horizontal';
49}) => {
50    const ref = React.useRef<HTMLElement>(container);
51 
52    React.useEffect(() => {
53        ref.current = container;
54    }, [container]);
55 
56    const { scrollXProgress, scrollYProgress } = useScroll({ container: ref });
57 
58    const scrollProgress = direction === 'vertical' ? scrollYProgress : scrollXProgress;
59    const left = useTransform(scrollProgress, [0, 1], [0, 100]);
60 
61    return (
62        <div className="flex items-end justify-center gap-1 md:gap-2 relative w-fit">
63            {Array.from({ length: BARS }).map((_, index) => (
64                <ScrollBar
65                    key={`scroll-bar-${index}`}
66                    index={index}
67                    scrollProgress={scrollProgress}
68                />
69            ))}
70            <motion.div
71                className="h-20 bg-red-700 w-1 absolute bottom-0 left-1/2 -translate-x-1/2"
72                style={{ left: useTransform(left, (value) => `${value}%`) }}
73            >
74                <div className="w-3.5 h-3.5 rounded-full shadow-sm bg-red-500 absolute top-0 left-1/2 -translate-x-1/2" />
75            </motion.div>
76        </div>
77    );
78};
79 
80interface GlowingScrollIndicatorProps {
81    scrollContainerId?: string;
82    direction?: 'vertical' | 'horizontal';
83}
84 
85// … truncated