25 lines
876 B
TypeScript
25 lines
876 B
TypeScript
'use client';
|
|
|
|
import { motion, useScroll, useSpring } from 'framer-motion';
|
|
import { usePrefersReducedMotion } from '@/lib/motion';
|
|
|
|
// Reading progress along the bottom edge of the header. Pure motion feedback:
|
|
// under reduced motion it renders nothing at all, because a static progress
|
|
// bar communicates nothing — unlike an illustration, there is no meaningful
|
|
// still frame of it.
|
|
export function ProgresoLectura({ className = '' }: { className?: string }) {
|
|
const reduced = usePrefersReducedMotion();
|
|
const { scrollYProgress } = useScroll();
|
|
const avance = useSpring(scrollYProgress, { stiffness: 120, damping: 30, restDelta: 0.001 });
|
|
|
|
if (reduced) return null;
|
|
|
|
return (
|
|
<motion.div
|
|
aria-hidden="true"
|
|
className={`absolute bottom-0 left-0 right-0 h-0.5 origin-left bg-dorado ${className}`}
|
|
style={{ scaleX: avance }}
|
|
/>
|
|
);
|
|
}
|