// primitives.jsx — reusable visual building blocks // Loaded as Babel script; exports to window const INK = '#0A0A0A'; const INK2 = '#1A1A1A'; const DIM = '#737373'; const LINE = '#D4D4D4'; const PAPER = '#FAFAFA'; const WHITE = '#FFFFFF'; const CORAL = '#FF5A5F'; const YELLOW = '#FFD84D'; const GREEN = '#22A879'; const MONO = "'JetBrains Mono', ui-monospace, monospace"; const SANS = "'Inter', -apple-system, system-ui, sans-serif"; const SERIF = "'Instrument Serif', 'Times New Roman', serif"; // ── Eyebrow tag (matching existing landing) ─────────────────────────────── function Eyebrow({ text, color = CORAL, x, y, size = 16 }) { return (
{text}
); } // ── Tax / compliance badge (auto-clearance indicator) ───────────────────── function ComplianceBadge({ label, sub, x, y, color = GREEN }) { return (
{label}
{sub}
); } // ── Package (cardboard box, isometric-ish) ──────────────────────────────── function Package({ x, y, size = 120, rotation = 0, shadow = true, label = 'SEMORE' }) { return (
{shadow && (
)} {/* box body */} {/* top flap */} {/* center seam */} {/* tape */} {/* label */} {label} {/* fragile arrow */}
); } // ── Apartment door / stoop (destination) ────────────────────────────────── function Doorway({ x, y, width = 320, height = 420, variant = 'berlin' }) { const palettes = { berlin: { wall: '#D4C5A8', door: '#4A3728', frame: '#2A1F15', accent: '#8B6B3D', trim: '#E8D9BD' }, tokyo: { wall: '#E8E4DC', door: '#1A1A1A', frame: '#0A0A0A', accent: '#C94A4F', trim: '#F5F1E8' }, newyork: { wall: '#8B5A3C', door: '#1C1510', frame: '#0D0906', accent: '#D4A574', trim: '#A06B45' }, }; const p = palettes[variant] || palettes.berlin; return (
{/* wall */} {/* subtle texture lines (siding / brickwork) */} {variant === 'newyork' && Array.from({length: 14}).map((_, i) => ( {Array.from({length: 6}).map((_, j) => ( ))} ))} {variant === 'berlin' && Array.from({length: 18}).map((_, i) => ( ))} {variant === 'tokyo' && ( <> )} {/* door frame */} {/* door */} {/* door panels */} {/* handle */} {/* number plate */} {variant === 'berlin' ? '47' : variant === 'tokyo' ? '03' : '221'} {/* step */}
); } // ── Boarding-pass card (matching landing's .bp) ─────────────────────────── function BoardingPass({ x, y, width = 420, lane, from, to, fromCity, toCity, meta, progress = 1, rotation = 0 }) { // progress: 0..1 — plane travels across line const planeX = 120 + progress * 130; return (
Semore · Lane {lane} EMS
{from}
{fromCity}
{to}
{toCity}
{meta.map((m, i) => (
{m.label}
{m.value}
))}
); } // ── Mini world map with routes ──────────────────────────────────────────── // Simple stylized continents, ICN → BER/HND/JFK arcs function WorldMap({ x, y, width = 900, height = 500, progress = [0, 0, 0] }) { // Approximate positions on a 900x500 equirectangular-ish canvas const ICN = { x: 695, y: 205 }; const BER = { x: 468, y: 160 }; const HND = { x: 720, y: 210 }; const JFK = { x: 275, y: 195 }; const arcPath = (a, b, lift = 80) => { const mx = (a.x + b.x) / 2; const my = (a.y + b.y) / 2 - lift; return `M ${a.x} ${a.y} Q ${mx} ${my} ${b.x} ${b.y}`; }; const routes = [ { to: BER, label: 'BER', lift: 100, prog: progress[0] }, { to: HND, label: 'HND', lift: 40, prog: progress[1] }, { to: JFK, label: 'JFK', lift: 140, prog: progress[2] }, ]; return (
{/* graticule */} {Array.from({length: 9}).map((_, i) => ( ))} {Array.from({length: 6}).map((_, i) => ( ))} {/* stylized continents — dotted landmass */} {/* arcs */} {routes.map((r, i) => { const path = arcPath(ICN, r.to, r.lift); return ( ); })} {/* origin pulse */} ICN {/* destinations — appear when arc reaches them */} {routes.map((r, i) => r.prog > 0.95 && ( {r.label} ))}
); } // Dotted continents (abstract) — rough silhouettes via dot grid masked by SVG paths function Continents() { // Very rough continent outlines for 900x500 equirectangular-ish view const paths = [ // North America "M 80 110 Q 110 90 160 95 L 210 110 L 260 130 L 280 170 L 260 220 L 220 240 L 180 230 L 140 210 L 110 180 L 90 150 Z", // South America "M 240 250 L 270 260 L 280 310 L 275 370 L 260 410 L 240 400 L 225 360 L 220 310 Z", // Europe "M 420 130 L 470 120 L 500 140 L 490 170 L 460 180 L 430 175 L 420 155 Z", // Africa "M 440 190 L 490 190 L 520 230 L 520 290 L 490 340 L 460 340 L 440 300 L 435 240 Z", // Asia "M 510 110 L 580 100 L 680 115 L 740 130 L 760 170 L 740 210 L 700 225 L 640 220 L 580 200 L 530 175 L 510 150 Z", // SE Asia / Indonesia "M 680 240 L 760 245 L 780 265 L 760 280 L 700 275 L 680 260 Z", // Japan "M 740 170 L 760 175 L 765 195 L 755 210 L 740 205 L 735 190 Z", // Australia "M 740 320 L 810 320 L 830 355 L 800 380 L 740 370 Z", ]; return ( {paths.map((d, i) => ( ))} {/* dot pattern overlay on continents */} {paths.map((d, i) => ( ))} ); } // ── City skyline silhouette ─────────────────────────────────────────────── function Skyline({ variant, width, height, color = '#1a1a1a' }) { // Simple procedural skylines, distinct per city const skylines = { seoul: [40, 80, 55, 120, 75, 200, 90, 160, 70, 140, 95, 180, 60, 110, 85], berlin: [45, 60, 50, 70, 65, 90, 60, 160, 55, 85, 70, 95, 50, 65, 55], tokyo: [55, 90, 70, 180, 85, 140, 95, 220, 80, 150, 75, 200, 90, 130, 75], newyork: [65, 150, 85, 200, 105, 260, 95, 220, 110, 280, 85, 180, 100, 240, 90], }; const heights = skylines[variant] || skylines.seoul; const w = width / heights.length; return ( {heights.map((h, i) => ( ))} {/* scattered windows */} {heights.map((h, i) => Array.from({length: Math.floor(h / 18)}).map((_, j) => ( 0.3 ? 0.8 : 0}/> )) )} ); } // ── Split divider (center vertical line with city labels) ───────────────── function SplitDivider({ height, topLabel, bottomLabel }) { return (
{topLabel}
{bottomLabel}
); } // ── Scanner line (for progress/shipping feel) ───────────────────────────── function ScanLine({ x, y, width, height = 2, progress = 0, color = CORAL }) { return (
); } Object.assign(window, { Eyebrow, ComplianceBadge, Package, Doorway, BoardingPass, WorldMap, Skyline, SplitDivider, ScanLine, INK, INK2, DIM, LINE, PAPER, WHITE, CORAL, YELLOW, GREEN, MONO, SANS, SERIF, });