Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DJ Reactor - Reachy Mini App</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <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=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <a href="https://www.runreachyrun.com" class="logo-link"> | |
| <img src="logo.png" alt="runreachyrun" class="logo"> | |
| </a> | |
| <div class="badge-wrapper"> | |
| <span class="badge">Reachy Mini App</span> | |
| </div> | |
| <h1>DJ Reactor</h1> | |
| <p class="tagline">Your Reachy Mini dances to the music</p> | |
| </header> | |
| <main> | |
| <!-- Animated Robot Demo --> | |
| <section class="demo-section"> | |
| <div class="demo-box"> | |
| <div class="robot-icon">🤖</div> | |
| <div class="music-waves"> | |
| <span></span><span></span><span></span><span></span><span></span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hero with 6 feature cards --> | |
| <section class="hero"> | |
| <div class="feature-grid"> | |
| <div class="feature"> | |
| <div class="icon-box purple"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> | |
| </div> | |
| <h3>Real-time Audio</h3> | |
| <p>Analyzes bass, mid, and treble frequencies from any audio input</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon-box cyan"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-6M6 20V10M18 20V4"/></svg> | |
| </div> | |
| <h3>Beat Detection</h3> | |
| <p>Detects beats and estimates BPM for synchronized movements</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon-box amber"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" x2="8" y1="16" y2="16"/><line x1="16" x2="16" y1="16" y2="16"/></svg> | |
| </div> | |
| <h3>Full Body Dance</h3> | |
| <p>Sweeping body sway, head bob, and expressive antenna movements</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon-box green"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg> | |
| </div> | |
| <h3>Multiple Inputs</h3> | |
| <p>Works with microphones, system audio loopback, or any audio device</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon-box purple"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> | |
| </div> | |
| <h3>BPM Sync</h3> | |
| <p>Dance groove adjusts automatically to match the music tempo</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="icon-box cyan"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> | |
| </div> | |
| <h3>Adjustable Intensity</h3> | |
| <p>Control how dramatic the movements are with a simple slider</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Install Section --> | |
| <section class="install"> | |
| <h2>Install on Your Reachy Mini</h2> | |
| <div class="install-steps"> | |
| <div class="step"> | |
| <span class="step-num">1</span> | |
| <div class="step-content"> | |
| <h4>Install the package</h4> | |
| <div class="code-block"> | |
| <code>pip install git+https://huggingface.co/spaces/RyeCatcher/dj-reactor</code> | |
| <button class="copy-btn" onclick="copyCode(this)">Copy</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <span class="step-num">2</span> | |
| <div class="step-content"> | |
| <h4>Start the Reachy Mini daemon</h4> | |
| <div class="code-block"> | |
| <code>reachy-mini-daemon</code> | |
| <button class="copy-btn" onclick="copyCode(this)">Copy</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <span class="step-num">3</span> | |
| <div class="step-content"> | |
| <h4>Launch from dashboard</h4> | |
| <p>Find DJ Reactor in Applications at <strong>localhost:8000</strong></p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How it works --> | |
| <section class="how-it-works"> | |
| <h2>How It Works</h2> | |
| <div class="workflow"> | |
| <div class="workflow-step"> | |
| <div class="workflow-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg> | |
| </div> | |
| <p>Select audio input</p> | |
| </div> | |
| <div class="workflow-arrow">→</div> | |
| <div class="workflow-step"> | |
| <div class="workflow-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-6M6 20V10M18 20V4"/></svg> | |
| </div> | |
| <p>Audio analyzed in real-time</p> | |
| </div> | |
| <div class="workflow-arrow">→</div> | |
| <div class="workflow-step"> | |
| <div class="workflow-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> | |
| </div> | |
| <p>Beats detected</p> | |
| </div> | |
| <div class="workflow-arrow">→</div> | |
| <div class="workflow-step"> | |
| <div class="workflow-icon"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" x2="8" y1="16" y2="16"/><line x1="16" x2="16" y1="16" y2="16"/></svg> | |
| </div> | |
| <p>Reachy dances!</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Audio Setup --> | |
| <section class="audio-setup"> | |
| <h2>System Audio Setup (macOS)</h2> | |
| <p>To capture system audio (Spotify, YouTube, etc.) instead of microphone:</p> | |
| <ol> | |
| <li>Install <a href="https://existential.audio/blackhole/" target="_blank" rel="noopener">BlackHole</a> audio driver</li> | |
| <li>Open <strong>Audio MIDI Setup</strong> and create a Multi-Output Device</li> | |
| <li>Add your speakers + BlackHole to the Multi-Output</li> | |
| <li>Set Multi-Output as system output in Sound preferences</li> | |
| <li>Select "BlackHole 2ch" as input in DJ Reactor</li> | |
| </ol> | |
| </section> | |
| <!-- About --> | |
| <section class="about"> | |
| <h2>About This Project</h2> | |
| <p> | |
| DJ Reactor transforms your Reachy Mini into a physical music visualizer. | |
| Play your favorite tunes and watch your robot companion groove along with | |
| sweeping body movements, head bobs, and antenna bounces synced to the beat. | |
| </p> | |
| <p> | |
| Part of the <strong>Run Reachy Run</strong> project — documenting the journey | |
| of building apps with Reachy Mini. Built with Claude Code. | |
| </p> | |
| <div class="about-links"> | |
| <a href="https://www.runreachyrun.com/apps/dj-reactor" target="_blank" rel="noopener">Learn more on runreachyrun.com →</a> | |
| <a href="https://huggingface.co/spaces/RyeCatcher/dj-reactor/tree/main" target="_blank" rel="noopener">View Source Code →</a> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <a href="https://www.runreachyrun.com" class="footer-logo-link"> | |
| <img src="logo.png" alt="runreachyrun" class="footer-logo"> | |
| <span class="footer-site-name">runreachyrun.com</span> | |
| </a> | |
| <div class="footer-links"> | |
| <a href="https://github.com/BioInfo/reachy" target="_blank" rel="noopener"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon"> | |
| <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/> | |
| </svg> | |
| GitHub | |
| </a> | |
| <a href="https://twitter.com/bioinfo" target="_blank" rel="noopener"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon"> | |
| <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/> | |
| </svg> | |
| </a> | |
| <a href="https://huggingface.co/spaces/RyeCatcher/dj-reactor" target="_blank" rel="noopener"> | |
| <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon"> | |
| <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/> | |
| </svg> | |
| HuggingFace | |
| </a> | |
| <a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="social-icon"> | |
| <rect x="3" y="11" width="18" height="10" rx="2"/> | |
| <circle cx="12" cy="5" r="3"/> | |
| </svg> | |
| Reachy Mini SDK | |
| </a> | |
| </div> | |
| <p class="copyright">MIT License · Built with Claude Code</p> | |
| </footer> | |
| </div> | |
| <script> | |
| function copyCode(btn) { | |
| const code = btn.parentElement.querySelector('code').textContent; | |
| navigator.clipboard.writeText(code).then(() => { | |
| btn.textContent = 'Copied!'; | |
| btn.classList.add('copied'); | |
| setTimeout(() => { | |
| btn.textContent = 'Copy'; | |
| btn.classList.remove('copied'); | |
| }, 2000); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |