index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#f5f8fc">
  <meta name="description" content="Humanoid Application Lab brings 25 years of industrial automation integration experience to humanoid robotics. Preparing your operation for humanoids.">
  <title>Humanoid Application Lab — Humanoid robots are coming to the plant floor.</title>
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <a class="skip-link" href="#main">Skip to content</a>
  <header class="site-header wrap">
    <a class="brand" href="#" aria-label="Humanoid Application Lab home">
      <img class="brand-mark" src="img/hal.svg" alt="" width="1200" height="380">
      <span class="brand-name">HUMANOID<span class="brand-sub">APPLICATION LAB</span></span>
    </a>
    <nav aria-label="Main navigation">
      <a href="#readiness">Readiness</a>
      <a href="#work">Our focus</a>
      <a href="#lab">The lab</a>
      <a class="nav-contact" href="#contact">Let’s talk <span aria-hidden="true">↗</span></a>
    </nav>
  </header>

  <main id="main">
    <section class="hero wrap" aria-labelledby="hero-title">
      <div class="hero-copy">
        <p class="eyebrow"><span class="status-dot" aria-hidden="true"></span> HUMANOID ROBOTICS / INDUSTRIAL SOFTWARE</p>
        <h1 id="hero-title">Humanoid robots are coming to the <span>plant floor.</span></h1>
        <p class="hero-tagline">We’ll help you be ready.</p>
        <p class="hero-description">Affordable humanoids are years away, not decades. When they arrive, the robot won’t be the hard part. However making it work in your production environment will be.</p>
        <p class="hero-subtext">We are taking 25 years of automation integration experience into this emerging humanoid industry.</p>
        <a class="button" href="mailto:info@datarealminc.com">Start a conversation <span aria-hidden="true">↗</span></a>
        <p class="hero-note"><span>Design</span><span>Validate</span><span>Integrate</span></p>
      </div>
      <figure class="hero-photo">
        <img src="img/facility.jpg" alt="Two humanoid robots working on a manufacturing plant floor at Humanoid Application Lab" width="1379" height="920" fetchpriority="high">
        <figcaption><span class="photo-label">FROM THE LAB</span><span>Plant floor integration. Real-world work.</span><span aria-hidden="true">↗</span></figcaption>
      </figure>
    </section>

    <section id="readiness" class="readiness-section wrap" aria-labelledby="readiness-title">
      <div class="section-heading">
        <p class="eyebrow"><span class="status-dot" aria-hidden="true"></span> REAL-WORLD VALUE</p>
        <div>
          <h2 id="readiness-title">Making humanoids do <span>real work.</span></h2>
          <p class="readiness-lead">We believe humanoid robots will soon be practical, affordable, and commonplace, and that this timeframe is only a few years away, not decades.</p>
        </div>
      </div>
      <div class="readiness-grid">
        <div class="readiness-col">
          <p class="readiness-body">As production scales and improvements continue the humanoids themselves will become less expensive. So the real value will come from making them do real work, which means:</p>
          <ul class="readiness-list">
            <li><span class="mono">01</span><span>Integrating them into your environment</span></li>
            <li><span class="mono">02</span><span>Working around your constraints</span></li>
            <li><span class="mono">03</span><span>Interacting with your controls</span></li>
            <li><span class="mono">04</span><span>Proving them out on real tasks</span></li>
            <li><span class="mono">05</span><span>Training them to be repeatable and reliable</span></li>
          </ul>
        </div>
        <div class="readiness-card">
          <span class="mono card-label">OUR ADVANTAGE</span>
          <p class="card-lead">That’s where we come in!</p>
          <h3 class="card-title">Humanoid App Lab is built on top of 25 years of industrial automation experience.</h3>
          <p class="card-text">We bring the tools, the training, and a deep understanding of how manufacturing actually works.</p>
          <div class="card-goal">
            <span class="mono goal-tag">OUR GOAL</span>
            <p class="goal-desc">When humanoids are ready for your operation, your operation is ready for them.</p>
          </div>
        </div>
      </div>
    </section>

    <div class="connection-band">
      <div class="wrap connection-inner"><span class="eyebrow">BUILT FOR THE WORLD ALREADY HERE</span><p>Existing machinery <span aria-hidden="true">/</span> PLCs <span aria-hidden="true">/</span> HMIs <span aria-hidden="true">/</span> Your next application</p></div>
    </div>

    <section id="work" class="work-section wrap" aria-labelledby="work-title">
      <div class="section-heading">
        <p class="eyebrow"><span class="section-number">01 /</span> OUR FOCUS</p>
        <div><h2 id="work-title">The software between<br>robot and real world.</h2><p>Different robots. A common foundation.<br>We’re developing tools that work across humanoid platforms.</p></div>
      </div>
      <div class="focus-grid">
        <article class="focus-item">
          <div class="focus-top"><span class="mono">01</span><svg viewBox="0 0 48 48" aria-hidden="true"><rect x="5" y="9" width="14" height="14"/><rect x="29" y="25" width="14" height="14"/><path d="M19 16h17v9M12 23v9h17"/><circle cx="12" cy="16" r="2"/><circle cx="36" cy="32" r="2"/></svg></div>
          <h3>Connect &amp; control</h3><p>Create control programs that help humanoids interact with existing machinery, PLCs, and HMIs.</p>
          <span class="focus-tag">INDUSTRIAL INTEGRATION</span>
        </article>
        <article class="focus-item">
          <div class="focus-top"><span class="mono">02</span><svg viewBox="0 0 48 48" aria-hidden="true"><path d="M16 6H6v10M32 6h10v10M6 32v10h10M42 32v10H32M15 24h18M24 15v18"/><circle cx="24" cy="24" r="11"/></svg></div>
          <h3>Capture &amp; learn</h3><p>Capture demonstrations and training data to turn real tasks into useful learning material.</p>
          <span class="focus-tag">TRAINING DATA</span>
        </article>
        <article class="focus-item">
          <div class="focus-top"><span class="mono">03</span><svg viewBox="0 0 48 48" aria-hidden="true"><path d="m11 12 13 12 13-12M11 36l13-12 13 12M24 6v18M24 24v18"/><circle cx="11" cy="12" r="4"/><circle cx="37" cy="12" r="4"/><circle cx="11" cy="36" r="4"/><circle cx="37" cy="36" r="4"/><circle cx="24" cy="24" r="5"/></svg></div>
          <h3>Train &amp; perceive</h3><p>Train vision systems and vision-language-action (VLA) models for industrial environments.</p>
          <span class="focus-tag">APPLIED AI</span>
        </article>
      </div>
    </section>

    <section id="lab" class="lab-section" aria-labelledby="lab-title">
      <div class="wrap lab-grid">
        <figure class="lab-photo"><img src="img/team.jpg" alt="People and humanoid robots together in a lab with equipment, shelving, and a whiteboard" width="2040" height="1536" loading="lazy"><figcaption>Hands-on exploration. Practical ambition.</figcaption></figure>
        <div class="lab-copy"><p class="eyebrow"><span class="section-number">02 /</span> THE LAB</p><h2 id="lab-title">Early days.<br>Real ambition.</h2><p>We’re a new lab with a practical goal: make humanoid robotics useful in industry.</p><p>As a branch of DataRealm Inc., we’re bringing an industrial controls and software perspective to the next generation of robotics.</p><div class="parent-brand"><span class="mono">PART OF</span><a href="https://www.datarealminc.com/" target="_blank" rel="noopener noreferrer" aria-label="Visit DataRealm Inc. (opens in a new tab)"><img src="img/datarealm.png" alt="DataRealm" width="2048" height="698" loading="lazy"><span aria-hidden="true">↗</span></a></div></div>
      </div>
    </section>

    <section id="contact" class="contact-section wrap" aria-labelledby="contact-title">
      <p class="eyebrow"><span class="section-number">03 /</span> LET’S TALK</p>
      <div class="contact-grid"><div><h2 id="contact-title">What could a humanoid<br>do in your world?</h2><p>Have an application in mind, or just curious?<br>We’d like to hear from you.</p></div><a class="contact-link" href="mailto:info@datarealminc.com"><span class="mono">GET IN TOUCH</span><span class="email">info@datarealminc.com <span aria-hidden="true">↗</span></span></a></div>
    </section>
  </main>
  <footer class="site-footer wrap"><a class="footer-brand" href="#"><img src="img/hal.svg" alt="" width="1200" height="380"><span>Humanoid<span class="footer-brand-sub">Application Lab</span></span></a><p>A branch of <a href="https://www.datarealminc.com/" target="_blank" rel="noopener noreferrer">DataRealm Inc.</a></p><span class="copyright">© <span id="year">2026</span> Humanoid Application Lab</span><a class="back-top" href="#">Back to top <span aria-hidden="true">↑</span></a></footer>
</body>
</html>