// koryo-ui.jsx // Shared building blocks for the Koryo demo: brand chrome, app shell, // sidebar, cross-pattern bg, cursor overlay, captions, messaging-app mock. // ── Brand tokens ──────────────────────────────────────────────────────────── const KORYO = { bg: '#f4f3fb', bgCard: '#ffffff', ink: '#0e0e1a', inkSoft: 'oklch(55% 0.04 280)', inkMute: 'oklch(70% 0.03 280)', border: 'oklch(90% 0.02 280)', borderSoft: 'oklch(94% 0.015 280)', indigo: 'oklch(60% 0.21 280)', indigoSoft: 'oklch(92% 0.05 280)', indigoText: 'oklch(55% 0.20 280)', sidebarBg: '#0a0d1a', sidebarMute: 'oklch(75% 0.04 280)', sidebarMute2: 'oklch(55% 0.03 280)', red: 'oklch(62% 0.20 25)', redBg: 'oklch(94% 0.04 25)', green: 'oklch(60% 0.16 155)', greenBg: 'oklch(94% 0.05 155)', amber: 'oklch(72% 0.15 75)', amberBg: 'oklch(95% 0.06 75)', font: '"Inter", system-ui, -apple-system, sans-serif', fontMono: '"JetBrains Mono", ui-monospace, monospace', }; // ── Multi-color glyph used to indicate "Slack channel" (stylized, not a brand mark) ─ function SlackGlyph({ size = 14, active = true }) { // 4 rounded rects arranged in a pinwheel — generic "messenger" style. // When inactive, render in monochrome muted. const c1 = active ? 'oklch(75% 0.18 30)' : 'oklch(70% 0.02 280)'; // warm const c2 = active ? 'oklch(75% 0.16 145)' : 'oklch(70% 0.02 280)'; // green const c3 = active ? 'oklch(70% 0.18 220)' : 'oklch(70% 0.02 280)'; // blue const c4 = active ? 'oklch(80% 0.16 95)' : 'oklch(70% 0.02 280)'; // yellow return ( ); } // ── Cross pattern background ──────────────────────────────────────────────── function CrossBG({ children, style }) { const svg = ""; return (
{children}
); } // ── Heart-rate logo mark ─────────────────────────────────────────────────── function KoryoMark({ size = 28, color = KORYO.indigo }) { return ( ); } // ── App icon (square w/ heart-rate) ──────────────────────────────────────── function KoryoAppIcon({ size = 72 }) { return (
); } // ── Sidebar nav icon ─────────────────────────────────────────────────────── function NavIcon({ kind, size = 18, color = 'currentColor' }) { const s = { width: size, height: size, stroke: color, fill: 'none', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (kind === 'users') return ( ); if (kind === 'surveys') return ( ); if (kind === 'results') return ( ); if (kind === 'settings') return ( ); if (kind === 'cards') return ( ); return null; } // ── Sidebar ──────────────────────────────────────────────────────────────── function KoryoSidebar({ active = 'home' }) { const item = (key, label, icon) => { const on = active === key; return (
{label}
); }; return (
koryo
Employee Experience
Axon Apps
{item('users','Users','users')} {item('surveys','Surveys','cards')} {item('results','Results','results')} {item('settings','Settings','settings')}
Alex Kim
alex.kim@axonapps.io
○ Super admin
Change password
Sign out
☀ Light
); } // ── App-shell frame (sidebar + content area on cross bg) ─────────────────── function KoryoApp({ active = 'home', children, browserChrome = true }) { return (
{browserChrome && (
app.koryo.work / axon-apps
)}
{children}
); } // ── Animated cursor pointer ──────────────────────────────────────────────── function Cursor({ path, color = '#0e0e1a' }) { // path: [{t, x, y}, ...] — t is progress 0..1 across the sprite duration const { progress } = useSprite(); if (!path || path.length === 0) return null; let x = path[0].x, y = path[0].y; if (progress >= path[path.length - 1].t) { x = path[path.length - 1].x; y = path[path.length - 1].y; } else { for (let i = 0; i < path.length - 1; i++) { const a = path[i], b = path[i + 1]; if (progress >= a.t && progress <= b.t) { const span = b.t - a.t; const local = span === 0 ? 0 : (progress - a.t) / span; const eased = Easing.easeInOutCubic(local); x = a.x + (b.x - a.x) * eased; y = a.y + (b.y - a.y) * eased; break; } } } return (
); } // ── Click pulse (shows when cursor "clicks") ─────────────────────────────── function ClickPulse({ x, y, at, color = KORYO.indigo }) { const { localTime } = useSprite(); const dt = localTime - at; if (dt < 0 || dt > 0.7) return null; const p = dt / 0.7; const r = 8 + p * 22; const op = 1 - p; return (
); } // ── Caption (bottom-left explainer chip) ─────────────────────────────────── function Caption({ kicker, line }) { const { localTime, duration } = useSprite(); const inAt = 0.25; const outAt = duration - 0.3; let opacity = 1, ty = 0; if (localTime < inAt) { const t = Easing.easeOutCubic(clamp(localTime / inAt, 0, 1)); opacity = t; ty = (1 - t) * 12; } else if (localTime > outAt) { const t = Easing.easeInCubic(clamp((localTime - outAt) / 0.3, 0, 1)); opacity = 1 - t; ty = -t * 8; } return (
{kicker && (
{kicker}
)}
{line}
); } // ── Scene letterbox / vignette helper (subtle dark edges) ────────────────── function SceneVignette() { return (
); } // ── Crossfade wrapper: fades the entire scene in and out ─────────────────── function SceneFade({ children, fadeIn = 0.5, fadeOut = 0.5 }) { const { localTime, duration } = useSprite(); let opacity = 1; if (localTime < fadeIn) opacity = Easing.easeOutCubic(localTime / fadeIn); else if (localTime > duration - fadeOut) opacity = 1 - Easing.easeInCubic((localTime - (duration - fadeOut)) / fadeOut); return (
{children}
); } // ── Camera move (scale + translate the whole scene) ───────────────────────── function CameraMove({ from = { x: 0, y: 0, scale: 1 }, to = { x: 0, y: 0, scale: 1 }, ease = Easing.easeInOutCubic, children }) { const { progress } = useSprite(); const t = ease(progress); const x = from.x + (to.x - from.x) * t; const y = from.y + (to.y - from.y) * t; const s = from.scale + (to.scale - from.scale) * t; return (
{children}
); } Object.assign(window, { KORYO, CrossBG, KoryoMark, KoryoAppIcon, NavIcon, SlackGlyph, KoryoSidebar, KoryoApp, Cursor, ClickPulse, Caption, SceneVignette, SceneFade, CameraMove, });