erikghandClaude Opus 5.5
89e54a6e84
Primitivas y contenido del rediseño (escala tipográfica, Revelar, MarcaSeccion, Seccion, Antetitulo, SimboloMarca, Resplandor, ClaridadHero, sección Proceso de ocho etapas, lib/content.ts reestructurado en seis secciones con alias para las viejas). Mecanismo y FormaTrabajar se retiran. Encima, lo de esta sesión: - recorrido: creeer vuelve a responder cada situación en vez de repetirla (el alias apuntaba respuesta a situacion); respuestas en plural. Créditos de las seis fotos de México. - contacto: WhatsApp, email (con mailto:) y LinkedIn reales; iconos de las redes en el cierre y el footer (IconoRed, trazos de Simple Icons, CC0). - enlaces: lo externo abre en otra pestaña con noopener y aviso para lectores de pantalla (lib/enlaces.ts); mailto y anclas se quedan. - Proceso: las ocho tarjetas no aparecían nunca en móvil (amount 0.3 sobre una lista de ~3000px); ahora cada una se revela sola. El ≡ de la 08 ya no tapa un entregable, título equilibrado, etiqueta a 12px, sin elevar al hover lo que no es clicable. - Disciplinas: la frase «No son la promesa — son los medios» gana peso y se agrupa con título e ilustración; sin cortes huérfanos en móvil. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
import { VIEWBOX_SIMBOLO, LINEAS_SIMBOLO } from '@/lib/simbolo';
|
|
|
|
// The manual's philosophy — Complejidad → Enfoque → Claridad — as the
|
|
// document's own furniture instead of as an illustration parked in a corner.
|
|
// Each section carries one step of it in the margin column, so the reader walks
|
|
// the tangle resolving into the ≡ by scrolling.
|
|
//
|
|
// Static: the interpolation happens at render, there is no animation and no
|
|
// client JavaScript. The geometry it resolves into comes from lib/simbolo.ts,
|
|
// the same source the wordmark traces, so the mark it produces is provably the
|
|
// brand's and not a lookalike.
|
|
|
|
export const PASOS = 6;
|
|
|
|
// Hand-placed rather than random, so the mark is identical on every render and
|
|
// between server and client. Three lines per bar of the ≡.
|
|
const DISPERSAS = [
|
|
{ x1: 4, y1: 10, x2: 44, y2: 4, barra: 0 },
|
|
{ x1: 18, y1: 3, x2: 58, y2: 22, barra: 0 },
|
|
{ x1: 6, y1: 24, x2: 50, y2: 12, barra: 0 },
|
|
{ x1: 3, y1: 30, x2: 56, y2: 26, barra: 1 },
|
|
{ x1: 14, y1: 40, x2: 52, y2: 20, barra: 1 },
|
|
{ x1: 8, y1: 34, x2: 60, y2: 38, barra: 1 },
|
|
{ x1: 5, y1: 46, x2: 47, y2: 60, barra: 2 },
|
|
{ x1: 22, y1: 62, x2: 58, y2: 44, barra: 2 },
|
|
{ x1: 10, y1: 56, x2: 54, y2: 52, barra: 2 },
|
|
];
|
|
|
|
// One line per group survives to become a bar; the other six fade out as the
|
|
// page converges — many/disordered becomes few/aligned, per the manual.
|
|
const SOBREVIVE = [0, 3, 6];
|
|
|
|
const GROSOR_DISPERSO = 2;
|
|
|
|
export function MarcaSeccion({ paso, className = '' }: { paso: number; className?: string }) {
|
|
const t = Math.min(1, Math.max(0, paso / (PASOS - 1)));
|
|
const mezcla = (a: number, b: number) => a + (b - a) * t;
|
|
|
|
return (
|
|
<svg viewBox={VIEWBOX_SIMBOLO} className={className} aria-hidden="true" focusable="false">
|
|
{DISPERSAS.map((d, i) => {
|
|
const destino = LINEAS_SIMBOLO[d.barra];
|
|
const sobrevive = SOBREVIVE.includes(i);
|
|
return (
|
|
<line
|
|
key={i}
|
|
x1={mezcla(d.x1, destino.x1)}
|
|
y1={mezcla(d.y1, destino.y1)}
|
|
x2={mezcla(d.x2, destino.x2)}
|
|
y2={mezcla(d.y2, destino.y2)}
|
|
stroke="currentColor"
|
|
strokeWidth={sobrevive ? mezcla(GROSOR_DISPERSO, destino.grosor) : GROSOR_DISPERSO}
|
|
strokeLinecap="round"
|
|
opacity={sobrevive ? 1 : 1 - t}
|
|
/>
|
|
);
|
|
})}
|
|
</svg>
|
|
);
|
|
}
|