infiniracer/index.html at main · BadIdeaFactory/infiniracer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
  <title>INFINI RACER ✦ HOME</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Major+Mono+Display&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="home.css" />
</head>
<body>
  <canvas id="psych"></canvas>

  <main>
    <header class="hero">
      <div class="glyphs">▲ ◆ ▼ ✦ ◇ ◆ ▼ ▲ ✦ ◆ ▼ ▲ ◆ ✦</div>
      <h1 class="title" aria-label="Infini Racer">
        <span class="word"><span style="--i:0">I</span><span style="--i:1">N</span><span style="--i:2">F</span><span style="--i:3">I</span><span style="--i:4">N</span><span style="--i:5">I</span></span>
        <span class="word"><span style="--i:6">R</span><span style="--i:7">A</span><span style="--i:8">C</span><span style="--i:9">E</span><span style="--i:10">R</span></span>
      </h1>
      <p class="subtitle">⚡ VECTOR · 1979 · INFINITE ⚡</p>
    </header>

    <a class="cta-latest" href="latest/">
      <span class="l-tag">▶ NOW PLAYING</span>
      <span class="l-name">LATEST</span>
      <span class="l-sub">live working copy ✦ always the bleeding edge</span>
    </a>

    <a class="all-versions-link" href="versions.html">▶ ALL PREVIOUS VERSIONS</a>

    <section class="versions">

      <!-- v026 (current) -->
      <article class="ver acc-1">
        <div class="ver-header">
          <div>
            <div class="ver-no">V026</div>
            <div class="ver-tag">★ shield: obvious aura + low-time flash ★</div>
          </div>
          <a class="ver-play" href="v026/">▶ PLAY V026</a>
        </div>
        <div class="step">
          <h3>PROMPT</h3>
          <blockquote>I'm getting feedback that it's not obvious enough when you have the power up. Can you make it more obvious?

(follow-up) it doesn't give any indication that it's running out, make it flash as an indication</blockquote>
          <h3>CHANGES</h3>
          <ul>
            <li><strong>Active-shield aura.</strong> While <code>car.boostT &gt; 0</code>, two counter-spinning magenta (<code>#ff5cff</code>) hex rings wrap the car (radius ~30 vs body ~22), breathing on a sine pulse and run through the glow + phosphor passes — the powered-up state now reads at a glance instead of relying on the subtle 6 Hz body-colour blink alone</li>
            <li><strong>Running-out warning.</strong> In the final <strong>2.0 s</strong> the rings strobe on/off, the blink accelerating from <strong>~3.5 Hz to ~9 Hz</strong> as the timer drains to zero — the quickening flash reads as "about to drop"</li>
            <li>Each strobe "on" beat pops <strong>white-hot, thicker, and slightly larger</strong> than the steady ring (and the vertex sparks brighten to white) so it reads as a deliberate alarm, not flicker</li>
            <li>Canvas-only — the top HUD was left untouched to keep it uncluttered</li>
          </ul>
        </div>
      </article>

    </section>

    <footer>
      <div>★ INFINI RACER ★ vector-tube racing in the spirit of 1979 ★</div>
      <div>made with HTML &middot; CSS &middot; JS &middot; nothing else</div>
      <div class="neon">▲ ◆ ▼ ✦ ◇ ◆ ▼ ▲ ✦ ◆ ▼ ▲</div>
    </footer>
  </main>

  <script src="home.js" defer></script>
</body>
</html>