);
}
// ── Latency pill ─────────────────────────────
function VLatency({ ms = 400, time = 0, style }) {
// tiny live jitter
const ticking = (ms + Math.floor(Math.sin(time * 5) * 30)) / 1000;
return (
{ticking.toFixed(2)}slatency
);
}
// ── Big hand title (bold modern sans + handwriting accent) ─────────────────────────────
function VTitle({ text, x = '50%', y = '50%', size = 120, color = V.ink, weight = 700, font = fontHead, align = 'center', style }) {
const tx = align === 'center' ? '-50%' : align === 'right' ? '-100%' : '0';
return (
{text}
);
}
// ── Subtle paper texture overlay ─────────────────────────────
function VPaperTexture() {
return (
);
}
// ── Wave packet morphing between two languages (single hero element) ─────────────────────────────
function VLangSwap({ from = 'JP', to = 'EN', progress = 0, x = 0, y = 0 }) {
return (
0.5 ? 1 : 0.3 }} />
);
}
// ── Hand-drawn arrow ─────────────────────────────
function VArrow({ from, to, color = V.accent, thick = 4, curve = 0.3 }) {
const dx = to.x - from.x, dy = to.y - from.y;
const mx = (from.x + to.x) / 2 - dy * curve;
const my = (from.y + to.y) / 2 + dx * curve;
return (
);
}
// ── Official huggie wordmark ─────────────────────────────
// Ported from the live website's Navbar.tsx:
// hu | gg + heart-svg(absolute, centred on gg) | ie
// Heart sized at 0.78× font, top offset -0.27× font (matches the
// website's h-6/h-7 + -top-2/-top-2.5 on text-3xl/4xl).
// Pass noHeart for cases where another heart in the same scene
// would compete (e.g. Scene 6 logo reveal with the big merged heart).
function HuggieLogo({ size = 80, color = V.ink, heartColor = V.accent, noHeart = false, style }) {
const baseStyle = {
fontFamily: fontBrand, fontWeight: 700, fontSize: size,
color, letterSpacing: '-0.025em', lineHeight: 1,
display: 'inline-flex', alignItems: 'baseline',
whiteSpace: 'nowrap',
};
if (noHeart) {
return huggie;
}
return (
hu
gg
ie
);
}
// ── Compact "huggie ai" lockup with green dot pill (call-bug style) ──
function HuggieBug({ size = 26, color = V.ink, heartColor = V.accent, label, style }) {
return (
{label && }
{label && (
{label}
)}
);
}
// ── Map-of-the-world placeholder w/ pulsing dots ─────────────────────────────
// `connections` is an array of { from, to } where from/to are indices into
// the `pulses` array — renders an arched dashed line between the two cities
// as each pair becomes alive.
function VWorld({ width = 1100, height = 540, pulses = [], connections = [], time = 0, style }) {
return (
{/* connection arcs between cities — the background map uses a
0-50 SVG Y-axis, while dots are CSS percentages. This overlay
uses a 0-100 coordinate plane so arcs land on the dot centers. */}
{/* pulses */}
{pulses.map((p, i) => {
const delay = p.delay || 0;
const alive = time > delay;
if (!alive) return null;
return (