49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { useEnVista } from '@/lib/motion';
|
|
|
|
// Four strands looping over each other into a knot that never opens — the
|
|
// section's own subject drawn: effort that folds back on itself instead of
|
|
// going anywhere. The strands draw themselves in sequence, which reads as the
|
|
// knot tightening rather than as decoration appearing.
|
|
const HEBRAS = [
|
|
{ d: 'M30 90 C 60 20, 130 20, 140 70 C 148 112, 78 118, 70 78 C 63 44, 120 38, 150 66', ancho: 2.5 },
|
|
{ d: 'M20 60 C 70 110, 120 110, 160 60', ancho: 2 },
|
|
{ d: 'M40 110 C 80 40, 110 130, 155 95', ancho: 2 },
|
|
{ d: 'M25 40 C 90 70, 100 100, 165 40', ancho: 1.5 },
|
|
];
|
|
|
|
export function IlustracionNudo({ className = '' }: { className?: string }) {
|
|
const { ref, enVista, reduced } = useEnVista();
|
|
|
|
// Plain <path> under reduced motion — motion.path would hide the drawing.
|
|
if (reduced) {
|
|
return (
|
|
<svg ref={ref} viewBox="0 0 190 140" className={className} aria-hidden="true" focusable="false">
|
|
{HEBRAS.map((h) => (
|
|
<path key={h.d} d={h.d} fill="none" stroke="currentColor" strokeWidth={h.ancho} strokeLinecap="round" />
|
|
))}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<svg ref={ref} viewBox="0 0 190 140" className={className} aria-hidden="true" focusable="false">
|
|
{HEBRAS.map((h, i) => (
|
|
<motion.path
|
|
key={h.d}
|
|
d={h.d}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={h.ancho}
|
|
strokeLinecap="round"
|
|
initial={{ pathLength: 0 }}
|
|
animate={enVista ? { pathLength: 1 } : { pathLength: 0 }}
|
|
transition={{ duration: 1.3, delay: i * 0.18, ease: [0.22, 1, 0.36, 1] }}
|
|
/>
|
|
))}
|
|
</svg>
|
|
);
|
|
}
|