| <!DOCTYPE html> |
| <html lang="en" class="scroll-smooth"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="description" content="Kyber Sales Enablement - Your strategic real-time video companion"> |
| <title>Kyber Value Mapper | Home</title> |
| |
| <link rel="icon" type="image/png" href="Images/kyber-logomark.png"> |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| |
| primary: '#6366f1', |
| secondary: '#8b5cf6', |
| dark: '#1e293b' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| |
| .nav-link.active { |
| @apply text-primary font-medium border-b-2 border-primary; |
| } |
| .hamburger-line { |
| @apply w-6 h-0.5 bg-white transition-all duration-300; |
| } |
| #mobileMenuButton.open .hamburger-line:nth-child(1) { |
| transform: rotate(45deg) translate(5px, 6px); |
| } |
| #mobileMenuButton.open .hamburger-line:nth-child(2) { |
| opacity: 0; |
| } |
| #mobileMenuButton.open .hamburger-line:nth-child(3) { |
| transform: rotate(-45deg) translate(5px, -6px); |
| } |
| |
| |
| select { |
| -webkit-appearance: none; -moz-appearance: none; appearance: none; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: right 0.75rem center; |
| background-size: 1.25rem; |
| } |
| .dark select { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col"> |
|
|
| <header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm"> |
| <div class="container mx-auto px-4 py-3"> |
| <div class="flex justify-between items-center"> |
| <a href="index.html" class="flex items-center space-x-2"> |
| <img src="Images/kyber-logomark.png" alt="Kyber Logo" class="h-8 mr-2"> |
| |
| <span class="text-xl font-bold text-gray-800 dark:text-white font-heading">Kyber Sales Enablement</span> |
| </a> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="value-mapper.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Mapper</a> |
| <a href="intel.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Products</a> |
| <a href="proof.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Proof</a> |
| <a href="scorecard.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Scorecard</a> |
| <a href="strategy.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Method</a> |
| <a href="academy.html" class="nav-link py-2 px-1 text-slate-200 hover:text-primary transition-colors">Academy</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button id="themeToggle" class="p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"> |
| <i data-feather="moon" class="hidden dark:block"></i> |
| <i data-feather="sun" class="block dark:hidden"></i> |
| </button> |
| <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 z-50 bg-primary rounded-lg"> |
| <span class="hamburger-line"></span> |
| <span class="hamburger-line"></span> |
| <span class="hamburger-line"></span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| <div id="mobileMenu" class="hidden fixed inset-0 z-40 bg-gray-900 bg-opacity-95 backdrop-blur-sm"> |
| <div class="flex flex-col items-center justify-center h-full space-y-8"> |
| <a href="index.html" class="nav-link text-3xl text-white">Home</a> |
| <a href="value-mapper.html" class="nav-link text-3xl text-white">Mapper</a> |
| <a href="intel.html" class="nav-link text-3xl text-white">Products</a> |
| <a href="proof.html" class="nav-link text-3xl text-white">Proof</a> |
| <a href="scorecard.html" class="nav-link text-3xl text-white">Scorecard</a> |
| <a href="strategy.html" class="nav-link text-3xl text-white">Method</a> |
| <a href="academy.html" class="nav-link text-3xl text-white">Academy</a> |
| </div> |
| </div> |
| <main class="flex-grow bg-gradient-to-br from-purple-600 to-indigo-700"> |
| <div class="container mx-auto px-4 py-12"> |
| <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-2xl shadow-2xl mb-8"> |
| <div class="text-center"> |
| <h1 class="text-3xl sm:text-4xl font-heading font-extrabold text-gray-800 dark:text-white mb-3 leading-tight">Kyber Value Mapper</h1> |
| <div class="flex justify-center mb-6"> |
| <img src="Images/kyber-mapper.png" alt="Kyber Value Mapper Graphic" class="h-48 w-auto"> |
| |
| </div> |
| </div> |
| <div class="max-w-md mx-auto"> |
| <select id="industry-selector" onchange="updateContent(true)" class="block w-full py-3 px-4 pr-10 border border-gray-300 dark:border-gray-600 rounded-xl text-base font-semibold text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-primary focus:outline-none transition duration-200 shadow-lg"> |
| <option value="placeholder" disabled selected class="text-gray-500">- Choose Industry to Map -</option> |
| <option value="Robotics & Tele-Operation">Robotics & Tele-Operation</option> |
| <option value="Cloud Gaming / Cloud Rendering">Cloud Gaming / Cloud Rendering</option> |
| <option value="Live Auctions & eSports Betting">Live Auctions & eSports Betting</option> |
| <option value="Healthcare / Tele-Surgery">Healthcare / Tele-Surgery (New)</option> |
| <option value="Industrial IoT / Machine Vision">Industrial IoT / Machine Vision (New)</option> |
| <option value="Remote Live Production (REMI)">Remote Live Production (REMI) (New)</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div id="initial-message" class="text-center p-12 rounded-xl bg-white/80 dark:bg-gray-800/80 text-gray-600 dark:text-gray-300 border-2 border-dashed border-gray-400 dark:border-gray-600 backdrop-blur-sm"> |
| <p class="text-lg font-medium">Please select an industry from the dropdown above to reveal targeted value mapping, discovery questions, and permission-based openers.</p> |
| </div> |
|
|
| <div id="dynamic-area" class="hidden space-y-8"> |
| <h2 id="industry-title" class="text-3xl font-heading font-bold text-white text-center pt-4"></h2> |
| |
| <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 rounded-xl shadow-lg"> |
| <h3 class="text-xl font-heading font-bold mb-6 text-gray-800 dark:text-white">Recommended Value Proposition & Suggested Product Focus</h3> |
| <div id="value-drivers" class="space-y-4 text-gray-700 dark:text-gray-300 text-base"></div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg"> |
| <h3 class="text-lg font-heading font-bold mb-4 text-gray-800 dark:text-white">Permission-Based Opener (PBO) / C-Level Hook</h3> |
| <p id="pbo1" class="text-gray-800 dark:text-white font-medium text-base"></p> |
| </div> |
| <div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg"> |
| <h3 class="text-lg font-heading font-bold mb-4 text-gray-800 dark:text-white">Discovery Question (DQ) / Technical Deep Dive</h3> |
| <p id="dq1" class="text-gray-600 dark:text-gray-400 italic text-base"></p> |
| </div> |
| </div> |
|
|
| <div class="flex justify-center pt-4"> |
| <button id="refresh-button" class="hidden items-center px-6 py-3 bg-white/20 hover:bg-white/30 rounded-lg text-white font-semibold transition flex space-x-2 shadow-lg"> |
| <i data-feather="refresh-cw" class="w-5 h-5"></i> |
| <span>Cycle Inspiration</span> |
| </button> |
| </div> |
| |
| </div> |
| </div> |
| </main> |
|
|
| <footer class="bg-purple-800/80 dark:bg-purple-800/80 backdrop-blur-sm border-t border-gray-700"> |
| <div class="container mx-auto px-4 py-8"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-6 md:mb-0"> |
| <p class="text-gray-600 dark:text-gray-300 mt-2 text-sm"> |
| Leveraging Kyber to Enable Real-Time Interaction |
| </p> |
| </div> |
| |
| <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400"> |
| <p>© 2025 Kyber Technologies. Real-Time, All The Time.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| const mobileMenuButton = document.getElementById('mobileMenuButton'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| mobileMenuButton.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| mobileMenuButton.classList.toggle('open'); |
| document.body.classList.toggle('overflow-hidden'); |
| }); |
| |
| |
| const themeToggle = document.getElementById('themeToggle'); |
| const html = document.documentElement; |
| themeToggle.addEventListener('click', () => { |
| html.classList.toggle('dark'); |
| localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light'; |
| feather.replace(); |
| }); |
| |
| if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| html.classList.add('dark'); |
| } else { |
| html.classList.remove('dark'); |
| } |
| |
| |
| const currentPage = window.location.pathname.split('/').pop() || 'index.html'; |
| document.querySelectorAll('.nav-link').forEach(link => { |
| const linkHref = link.getAttribute('href'); |
| if (linkHref === currentPage) { |
| link.classList.add('active'); |
| } else { |
| link.classList.remove('active'); |
| } |
| }); |
| |
| feather.replace(); |
| </script> |
| <script> |
| |
| const INDUSTRY_DATA = { |
| "Robotics & Tele-Operation": { |
| valueDrivers: "Value Drivers: Kyber is essential for applications where ultra-low latency (<100ms) is critical for **precision, safety, and human control**. It enables reliable remote control of industrial robots, inspection drones (UAVs), and heavy machinery by minimizing jitter and ensuring deterministic control. Product Focus: Custom Kyber Stack (Encoder/Decoder/Player), Edge Compute Integration, Jitter Mitigation Protocol.", |
| questions: [ |
| |
| { pbo: "Would it be helpful to discuss the annual financial exposure or primary safety risk associated with unexpected jitter or lag in your current tele-operation system?", dq: "What is your absolute glass-to-glass latency budget for the remote operator's visual feedback and input response?" }, |
| |
| { pbo: "If you could own and adapt the full video/input stack (encoder to player) to meet specific national security or proprietary sensor needs, what would that unlock?", dq: "How do you currently handle network variability (jitter) to ensure deterministic control, and what is the cost of your current retransmission/error correction layer?" }, |
| |
| { pbo: "How much complexity and expense is tied up in deploying your current system to new geographic locations or edge compute nodes?", dq: "Are you currently streaming bidirectional input (gamepad, mouse, USB-over-IP) with the video, and what proprietary protocol is currently driving that?" } |
| ] |
| }, |
| "Cloud Gaming / Cloud Rendering": { |
| valueDrivers: "Value Drivers: The core value is delivering a **seamless, highly interactive PC or console experience** streamed to any device. Kyber reduces the network/decoding stack latency to support native high refresh rates (120Hz/240Hz) essential for competitive gaming and high-end graphics work. Product Focus: Kyber Web Codec/WebTransport Client, GPU/CPU Agnostic Optimization, Input Reliability Module.", |
| questions: [ |
| |
| { pbo: "What is the correlation between average latency and customer churn or session abandonment in your interactive cloud service?", dq: "What is the maximum acceptable frame-time added by the network/decoding stack to a native 120Hz or 240Hz rendered stream?" }, |
| |
| { pbo: "If you could shift encoding/decoding optimization to an open, hardware-agnostic platform, what percentage savings could you realize in GPU/CPU rental costs?", dq: "Are you constrained by WebRTC's complexity or WebCodec's browser compatibility, and which codecs (AV1, HEVC) must you support on the client?" }, |
| |
| { pbo: "How long does it currently take your team to port your streaming solution to a new platform (e.g., an embedded smart TV or a new operating system)?", dq: "What is your failover mechanism for input streams during network loss, and is there an unacceptable delay on reconnecting the input channel?" } |
| ] |
| }, |
| "Live Auctions & eSports Betting": { |
| valueDrivers: "Value Drivers: Kyber enables **real-time synchronization** of interactive data (bids, odds) with the video feed, requiring sub-300ms total latency. This eliminates missed monetization opportunities and ensures regulatory compliance for high-stakes, time-sensitive events. Product Focus: Kyber QUIC/WebTransport Protocol, Data Synchronization Layer, Custom Player SDK.", |
| questions: [ |
| |
| { pbo: "How many millions of euros in potential revenue are lost annually due to the latency window between the live event and the user's ability to place a bet or bid?", dq: "What is the current delay difference (skew) between the video feed and the interactive data stream (e.g., bid button, betting odds update)?" }, |
| |
| { pbo: "Does your current system provide the auditable, deterministic, and synchronized timestamping needed to satisfy fair-play regulations for high-stakes real-time events?", dq: "How much unnecessary bandwidth is consumed by using a high-latency (e.g., HLS) protocol to achieve scalability that Kyber could reduce with QUIC/WebTransport?" }, |
| |
| { pbo: "What specific new high-interaction product (e.g., live dealer experience, interactive trivia) could you launch if you could guarantee a true real-time experience?", dq: "What custom logic or interactive overlays are you struggling to perfectly sync within the player due to mandated player buffer depths?" } |
| ] |
| }, |
| "Healthcare / Tele-Surgery": { |
| valueDrivers: "Value Drivers: Kyber provides the ultra-low latency (<100ms) and **diagnostic fidelity** required for life-critical applications like remote diagnostics, real-time consultation, and remote assistance in complex surgical procedures. **Security and interoperability** are non-negotiable. Product Focus: Kyber Secure Stream, End-to-End Encryption, Medical Imaging Interoperability Module.", |
| questions: [ |
| |
| { pbo: "What is the liability or insurance premium reduction achievable by migrating to an auditable, sub-100ms video stack for remote assistance in the operating room?", dq: "Beyond latency, what is your threshold for acceptable packet loss or video artifacts during a critical remote diagnostic feed?" }, |
| |
| { pbo: "What is the strategic value of securely providing expert surgical consultation or training to remote, low-bandwidth hospitals using an optimized open-source stack?", dq: "How complex is integrating your current real-time video stream with specialized medical imaging hardware (e.g., endoscopy cameras, MRI displays)?" }, |
| |
| { pbo: "How much time is wasted daily by doctors and specialists due to poor video quality, dropped connections, or laggy interactive interfaces?", dq: "Can your current streaming solution meet the necessary end-to-end encryption and metadata privacy standards required by health data regulations (e.g., GDPR, HIPAA)?" } |
| ] |
| }, |
| "Industrial IoT / Machine Vision": { |
| valueDrivers: "Value Drivers: Enables **real-time AI inference and action control** on manufacturing lines and autonomous systems by ensuring the total round-trip latency (capture to command) is minimized. Kyber delivers higher operational efficiency and defect detection rates. Product Focus: Kyber Edge SDK, High-Efficiency Codecs (AV1/HEVC), Cloud/Edge Synchronization API.", |
| questions: [ |
| |
| { pbo: "If you could cut 50ms from your control loop latency, what percentage increase would you see in manufacturing throughput or defect detection rate?", dq: "What is the total round-trip time (camera capture $\rightarrow$ cloud/edge inference $\rightarrow$ action command) you must hit to maintain line speed or control stability?" }, |
| |
| { pbo: "Are you concerned about your reliance on a single vendor's proprietary stack for your critical Industrial IoT (IIoT) control plane, and what is the cost of switching?", dq: "How are you managing the synchronization of configuration and control messages between the edge device and the centralized cloud dashboard?" }, |
| |
| { pbo: "Given the open-source nature of Kyber, how valuable is it to your strategy to have a transparent, auditable control stack where proprietary algorithms can be secured?", dq: "Are you leveraging modern, high-efficiency codecs (like AV1 or HEVC) on your embedded hardware to minimize bandwidth costs on cellular/remote connections?" } |
| ] |
| }, |
| "Remote Live Production (REMI)": { |
| valueDrivers: "Value Drivers: Kyber provides **high-quality, low-latency transport** of contribution feeds from a remote venue back to a centralized studio (REMI/At-Home Production). It is critical for reducing on-site crew costs while maintaining strict synchronization (genlock) and content quality. Product Focus: Kyber REMI Gateway, Genlock Synchronization Module, Bidirectional Comms API.", |
| questions: [ |
| |
| { pbo: "What is the potential cost savings from reducing the size of your on-site production crew and equipment by shifting more tasks to a remote hub via low-latency feed?", dq: "What is your minimum requirement for synchronization (genlock) between multiple remote camera feeds ingested into the central production switcher?" }, |
| |
| { pbo: "What is the maximum acceptable delay between the action occurring at the venue and the broadcast feed reaching your primary CDN ingest point?", dq: "Are you currently using SRT or NDI, and what specific limitations (jitter, complexity of NAT traversal, non-native web playback) are you encountering with that protocol?" }, |
| |
| { pbo: "How quickly can you spin up a new, professional-grade remote production feed for a sudden, high-profile event using your existing infrastructure?", dq: "How critical is it to have guaranteed, low-latency, bidirectional audio/video communication for the director and camera operators back to the remote site?" } |
| ] |
| } |
| }; |
| |
| |
| |
| |
| let currentQuestionIndex = 0; |
| const selector = document.getElementById('industry-selector'); |
| const refreshButton = document.getElementById('refresh-button'); |
| |
| function cycleQuestions() { |
| const industry = selector.value; |
| if (!industry || industry === 'placeholder') return; |
| |
| const data = INDUSTRY_DATA[industry]; |
| if (!data.questions || data.questions.length === 0) return; |
| |
| |
| currentQuestionIndex = (currentQuestionIndex + 1) % data.questions.length; |
| |
| const newPair = data.questions[currentQuestionIndex]; |
| |
| document.getElementById('pbo1').textContent = newPair.pbo; |
| document.getElementById('dq1').textContent = newPair.dq; |
| } |
| |
| function updateContent(shouldScroll = false) { |
| const industry = selector.value; |
| const dynamicArea = document.getElementById('dynamic-area'); |
| const initialMessage = document.getElementById('initial-message'); |
| |
| if (!industry || industry === 'placeholder') { |
| dynamicArea.classList.add('hidden'); |
| initialMessage.classList.remove('hidden'); |
| refreshButton.classList.add('hidden'); |
| return; |
| } |
| |
| const data = INDUSTRY_DATA[industry]; |
| document.getElementById('industry-title').textContent = industry; |
| const valueDriversElement = document.getElementById('value-drivers'); |
| |
| |
| |
| |
| valueDriversElement.innerHTML = data.valueDrivers.replace(/Value Drivers: (.*?)\. Product Focus: (.*?)\./s, |
| `<p class="font-semibold text-lg mb-2 text-primary dark:text-blue-400">Value Drivers:</p> |
| <p class="mb-4">${'$1'}</p> |
| <p class="font-semibold text-lg mb-2 text-primary dark:text-blue-400">Product Focus:</p> |
| <p>${'$2'}</p>`); |
| |
| |
| currentQuestionIndex = 0; |
| if (data.questions && data.questions.length > 0) { |
| const firstPair = data.questions[0]; |
| document.getElementById('pbo1').textContent = firstPair.pbo; |
| document.getElementById('dq1').textContent = firstPair.dq; |
| refreshButton.classList.remove('hidden'); |
| } else { |
| |
| document.getElementById('pbo1').textContent = "No opener available for this industry."; |
| document.getElementById('dq1').textContent = "No discovery question available."; |
| refreshButton.classList.add('hidden'); |
| } |
| |
| initialMessage.classList.add('hidden'); |
| dynamicArea.classList.remove('hidden'); |
| feather.replace(); |
| |
| if (shouldScroll) { |
| dynamicArea.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| } |
| } |
| |
| |
| refreshButton.addEventListener('click', cycleQuestions); |
| |
| |
| window.onload = () => updateContent(false); |
| </script> |
|
|
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
