Scroll Progress

Installation

Follow these simple steps to add the Scroll Progress component to your project:

Install Dependencies

pnpm add motion

Create a new file: `components/motions/scroll-progress.tsx` and copy the code below:

"use client";
 
import { motion, SpringOptions, useScroll, useSpring } from "motion/react";
import { cn } from "@/lib/utils";
import { RefObject } from "react";
 
export type ScrollProgressProps = {
    className?: string;
    springOptions?: SpringOptions;
    containerRef?: RefObject<HTMLDivElement>;
};
 
const DEFAULT_SPRING_OPTIONS: SpringOptions = {
    stiffness: 200,
    damping: 50,
    restDelta: 0.001,
};
 
export function ScrollProgress({
    className,
    springOptions,
    containerRef,
}: ScrollProgressProps) {
    const { scrollYProgress } = useScroll({
        container: containerRef,
    });
 
    const scaleX = useSpring(scrollYProgress, {
        ...DEFAULT_SPRING_OPTIONS,
        ...(springOptions ?? {}),
    });
 
    return (
        <motion.div
            className={cn("inset-x-0 top-0 h-1 origin-left", className)}
            style={{
                scaleX,
            }}
        />
    );
}

Adjust the import paths in both files according to your project's structure.

Installation

Follow these simple steps to add the Scroll Progress component to your project:

Install Dependencies

pnpm add motion

Create a new file: `components/motions/scroll-progress.tsx` and copy the code below:

"use client";
 
import { motion, SpringOptions, useScroll, useSpring } from "motion/react";
import { cn } from "@/lib/utils";
import { RefObject } from "react";
 
export type ScrollProgressProps = {
    className?: string;
    springOptions?: SpringOptions;
    containerRef?: RefObject<HTMLDivElement>;
};
 
const DEFAULT_SPRING_OPTIONS: SpringOptions = {
    stiffness: 200,
    damping: 50,
    restDelta: 0.001,
};
 
export function ScrollProgress({
    className,
    springOptions,
    containerRef,
}: ScrollProgressProps) {
    const { scrollYProgress } = useScroll({
        container: containerRef,
    });
 
    const scaleX = useSpring(scrollYProgress, {
        ...DEFAULT_SPRING_OPTIONS,
        ...(springOptions ?? {}),
    });
 
    return (
        <motion.div
            className={cn("inset-x-0 top-0 h-1 origin-left", className)}
            style={{
                scaleX,
            }}
        />
    );
}

Scroll Progress

Installation

Install Dependencies

Create a new file: components/motions/scroll-progress.tsx and copy the code below:

Adjust the import paths in both files according to your project's structure.

Installation

Install Dependencies

Create a new file: components/motions/scroll-progress.tsx and copy the code below:

Adjust the import paths in both files according to your project's structure.

Create a new file: `components/motions/scroll-progress.tsx` and copy the code below:

Create a new file: `components/motions/scroll-progress.tsx` and copy the code below: