| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> |
| <title>Glossolalia Dial</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link rel="stylesheet" |
| href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap" /> |
| <link rel="stylesheet" href="/static/style.css" /> |
| </head> |
| <body> |
| <main class="container"> |
| <header class="hero"> |
| <h1>GLOSSOLALIA</h1> |
| <p class="tagline"> |
| Type a sentence. Pick a voice. Turn the dial.<br /> |
| Hear it dissolve from speech to wordless tongues — in the same voice. |
| </p> |
| <span class="accent-line"></span> |
| </header> |
|
|
| <section class="panel"> |
| <label class="field"> |
| <span>Sentence</span> |
| <textarea id="sentence" rows="2" placeholder="type anything">I had a dream last night about the ocean.</textarea> |
| </label> |
|
|
| <div class="row"> |
| <div class="field voices"> |
| <span>Voice</span> |
| <div class="voice-pills" id="voicePills"> |
| <button class="pill active" data-voice="v1">v1 · warm alto</button> |
| <button class="pill" data-voice="v2">v2 · bright tenor</button> |
| <button class="pill" data-voice="v3">v3 · soft mezzo</button> |
| </div> |
| </div> |
| <div class="field fx"> |
| <span>Post-FX</span> |
| <select id="postfx"> |
| <option value="dry">dry</option> |
| <option value="subtle" selected>subtle</option> |
| <option value="lush">lush</option> |
| <option value="cathedral">cathedral</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="knob-block"> |
| <div class="dial-frame"> |
| <div class="knob" id="knob" role="slider" |
| aria-valuemin="0" aria-valuemax="4" aria-valuenow="0" |
| tabindex="0"> |
| <div class="knob-track"></div> |
| <div class="knob-needle"></div> |
| <div class="knob-value" id="knobValue">0</div> |
| <div class="knob-label">Plain ↔ Tongues</div> |
| </div> |
| <div class="tick-row"> |
| <span>Plain</span><span>1</span><span>2</span><span>3</span><span>Tongues</span> |
| </div> |
| </div> |
|
|
| <div class="controls"> |
| <button class="primary" id="speakBtn">Speak</button> |
| <button class="primary ghost" id="morphBtn">Morph 0 → 4</button> |
| <label class="seed"> |
| <span>Seed</span> |
| <input id="seed" type="number" value="42" min="0" /> |
| </label> |
| </div> |
| </div> |
|
|
| <div class="output"> |
| <audio id="audio" controls></audio> |
| <div id="status" class="status">ready</div> |
| </div> |
| </section> |
|
|
| <footer class="foot"> |
| Open weights · runs locally · the dial is a fine-tuned control token, not a DSP effect. |
| In the lineage of Sigur Rós' Hopelandic, Lisa Gerrard, and the long tradition of wordless |
| vocal music.<br /> |
| BUILD-SMALL-HACKATHON · THOUSAND TOKEN WOOD |
| </footer> |
| </main> |
|
|
| <script type="module" src="/static/knob.js"></script> |
| </body> |
| </html> |
|
|
