Reachy-Mini-DRAFT / index.html
Anne-Charlotte's picture
Update index.html
0c4f280 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reachy Mini Kickstart - Open-Source Companion Robot</title>
<meta name="description" content="Reachy Mini is an expressive, open-source robot designed for human-robot interaction, creative coding, and AI experimentation.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Hero Section -->
<header class="hero">
<video class="hero-video" autoplay muted loop playsinline>
<source src="assets/Reachy-mini-wake-up-companion.mp4" type="video/mp4">
</video>
<div class="hero-overlay"></div>
<div class="hero-content">
<h1>Reachy Mini</h1>
<p class="hero-subtitle">The open-source companion robot for everyone.</p>
<p class="hero-description">
Reachy Mini is an expressive, open-source robot designed for human-robot interaction,
creative coding, and AI experimentation.
</p>
<div class="hero-buttons">
<a href="#kickstart" class="btn btn-primary">Kickstart your robot</a>
<a href="#buy" class="btn btn-outline">Buy Reachy Mini</a>
</div>
</div>
</header>
<!-- Kickstart Section -->
<section id="kickstart" class="section">
<div class="container">
<h2 class="section-title">Kickstart your Reachy Mini</h2>
<p class="section-description">
Follow these steps to assemble your robot, start it with the dashboard, explore
community Spaces, and build your own experiences.
</p>
<!-- 1. BUILD Section -->
<div class="subsection">
<div class="image-title-wrapper">
<img src="assets/Build.png" alt="Build your Reachy Mini" class="section-image section-image-lg">
</div>
<div class="grid-2">
<!-- Reachy Mini -->
<div class="card card-flex">
<h4 class="card-title">Reachy Mini</h4>
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/WeKKdnuXca4?si=wn-0emcMlWxpvXkO"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</div>
<a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Assembly_Guide"
target="_blank"
class="btn btn-outline btn-full mb-4">
Open assembly guide
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
<details class="accordion">
<summary class="accordion-trigger">Connect to your Reachy Mini Wireless</summary>
<div class="accordion-content">
<ol>
<li>Power on your Reachy Mini.</li>
<li>Reachy Mini will create its own access point: "reachy-mini-ap". It should appear in the list of available Wi-Fi networks on your computer or smartphone after a few moments.</li>
<li>Connect your computer to the <code>reachy-mini-ap</code> Wi-Fi network (password: <code>reachy-mini</code>). Or you can directly scan the QR-code below to join the network:</li>
</ol>
<div class="qr-code-wrapper">
<img src="assets/reachy-mini-access-point-QR-code.png" alt="QR Code to connect to reachy-mini-ap" class="qr-code">
</div>
<ol start="4">
<li>Open a web browser and go to <a href="http://reachy-mini.local:8000/settings" target="_blank"><code>http://reachy-mini.local:8000/settings</code></a> to access the configuration page.</li>
<li>Enter your Wi-Fi network credentials (SSID and password) and click "Connect".</li>
<li>Wait a few moments for Reachy Mini to connect to your Wi-Fi network. The access point will disappear once connected. If the connection fails, Reachy Mini will restart the access point, and you can try again.</li>
</ol>
</div>
</details>
</div>
<!-- Reachy Mini Lite -->
<div class="card card-flex">
<h4 class="card-title">Reachy Mini Lite</h4>
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/PC5Yx950nMY?si=M842ZXQsyoB-oCRj"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</div>
<a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_LITE_Assembly_Guide"
target="_blank"
class="btn btn-outline btn-full mb-4">
Open Assembly Guide (Lite version)
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
<details class="accordion">
<summary class="accordion-trigger">Connect to your Reachy Mini Lite</summary>
<div class="accordion-content">
<ol>
<li>Power on Reachy Mini.</li>
<li>Connect Reachy Mini to your computer using the provided USB cable.</li>
<li>Download the dashboard to interact with your Reachy Mini.</li>
</ol>
<a href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases/latest"
target="_blank"
class="link-tertiary link-centered">
Download dashboard
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</details>
</div>
</div>
<p class="beta-link-text">
If you own a beta, your assembly guide is <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_BETA_Assembly_Guide" target="_blank">here</a>
</p>
</div>
<!-- 2. PLAY Section -->
<div class="subsection">
<div class="image-title-wrapper">
<img src="assets/Play.png" alt="Play" class="section-image section-image-lg">
</div>
<div class="grid-2">
<!-- Interactive Dashboard -->
<div class="card card-flex">
<h4 class="card-title">Interactive Dashboard</h4>
<div class="gif-wrapper">
<img src="assets/reachy-mini-demo-dashboard.gif" alt="Reachy Mini Dashboard Demo">
</div>
<p class="card-text">
Start playing with Reachy Mini using our visual dashboard - no coding required.
</p>
<a href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases/latest" target="_blank" class="btn btn-outline btn-full mt-auto">
Download dashboard
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
<!-- Explore Applications -->
<div class="card card-flex">
<h4 class="card-title">Explore Applications</h4>
<div class="gif-wrapper">
<img src="assets/reachy-mini-hand-tracking.gif" alt="Reachy Mini Hand Tracking">
</div>
<p class="card-text">
Explore the applications already developed for Reachy Mini and install them in one click via the dashboard.
</p>
<a href="https://huggingface.co/spaces?q=reachy+mini"
target="_blank"
class="btn btn-outline btn-full mt-auto">
Explore Applications
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- 3. CREATE Section -->
<div class="subsection">
<div class="image-title-wrapper">
<img src="assets/Create.png" alt="Create" class="section-image section-image-lg">
</div>
<div class="grid-3">
<!-- No Code -->
<div class="card card-flex">
<h4 class="card-title">No Code</h4>
<div class="dashboard-image-wrapper">
<img src="dashboard-discover-apps.png" alt="Reachy Mini Dashboard">
</div>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<a href="https://github.com/iizukak/reachy_mini_turbowarp"
target="_blank"
class="link-tertiary link-centered">
Code with Scratch
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
<!-- SDK -->
<div class="card card-flex">
<h4 class="card-title">SDK</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<a href="https://github.com/pollen-robotics/reachy_mini"
target="_blank"
class="link-tertiary link-centered">
Develop native apps
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
<!-- Web API -->
<div class="card card-flex">
<h4 class="card-title">Web API</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
</p>
<a href="https://huggingface.co/spaces/pollen-robotics/reachy_mini_template_app"
target="_blank"
class="link-tertiary link-centered">
Duplicate Template
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- 4. SHARE Section -->
<div class="subsection">
<div class="image-title-wrapper">
<img src="assets/Share.png" alt="Share" class="section-image section-image-lg">
</div>
<div class="grid-2">
<!-- Share your app -->
<div class="card card-flex">
<h4 class="card-title">Share your app with the community</h4>
<div class="gif-wrapper">
<img src="assets/reachy-mini-demo-dashboard.gif" alt="Reachy Mini Dashboard Demo">
</div>
<p class="card-text">
Each app can be shared on Hugging Face by making it public. Each space can receive likes and may appear in our Top Apps.
</p>
<a href="https://huggingface.co/spaces?q=reachy+mini"
target="_blank"
class="btn btn-outline btn-full mt-auto">
Browse Spaces
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
<!-- Co-create -->
<div class="card card-flex">
<h4 class="card-title">Co-create with Reachy Mini Lovers</h4>
<p class="card-text">
Lorem ipsum
</p>
<a href="https://huggingface.co/spaces/pollen-robotics/reachy_mini_app_example"
target="_blank"
class="btn btn-outline btn-full mt-auto">
Duplicate template
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Discord CTA -->
<div class="discord-cta">
<h3>Join the Community</h3>
<p>
Connect with other Reachy Mini owners, share your projects, get help, and stay updated on the latest developments.
</p>
<a href="https://discord.gg/2bAhWfXme9"
target="_blank"
class="btn btn-primary">
Join Pollen Discord
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</section>
<!-- Buy Section -->
<section id="buy" class="section section-muted">
<div class="container">
<h2 class="section-title">Buy Reachy Mini</h2>
<p class="section-description">
Choose the version that best fits your needs. Both versions are fully compatible
with our open-source tooling and Hugging Face Spaces.
</p>
<div class="grid-2 pricing-grid">
<!-- Wireless Version -->
<div class="card pricing-card">
<div class="pricing-header">
<div class="badge badge-muted">Wireless</div>
<h3 class="pricing-title">Reachy Mini</h3>
<p class="pricing-price">$499</p>
</div>
<ul class="feature-list">
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
On-board compute (Raspberry Pi 4)
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Works both wired and wireless
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Wi-Fi enabled
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
4 microphones & 5W speaker
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Wide angle camera
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Integrated accelerometer
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
6 degrees of freedom head movement
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Full body rotation
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
2 animated antennas
</li>
</ul>
<a href="https://buy.stripe.com/9B65kFfFlaKFbY34W873G03"
target="_blank"
class="btn btn-primary btn-full mt-auto">
Buy Wireless version
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
<!-- Lite Version -->
<div class="card pricing-card">
<div class="pricing-header">
<div class="badge badge-primary">Lite</div>
<h3 class="pricing-title">Reachy Mini Lite</h3>
<p class="pricing-price">$299</p>
</div>
<ul class="feature-list">
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
External compute (Mac & Linux, Windows soon)
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
No Wi-Fi (wired power only)
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
4 microphones & 5W speaker
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Wide angle camera
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
No accelerometer
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
6 degrees of freedom head movement
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Full body rotation
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
2 animated antennas
</li>
</ul>
<a href="https://buy.stripe.com/6oUfZj78P1a5e6b0FS73G02"
target="_blank"
class="btn btn-primary btn-full mt-auto">
Buy Lite version
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content-centered">
<p>Need help? Contact us on <a href="https://discord.gg/u3QtUBhy" target="_blank" rel="noopener noreferrer">Discord</a> and join the community.</p>
<p class="footer-credits">Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank" rel="noopener noreferrer">Pollen Robotics</a> x 🤗 <a href="https://huggingface.co/" target="_blank" rel="noopener noreferrer">Hugging Face</a></p>
</div>
</div>
</footer>
<!-- Documentation Button -->
<a href="https://github.com/pollen-robotics/reachy_mini"
target="_blank"
class="doc-button">
<svg class="doc-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
<span class="doc-text">Documentation</span>
</a>
<script src="script.js"></script>
</body>
</html>