Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1" /> | |
| <title>AIRWAVES — conduct a DJ set with your bare hands</title> | |
| <meta name="description" content="No turntables, no controller. Bend a live set in the air with your bare hands." /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div id="stage"> | |
| <!-- SESSION --> | |
| <section id="session" class="screen hidden"> | |
| <div id="mirror"> | |
| <video id="cam" autoplay playsinline muted></video> | |
| <canvas id="draw"></canvas> | |
| </div> | |
| <header id="topbar"> | |
| <div class="logo">AIR<span>WAVES</span></div> | |
| <div class="badges"><span id="state">raise a hand ✋</span><span id="fps" class="mono">…</span><span id="badge" class="mono">starting…</span></div> | |
| </header> | |
| <div id="source"> | |
| <button id="srcBeat" class="src on">▶ built-in beat</button> | |
| <button id="srcTab" class="src">🎬 bend a tab (YouTube…)</button> | |
| <span id="srcNote" class="srcnote"></span> | |
| </div> | |
| <div id="rack"> | |
| <div class="knob"><div class="bar" id="mHeight"></div><label>↕ filter</label></div> | |
| <div class="knob"><div class="bar" id="mWarp"></div><label>↻ warp</label></div> | |
| <div class="knob"><div class="bar" id="mSpace"></div><label>🤏 space</label></div> | |
| <div class="knob"><div class="bar mag" id="mFist"></div><label>✊ build</label></div> | |
| </div> | |
| </section> | |
| <!-- START --> | |
| <section id="start" class="screen"> | |
| <div class="card"> | |
| <div class="logo big">AIR<span>WAVES</span></div> | |
| <p class="tag">No turntables. No controller. <b>Conduct a live set with your bare hands.</b></p> | |
| <ul class="moves"> | |
| <li><b>↕ Raise your hand</b> — open the filter, pull the track up out of the floor</li> | |
| <li><b>↻ Tilt your hand</b> — warp the record like a turntable</li> | |
| <li><b>🤏 Pinch</b> — drench it in reverb & echo</li> | |
| <li><b>✊ Clench, then throw open</b> — build the stutter… and <b>DROP</b></li> | |
| </ul> | |
| <button id="go">Start the deck</button> | |
| <p id="hint" class="mono">the camera never leaves your device 🔒</p> | |
| </div> | |
| </section> | |
| </div> | |
| <script type="module" src="main.js"></script> | |
| </body> | |
| </html> | |