index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" content="#070808">
  <title>EIGHT SECONDS OF DUSK — 八秒だけの世界</title>
  <link rel="stylesheet" href="./styles.css">
  <link rel="stylesheet" href="./dusk.css">
</head>
<body>
  <main id="film">
    <canvas id="world" aria-label="光と闇の生命が黄昏の八秒間だけ出会う映像作品"></canvas>
    <div class="veil" aria-hidden="true"></div><div class="grain" aria-hidden="true"></div>
    <div class="flash" id="flash" aria-hidden="true"></div>
    <header>
      <a href="#" id="restart" class="mark">8 SECONDS OF DUSK</a>
      <p class="chapter"><span id="chapterNo">I</span><b id="chapterName">DAY WITHOUT NIGHT</b></p>
      <button id="sound" type="button">SOUND OFF</button>
    </header>
    <section class="title" id="title">
      <p>AN INTERACTIVE MOTION FILM · 48 SECONDS</p>
      <h1>八秒だけ、<br><em>同じ世界にいた。</em></h1>
      <p class="synopsis">光でしか生きられないものと、<br>闇でしか生きられないもの。</p>
      <button id="begin" type="button"><span>BEGIN AT DAYBREAK</span><i>↗</i></button>
    </section>
    <section class="narrative" aria-live="polite"><p id="line"></p></section>
    <p class="gesture" id="gesture"><span></span> HOLD THE DUSK BETWEEN THEM</p>
    <button class="save" id="save" type="button">CAPTURE FRAME</button>
    <footer><p id="timecode">00:00</p><div class="timeline"><i id="timelineFill"></i></div><p>48 SEC / ONCE</p></footer>
  </main>
  <script type="module" src="./experience.js"></script>
</body>
</html>