/* global React */
// ============================================================
// FEATURES — 3D WIREFRAME VISUALISATIONS
//
// One minimal, monochrome wireframe-style animation per
// accordion item. All loops are continuous; transitions
// between items are handled by the parent (fade + scale).
//
// Aesthetic rules (shared):
// - Outline only, no fills (or extremely faint fills)
// - Single brand-blue stroke color
// - No textures, gradients only used for traveling beams
// - Smooth, slow motion
// - SVG used for vector wireframes; CSS 3D for floating
// elements (card, orbits) that benefit from preserve-3d
// ============================================================
const FEAT_STROKE = "rgba(140,160,246,0.92)";
const FEAT_STROKE_DIM = "rgba(140,160,246,0.30)";
const FEAT_NODE = "rgba(140,160,246,1)";
// ============================================================
// VIS 1 — Wireframe rotating globe with pulsing nodes + beams
// ============================================================
function VisGlobe3D() {
const R = 110;
// Meridians: 8 vertical great-circles, each at a different
// phase. We animate `rx` 0 → R → 0 → -R → 0 cyclically (we
// can't go negative on rx, so we run 0→R→0 staggered with
// 8 meridians ⇒ the union appears as a continuously rotating
// sphere).
const MERIDIANS = [0, 1, 2, 3, 4, 5, 6, 7];
const PERIOD = 9; // seconds for one full rotation
// Each meridian's rx cycles 0→R→0 in PERIOD/2 seconds,
// staggered by (PERIOD/2) / MERIDIANS.length.
const STAGGER = (PERIOD / 2) / MERIDIANS.length;
// Parallels: ellipses at constant y, ry shrunk by cos(lat).
const PARALLELS = [-60, -30, 0, 30, 60];
// Nodes: lat/lng pairs. We animate cx by an ellipse-path
// animateMotion so each node travels along its parallel.
// Position on globe: longitude offset starts at "lng".
const NODES = [
{ lat: 20, lng: 0, dur: PERIOD, delay: 0 },
{ lat: -10, lng: 45, dur: PERIOD * 1.1, delay: 1.0 },
{ lat: 45, lng: 90, dur: PERIOD * 0.9, delay: 2.4 },
{ lat: -35, lng: 135, dur: PERIOD * 1.05, delay: 0.6 },
{ lat: 10, lng: 180, dur: PERIOD, delay: 3.2 },
{ lat: 60, lng: 225, dur: PERIOD * 0.95, delay: 4.0 },
{ lat: -25, lng: 270, dur: PERIOD * 1.1, delay: 1.6 },
{ lat: 30, lng: 315, dur: PERIOD * 0.9, delay: 5.0 },
];
return (
);
}
// ============================================================
// VIS 2 — Concentric rings emanating from a center point.
// Reads as a SPEI ping going out instantly.
// ============================================================
function VisRings3D() {
const RINGS = [0, 1, 2, 3, 4]; // 5 rings
const PERIOD = 2.6; // seconds per ring lifecycle
const STAGGER = PERIOD / RINGS.length;
const MAX = 140;
return (
);
}
// ============================================================
// VIS 3 — Floating wireframe credit-card style rectangle
// rotating slowly on its Y axis, with a gentle vertical bob.
// ============================================================
function VisCard3D() {
return (
{/* Subtle inner detail — a single thin strip + chip-sized square */}
);
}
// ============================================================
// VIS 4 — Elegant currency selector: a single large symbol
// centered in the panel that morphs through $ → € → £ → ¥
// in a continuous 6s loop (1.5s per symbol). Crossfade with
// a subtle scale "breathe". A small label below echoes the
// active currency code in sync (USD → EUR → GBP → CNY).
// ============================================================
function VisOrbit3D() {
const CYCLE = 6; // seconds for full loop (4 × 1.5s)
const SYMS = [
{ ch: "$", code: "USD", offset: 0 },
{ ch: "€", code: "EUR", offset: 1.5 },
{ ch: "£", code: "GBP", offset: 3.0 },
{ ch: "¥", code: "CNY", offset: 4.5 },
];
return (
{SYMS.map((s, i) => (
{s.ch}{s.code}
))}
);
}
// ============================================================
// VIS 5 — 3D perspective floor with vertical wireframe bars
// rising and falling asynchronously, glowing at their peaks.
// All in SVG with manually-projected grid coordinates so the
// perspective is exact and bars sit flush on the floor.
// ============================================================
function VisLineChart3D() {
const W = 460, H = 280;
// Floor frame (a perspective trapezoid)
const FAR_Y = 76, NEAR_Y = 246;
const FAR_W = 220, NEAR_W = 440;
const CX = W / 2;
const COLS = 8;
const ROWS = 6;
// Project a (col, row) grid intersection to screen coords.
// row 0 = far edge, row ROWS = near edge.
const gridPos = (col, row) => {
const t = row / ROWS;
const y = FAR_Y + (NEAR_Y - FAR_Y) * t;
const halfW = (FAR_W + (NEAR_W - FAR_W) * t) / 2;
const x = (CX - halfW) + (2 * halfW) * (col / COLS);
return { x, y };
};
// Bars sit centered between cols at floor row 3.5 (middle).
// Each gets its own height-keyframe sequence so the row feels
// alive and asynchronous, like live tesorería data.
const ROW = 3.5;
const HEIGHTS = [
[40, 90, 55, 130, 75, 100, 60, 110, 50],
[70, 30, 110, 60, 95, 50, 130, 80, 60],
[50, 120, 80, 40, 95, 70, 110, 55, 90],
[90, 60, 130, 80, 50, 110, 70, 95, 65],
[60, 100, 50, 120, 75, 105, 60, 85, 110],
[110, 50, 90, 70, 130, 60, 95, 75, 100],
[80, 130, 60, 95, 50, 110, 70, 90, 55],
[50, 70, 110, 80, 60, 95, 130, 75, 90],
];
const DURS = [4.4, 4.0, 5.2, 4.6, 4.8, 4.2, 5.4, 4.6];
// Foreshortening of the bar width at row 3.5
const tMid = ROW / ROWS;
const cellW = ((FAR_W + (NEAR_W - FAR_W) * tMid)) / COLS;
const BAR_W = cellW * 0.42;
return (