Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hyperspace Jam</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| <!-- Primary Meta Tags --> | |
| <meta name="title" content="Hyperspace Jam — Hand-controlled psychedelic synth with hyperbolic geometry"> | |
| <meta name="description" content="Hyperspace Jam — Hand-controlled psychedelic synth with hyperbolic geometry"> | |
| <!-- Open Graph / Facebook --> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:title" content="Hyperspace Jam — Hand-controlled psychedelic synth with hyperbolic geometry"> | |
| <meta property="og:description" content="Hyperspace Jam — Hand-controlled psychedelic synth with hyperbolic geometry"> | |
| <!-- Twitter --> | |
| <meta property="twitter:card" content="summary_large_image"> | |
| <meta property="twitter:title" content="Hyperspace Jam — Hand-controlled psychedelic synth with hyperbolic geometry"> | |
| <meta property="twitter:description" content="Hyperspace Jam — Hand-controlled psychedelic synth with hyperbolic geometry"> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://esm.sh/three@0.161.0?dev", | |
| "three/": "https://esm.sh/three@0.161.0&dev/" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body style="width: 100%; height: 100%; overflow: hidden; margin: 0;"> | |
| <div id="renderDiv" style="width: 100%; height: 100%; margin: 0;"> | |
| <div id="corner-controls"> | |
| <div id="multiplayer-toggle" onclick="window._toggleMultiplayer && window._toggleMultiplayer()"> | |
| <span class="mp-label">MULTI</span> | |
| <span id="mp-status" class="mp-off">OFF</span> | |
| </div> | |
| <div id="legend-toggle" onclick="document.getElementById('controls-hint').classList.toggle('hidden')"> | |
| <span class="toggle-icon">?</span> | |
| <span class="toggle-title">Hyperspace Jam</span> | |
| </div> | |
| </div> | |
| <div id="controls-hint" class="hidden"> | |
| <div class="hint-title">HYPERSPACE JAM</div> | |
| <div class="hint-grid"> | |
| <span class="hint-icon">↕️</span><span class="hint-desc">Hand high = bright · Hand low = DEEP bass</span> | |
| <span class="hint-icon">👌</span><span class="hint-desc">Pinch thumb+index = volume</span> | |
| <span class="hint-icon">🖐️</span><span class="hint-desc">Extend fingers = play chord notes</span> | |
| <span class="hint-icon">✊</span><span class="hint-desc">Make fist = cycle synth sound</span> | |
| <span class="hint-icon">🤲</span><span class="hint-desc">Tilt wrist = filter sweep + detune</span> | |
| <span class="hint-icon">🤚</span><span class="hint-desc">2nd hand = kick · hihat · clap (distance = tempo)</span> | |
| <span class="hint-icon">📏</span><span class="hint-desc">Spread fingers wide = wobble bass</span> | |
| <span class="hint-icon">👆</span><span class="hint-desc">Touch fingertips together = sparkle sounds</span> | |
| </div> | |
| <div class="hint-fade">spacebar = panic stop · D = toggle displacement</div> | |
| </div> | |
| </div> | |
| <div id="attract-mode"> | |
| <div id="attract-text">STEP UP TO JAM</div> | |
| <div id="attract-sub">wave your hands to make music</div> | |
| </div> | |
| <script type="module" src="main.js"></script> | |
| </body> | |
| </html> | |