50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useScroll, useSpring, useTransform } from "framer-motion";
|
|
|
|
export default function ScrollProgress() {
|
|
const { scrollYProgress } = useScroll();
|
|
const scaleX = useSpring(scrollYProgress, {
|
|
stiffness: 100,
|
|
damping: 30,
|
|
restDelta: 0.001,
|
|
});
|
|
|
|
const opacity = useTransform(scrollYProgress, [0, 0.02, 0.98, 1], [0, 1, 1, 0]);
|
|
|
|
return (
|
|
<>
|
|
{/* Top progress bar */}
|
|
<motion.div
|
|
className="fixed left-0 right-0 top-0 z-[9995] h-[2px] origin-left bg-[var(--slash)]"
|
|
style={{ scaleX, opacity }}
|
|
/>
|
|
|
|
{/* Side scroll indicator */}
|
|
<motion.div
|
|
className="fixed right-6 top-1/2 z-[9994] hidden -translate-y-1/2 lg:block"
|
|
style={{ opacity }}
|
|
>
|
|
<div className="relative h-[120px] w-px bg-[rgba(255,255,255,0.08)]">
|
|
<motion.div
|
|
className="absolute left-0 top-0 w-full origin-top bg-[var(--slash)]"
|
|
style={{
|
|
scaleY: scrollYProgress,
|
|
height: "100%",
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute left-1/2 -translate-x-1/2 rounded-full bg-[var(--slash)]"
|
|
style={{
|
|
width: 6,
|
|
height: 6,
|
|
top: useTransform(scrollYProgress, [0, 1], ["0%", "100%"]),
|
|
boxShadow: "0 0 10px rgba(204, 255, 0, 0.5)",
|
|
}}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</>
|
|
);
|
|
}
|