erikghandClaude Opus 5
9a8534f10b
El dibujo de convergencia llevaba desde el principio al lado de las tres tarjetas sin relación con ellas: tres objetos sueltos en una página. Al señalar una disciplina, su hebra se enciende en dorado y engorda, y las otras dos se apagan al 35%. Es mejora solo con puntero, y a propósito: no esconde nada. Las tres tarjetas y las tres hebras están completas sin tocar el ratón, así que quien no lo tenga no pierde nada. Verificado en navegador, no solo en jsdom: al señalar «Digital» la hebra central queda en rgb(196,148,46) —el dorado de marca— a 3,5px, y las otras en rgba(170,170,170,0.35) a 2px. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
64 lines
2.7 KiB
TypeScript
64 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { useEnVista } from '@/lib/motion';
|
|
|
|
// Three strands — comunicación, digital, experiencias — meeting and leaving as
|
|
// a single gold line. The section's own lead, drawn: "No son la promesa, son
|
|
// los medios." The three are grey; only what they produce is gold.
|
|
//
|
|
// `activa` lights the strand belonging to the discipline the reader is pointing
|
|
// at, and dims the other two. Until then the drawing sat beside the three cards
|
|
// with no relationship to them; now the card and its strand are visibly the
|
|
// same thing, and the reader can see which of the three produces what.
|
|
const HEBRAS = [
|
|
'M6 18 C 60 20, 90 52, 120 60',
|
|
'M6 60 C 60 60, 90 60, 120 60',
|
|
'M6 102 C 60 100, 90 68, 120 60',
|
|
];
|
|
const ESTRATEGIA = 'M120 60 L 214 60';
|
|
|
|
export function IlustracionConvergencia({
|
|
className = '',
|
|
activa = null,
|
|
}: {
|
|
className?: string;
|
|
activa?: number | null;
|
|
}) {
|
|
const { ref, enVista, reduced } = useEnVista();
|
|
|
|
// `stroke` follows `currentColor`, so moving the text colour moves the line —
|
|
// and transition-colors carries it across instead of snapping.
|
|
const tono = (i: number) =>
|
|
activa === null ? 'text-gris-medio' : activa === i ? 'text-dorado' : 'text-gris-medio/35';
|
|
const grosor = (i: number) => (activa === i ? 3.5 : 2);
|
|
const transicion = 'transition-all duration-300 ease-out motion-reduce:transition-none';
|
|
|
|
// Plain <path> under reduced motion — motion.path would hide the drawing.
|
|
if (reduced) {
|
|
return (
|
|
<svg ref={ref} viewBox="0 0 220 120" className={className} aria-hidden="true" focusable="false">
|
|
{HEBRAS.map((d, i) => (
|
|
<path key={d} d={d} data-hebra={i} fill="none" stroke="currentColor" className={`${tono(i)} ${transicion}`} strokeWidth={grosor(i)} strokeLinecap="round" />
|
|
))}
|
|
<path d={ESTRATEGIA} fill="none" stroke="currentColor" className="text-dorado" strokeWidth={3} strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const dibuja = (delay: number) => ({
|
|
initial: { pathLength: 0 },
|
|
animate: enVista ? { pathLength: 1 } : { pathLength: 0 },
|
|
transition: { duration: 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">
|
|
{HEBRAS.map((d, i) => (
|
|
<motion.path key={d} d={d} data-hebra={i} fill="none" stroke="currentColor" className={`${tono(i)} ${transicion}`} strokeWidth={grosor(i)} strokeLinecap="round" {...dibuja(i * 0.12)} />
|
|
))}
|
|
<motion.path d={ESTRATEGIA} fill="none" stroke="currentColor" className="text-dorado" strokeWidth={3} strokeLinecap="round" {...dibuja(0.7)} />
|
|
</svg>
|
|
);
|
|
}
|