/* global React */ // Five hero diagram alternatives, all sized to the same 5:4 frame so they're // drop-in swappable from the Tweaks panel. Each is rooted in Latus's visual // vocabulary (Foundation diagram, hairline geometry, cool sculptural imagery). const heroDiaStyles = { frame: { position: 'relative', width: '100%', aspectRatio: '1/1', maxWidth: 600, marginLeft: 'auto' }, caption: { marginTop: 'var(--s-4)', textAlign: 'right', fontSize: 12, color: 'var(--fg-3)', letterSpacing: '0.08em', textTransform: 'uppercase' }, svg: { width: '100%', height: '100%', display: 'block' } }; /* ---- 1 · Architectural (the original ambient flow) ---------------------- */ function DiagramArchitectural() { return ( ); } /* ---- 2 · Foundation (literal brand mirror — the house) ----------------- */ function DiagramFoundation() { // Stroke-draw on entry by animating stroke-dashoffset return ( ); } /* ---- 3 · Imagery (full-bleed brand photo) ------------------------------ */ function DiagramImagery() { return ( ); } /* ---- 4 · Wireframe globe (NL ↔ PT) ------------------------------------ */ function DiagramGlobe() { // Sparse wireframe; two indigo dots for Amsterdam + Ericeira, arc between. // Math: projected to 2D with lat→y, lon→x, simple sphere projection. const cx = 250,cy = 210,R = 140; const project = (lat, lon) => ({ x: cx + R * Math.cos(lat * Math.PI / 180) * Math.sin(lon * Math.PI / 180), y: cy - R * Math.sin(lat * Math.PI / 180) }); const ams = project(52.37, 4.90); const eri = project(38.97, -9.42); // Build latitude lines (ellipses with varying ry) const lats = [-60, -30, 0, 30, 60]; const lons = [-90, -60, -30, 0, 30, 60, 90]; return ( ); } /* ---- 5 · Typographic (drafting label / identity plate) ---------------- */ function DiagramTypographic() { return ( ); } /* ---- 6 · Latus (the mark, animated through its own geometry) -------- */ function DiagramLatus() { // The Latus icon is a square + crossed diagonals + parabolic arc. // Reading it geometrically: one diagonal is the axis of symmetry, the other // is the latus rectum (the chord through the focus), and the arc is the // parabola itself. We animate the mark's actual geometry: // • the square + axis + arc draw in (calm) // • the latus rectum draws last, in indigo — it's the active element // • a dot oscillates along the latus rectum through the focus // • two dots travel along the parabolic arc, staggered return ( ); } const HERO_DIAGRAMS = { latus: DiagramLatus, architectural: DiagramArchitectural, foundation: DiagramFoundation, imagery: DiagramImagery, globe: DiagramGlobe, typographic: DiagramTypographic }; const HERO_DIAGRAM_OPTIONS = ['latus', 'architectural', 'foundation', 'imagery', 'globe', 'typographic']; Object.assign(window, { HERO_DIAGRAMS, HERO_DIAGRAM_OPTIONS });