87 lines
2.9 KiB
HTML
87 lines
2.9 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>metabolism — songs as substrate</title>
|
||
<link rel="stylesheet" href="/src/demo/style.css" />
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<div class="brand-mark" aria-hidden="true"></div>
|
||
<div class="brand-text">
|
||
<h1>metabolism</h1>
|
||
<p class="tagline">song in → world out. pick a track, grow its film.</p>
|
||
</div>
|
||
</div>
|
||
<div class="controls">
|
||
<label class="ctl" title="The seed picks the exact world a song grows. Same song + same seed is the same film, bit for bit.">
|
||
<span>seed</span>
|
||
<input id="seed" type="number" min="1" max="4294967295" step="1" value="12345" />
|
||
</label>
|
||
<label class="ctl" title="Render resolution. 640×360 is the realtime default; higher is heavier.">
|
||
<span>res</span>
|
||
<select id="res">
|
||
<option value="640x360">640 × 360</option>
|
||
<option value="960x540">960 × 540</option>
|
||
<option value="1280x720">1280 × 720</option>
|
||
</select>
|
||
</label>
|
||
<label class="ctl" title="Main volume">
|
||
<span>vol</span>
|
||
<input id="volume" type="range" min="0" max="100" step="1" value="90" />
|
||
</label>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="layout">
|
||
<aside class="library">
|
||
<div class="library-head">
|
||
<h2>Library</h2>
|
||
<span id="lib-count" class="muted"></span>
|
||
</div>
|
||
<ul id="songs" class="songs"></ul>
|
||
</aside>
|
||
|
||
<section class="stage">
|
||
<div class="screen">
|
||
<canvas id="view"></canvas>
|
||
<div id="overlay" class="overlay" hidden></div>
|
||
</div>
|
||
|
||
<div id="caption" class="caption">…</div>
|
||
|
||
<div class="transport">
|
||
<button id="play" class="play" aria-label="play / pause">▶</button>
|
||
<div class="seekbar">
|
||
<div class="track" id="track">
|
||
<div id="fill" class="fill"></div>
|
||
<div id="ticks" class="ticks"></div>
|
||
<input id="seek" class="seek-input" type="range" min="0" max="1000" step="1" value="0"
|
||
aria-label="seek" />
|
||
</div>
|
||
<div class="times">
|
||
<span id="t0">0:00</span>
|
||
<span id="t1">—</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="statusline">
|
||
<span id="law" class="law">—</span>
|
||
<span id="shot" class="muted">—</span>
|
||
<span id="hud" class="muted">—</span>
|
||
</div>
|
||
|
||
<p class="footnote">
|
||
one run, no clock: the world steps to the song, the camera answers the world, and the
|
||
same <code>Run</code> renders here and in the export tools. no <code>Math.random</code>,
|
||
no wall clock — same song · same seed · same frame ⇒ same pixel.
|
||
</p>
|
||
</section>
|
||
</main>
|
||
|
||
<script type="module" src="/src/demo/main.js"></script>
|
||
</body>
|
||
</html> |