// Aviation / data-inspired visual motifs. All monochromatic, low-opacity. // Each component is a pure SVG decoration — safe to drop behind content. const { useEffect, useRef, useState } = React; // --------- Plotting grid w/ coordinate ticks on edges --------- function PlottingGrid({ density = 10, opacity = 0.6 }) { const ticks = Array.from({ length: density }); return ( ); } // --------- Great-circle arc (route trace) --------- function RouteArc({ d, strokeDasharray, animated = false, stroke = "rgba(232,230,225,0.18)", strokeWidth = 1 }) { return ( ); } // --------- Waypoint glyph (triangle) --------- function Waypoint({ x, y, label, accent = false }) { const color = accent ? "var(--accent)" : "rgba(232,230,225,0.5)"; return ( {label && ( {label} )} ); } // --------- VOR / DME rose --------- function VorRose({ x, y, r = 60 }) { const ticks = Array.from({ length: 36 }, (_, i) => i * 10); return ( {ticks.map((t, i) => { const rad = (t - 90) * Math.PI / 180; const inner = i % 3 === 0 ? r - 6 : r - 3; return ( ); })} {["N","E","S","W"].map((d, i) => { const rad = (i * 90 - 90) * Math.PI / 180; const rx = Math.cos(rad) * (r + 12); const ry = Math.sin(rad) * (r + 12); return ( {d} ); })} ); } // --------- Hero background: route reconstruction scene --------- function HeroCanvas() { // static, composed scene — flight path over a subtle graticule return ( {/* graticule coordinate labels */} {[200, 600, 1000, 1400].map((x, i) => ( {`${45 + i * 2}°00′N`} ))} {[150, 450, 750].map((y, i) => ( {`${8 + i * 3}°00′W`} ))} {/* primary route — curved great-circle-ish */} {/* echo / secondary trace - dashed projection */} {/* highlighted segment */} {/* waypoints */} {/* DME rose */} {/* altitude ladder — right side */} {[0, 1, 2, 3, 4, 5].map(i => ( {`FL${380 - i * 20}`} ))} {/* time ticks across bottom */} {Array.from({ length: 16 }).map((_, i) => ( {i % 4 === 0 && ( {`14:${String(28 + i).padStart(2, '0')}:00`} )} ))} ); } // --------- Scan line / crosshair for media placeholders --------- function MediaCrosshair() { return ( ); } // --------- Media placeholder: labeled replacement slot --------- function MediaSlot({ kind = "VIDEO", id = "MED-001", title, ratio, note, duration, frameRef, children, visual, image, images }) { if (images && images.length) { return (
{images.map((src, i) => ( {`${title ))} {children}
); } if (image) { return (
{title {children}
); } return (
{visual}
{kind} · {id}
{duration && {duration}} {frameRef && {frameRef}}
{title && {title}} {note && {note}}
REPLACE · /media/{id.toLowerCase()}
{children}
); } // --------- Parameter plot (for work thumbnails & services) --------- function ParamPlot({ seed = 1, traces = 2, grid = true }) { const W = 600, H = 360; const rng = (n) => { // simple deterministic noise let t = seed * 9301 + n * 49297; return ((t % 233280) / 233280); }; const series = []; for (let s = 0; s < traces; s++) { const pts = []; let y = H * 0.5 + (rng(s) - 0.5) * 60; for (let i = 0; i <= 60; i++) { y += (rng(s * 100 + i) - 0.5) * 18; y = Math.max(40, Math.min(H - 40, y)); pts.push(`${(i / 60) * W},${y}`); } series.push(pts.join(" ")); } return ( {grid && ( <> {[0.25, 0.5, 0.75].map(p => ( ))} {[0.2, 0.4, 0.6, 0.8].map(p => ( ))} )} {series.map((s, i) => ( ))} ); } // --------- Mini route card visual (for work thumbnails) --------- function MiniRoute({ seed = 1 }) { const W = 600, H = 360; const paths = [ "M 40 280 Q 180 100, 380 200 T 560 100", "M 40 300 Q 200 220, 380 240 T 560 180", "M 60 60 Q 260 240, 420 140 T 560 260", "M 40 200 Q 240 80, 340 300 T 560 200" ]; const d = paths[seed % paths.length]; return ( ); } // --------- Brand mark --------- // Image-based logo (Flight Reconstruction Group). The PNG includes the // wordmark, so callers usually pass a height (e.g. 40-72px) and skip // any adjacent text label. function BrandMark({ size = 24, height }) { const h = height || size; return ( Flight Reconstruction Group ); } // Expose to other Babel scripts Object.assign(window, { PlottingGrid, RouteArc, Waypoint, VorRose, HeroCanvas, MediaSlot, MediaCrosshair, ParamPlot, MiniRoute, BrandMark });