File size: 5,387 Bytes
3980849
 
7e6f1d8
3980849
 
 
 
 
7e6f1d8
 
 
3980849
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
0d5ab9c
 
 
3980849
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arcade - Reachy Mini</title>
  <meta name="description" content="Play retro arcade games with Reachy Mini - 6 games controlled with head movements and antenna pulls.">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Hero Section -->
  <section class="hero">
    <div class="container">
      <div class="hero-grid">
        <div>
          <img class="hero-image" src="assets/reachy-mini-skin-arcade.png" alt="Reachy Mini Arcade">
        </div>

        <div class="hero-content">
          <div class="hero-header">
            <img class="hero-sticker" src="assets/reachy-mini-arcade_sticker.png" alt="Arcade">
            <h1 class="hero-title">Arcade</h1>
          </div>

          <div class="tags">
            <span class="tag">games</span>
            <span class="tag">head control</span>
            <span class="tag">physical arcade</span>
          </div>

          <p class="hero-description">
            Turn your <b>Reachy Mini</b> into a retro arcade machine! Control 6 games using head movements and antenna pulls. Play on a physical ESP32 screen or directly in the browser.
            <br><br>
            Games: <b>Spaceship</b>, <b>Pong</b>, <b>Duck Run</b>, <b>Flappy</b>, <b>Boss Fight</b>, and <b>Rhythm</b>.
            <br><br>
            This app comes with an optional <a href="https://github.com/pollen-robotics/reachy-mini-skins/tree/main/arcade" target="_blank" class="link-skin">physical arcade skin</a> you can build yourself — but it's <b>not required</b> to play!
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- How to install -->
  <section class="technical">
    <div class="container">
      <div class="technical-grid">
        <div>
          <h2 class="section-title">How to install</h2>

          <ol class="install-steps">
            <li>
              <span>
                Make sure you already have the
                <a href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases/latest"
                   class="link-tertiary">dashboard</a>
                installed.
              </span>
            </li>
            <li>
              <span>Connect to your Reachy Mini using the dashboard.</span>
            </li>
            <li>
              <span>Navigate to the "Applications" tab in the dashboard.</span>
            </li>
            <li>
              <span>Find "Arcade" in the list of available applications.</span>
            </li>
            <li>
              <span>Click "Install" and the app will be ready to use!</span>
            </li>
          </ol>
        </div>

        <div>
          <video class="demo-video" autoplay loop muted playsinline>
            <source src="assets/arcade_launch.mp4" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </section>

  <!-- How to play -->
  <section class="how-to-play">
    <div class="container">
      <div class="technical-grid">
        <div>
          <video class="demo-video" autoplay loop muted playsinline>
            <source src="assets/reachy-mini-arcade-demo.mp4" type="video/mp4">
          </video>
        </div>

        <div>
          <h2 class="section-title">How to play</h2>

          <div class="controls-list">
            <div class="control-item">
              <div class="control-icon"></div>
              <div>
                <h4>Tilt Reachy's head</h4>
                <p>Roll left/right to move your character. Pitch forward/back for vertical movement.</p>
              </div>
            </div>

            <div class="control-item">
              <div class="control-icon"></div>
              <div>
                <h4>Pull the antennas</h4>
                <p>Pull left or right antenna to shoot, jump, flap, or hit notes depending on the game.</p>
              </div>
            </div>

            <div class="control-item">
              <div class="control-icon"></div>
              <div>
                <h4>Two play modes</h4>
                <p>Play on the physical arcade with an ESP32 screen, or directly in the browser without any extra hardware.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-links">
          <a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener">> Documentation</a>
          <a href="https://huggingface.co/spaces/pollen-robotics/Reachy-Mini_Best_Spaces" target="_blank" rel="noopener">> Browse other apps</a>
          <a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener">> Create your own app</a>
        </div>
        <p class="footer-help">
          Need help? Contact us on <a href="https://discord.gg/u3QtUBhy" target="_blank" rel="noopener">Discord</a> and join the community.
          Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank">Pollen Robotics</a> x &#129303; <a href="https://huggingface.co" target="_blank">Hugging Face</a>
        </p>
      </div>
    </div>
  </footer>

</body>
</html>