73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion, useScroll, useSpring } from 'framer-motion';
|
|
import { usePrefersReducedMotion } from '@/lib/motion';
|
|
|
|
// One continuous gold line running the height of the page, drawing itself as
|
|
// the reader scrolls. It is the spine of the layout: it stitches the sections
|
|
// together so the landing reads as a route rather than a stack of blocks.
|
|
//
|
|
// Positioned `absolute`, never `fixed` — the thread belongs to the document
|
|
// and scrolls with it. A fixed layer would read as an ornament stuck to the
|
|
// window.
|
|
//
|
|
// Uses the page-level useScroll() with no target ref on purpose: no element
|
|
// measuring, no "container has a static position" warnings, and one scroll
|
|
// listener for the whole page.
|
|
|
|
const TRAZO =
|
|
'M50 0 C 20 140, 80 260, 50 400 C 20 540, 80 660, 50 800 C 20 940, 80 1060, 50 1200';
|
|
|
|
export function HiloConductor({ className = '' }: { className?: string }) {
|
|
const reduced = usePrefersReducedMotion();
|
|
const { scrollYProgress } = useScroll();
|
|
const avance = useSpring(scrollYProgress, { stiffness: 90, damping: 30, restDelta: 0.001 });
|
|
|
|
const base = `pointer-events-none absolute inset-y-0 left-1/2 -translate-x-1/2 w-full max-w-content h-full ${className}`;
|
|
|
|
// The positioning/pointer-events classes live on a wrapping <div> rather
|
|
// than the <svg> itself: per spec `SVGElement.className` is an
|
|
// SVGAnimatedString, not a plain string, so tests (and any other reader of
|
|
// `.className`) can't inspect it as text. A plain HTMLElement keeps that
|
|
// contract simple.
|
|
|
|
// Plain <path> for reduced motion: motion.path applies dash scaffolding even
|
|
// without initial/animate and would leave the thread invisible.
|
|
if (reduced) {
|
|
return (
|
|
<div className={base}>
|
|
<svg
|
|
className="h-full w-full text-dorado/25"
|
|
viewBox="0 0 100 1200"
|
|
preserveAspectRatio="none"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
>
|
|
<path d={TRAZO} fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={base}>
|
|
<svg
|
|
className="h-full w-full text-dorado/25"
|
|
viewBox="0 0 100 1200"
|
|
preserveAspectRatio="none"
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
>
|
|
<motion.path
|
|
d={TRAZO}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
style={{ pathLength: avance }}
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|