49 lines
2.1 KiB
TypeScript
49 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { useEnVista } from '@/lib/motion';
|
|
|
|
// The section's own subject, drawn: the inflection point itself. One line
|
|
// rises gently (the present, azul), bends at the marked point, and from there
|
|
// climbs steeply in dorado — clarity accelerating the climb. No fork, no
|
|
// "deriva": that bifurcation belongs to ParaQuien, not here.
|
|
const ANTES = 'M10 110 C 55 104, 85 88, 110 72';
|
|
const DESPUES = 'M110 72 C 145 60, 178 24, 210 12';
|
|
|
|
export function IlustracionInflexion({ className = '' }: { className?: string }) {
|
|
const { ref, enVista, reduced } = useEnVista();
|
|
|
|
const punto = (
|
|
<>
|
|
<circle cx={110} cy={72} r={6} fill="currentColor" className="text-dorado" />
|
|
<circle cx={110} cy={72} r={10} fill="none" stroke="currentColor" className="text-dorado" strokeWidth={1} strokeOpacity={0.4} />
|
|
</>
|
|
);
|
|
|
|
// Plain <path> under reduced motion — motion.path applies its own dash
|
|
// scaffolding and would leave the drawing invisible.
|
|
if (reduced) {
|
|
return (
|
|
<svg ref={ref} viewBox="0 0 220 120" className={className} aria-hidden="true" focusable="false">
|
|
<path d={ANTES} fill="none" stroke="currentColor" className="text-azul-profundo" strokeWidth={2} strokeLinecap="round" />
|
|
<path d={DESPUES} fill="none" stroke="currentColor" className="text-dorado" strokeWidth={3} strokeLinecap="round" />
|
|
{punto}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const dibuja = (delay: number) => ({
|
|
initial: { pathLength: 0 },
|
|
animate: enVista ? { pathLength: 1 } : { pathLength: 0 },
|
|
transition: { duration: 1.1, delay, ease: [0.22, 1, 0.36, 1] as const },
|
|
});
|
|
|
|
return (
|
|
<svg ref={ref} viewBox="0 0 220 120" className={className} aria-hidden="true" focusable="false">
|
|
<motion.path d={ANTES} fill="none" stroke="currentColor" className="text-azul-profundo" strokeWidth={2} strokeLinecap="round" {...dibuja(0)} />
|
|
<motion.path d={DESPUES} fill="none" stroke="currentColor" className="text-dorado" strokeWidth={3} strokeLinecap="round" {...dibuja(0.5)} />
|
|
{punto}
|
|
</svg>
|
|
);
|
|
}
|