File size: 24,230 Bytes
b985a12
 
 
 
 
 
eada153
b985a12
 
 
eada153
b985a12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b1787b9
b985a12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
eada153
b985a12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
eada153
b985a12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
585bfe0
60f1548
1dbfbfb
60f1548
 
 
 
 
 
4530d29
60f1548
 
a2b07e0
60f1548
 
b06bcb0
ecb7e47
 
1dbfbfb
60f1548
 
 
 
 
 
0db758f
 
 
1dbfbfb
0db758f
 
60f1548
0db758f
 
 
 
 
 
 
 
 
 
60f1548
 
a2b07e0
60f1548
 
413ff82
60f1548
b06bcb0
60f1548
a2b07e0
60f1548
0e305b7
bcd08ac
60f1548
 
b06bcb0
1dbfbfb
 
64cf76e
585bfe0
 
1dbfbfb
60f1548
1dbfbfb
ecb7e47
 
60f1548
1dbfbfb
ecb7e47
 
a2b07e0
64cf76e
60f1548
 
b985a12
 
60f1548
b985a12
a03aa77
b985a12
b06bcb0
eada153
b06bcb0
 
 
 
 
 
 
 
 
b985a12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a03aa77
b985a12
 
 
 
 
 
 
 
 
 
eada153
 
b985a12
 
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>VOID</title>
  <meta name="description" content="VOID: the Hydra LTE242, an black-and-red hypercar concept that drives a loop and then flies. Watch the film, play the game, build your own. Made by Legion.">
  <meta name="theme-color" content="#10131b">
  <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=Unbounded:wght@500;800;900&family=Inter:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/static/style.css?v=1793449451">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E%3Crect width=%2764%27 height=%2764%27 rx=%2714%27 fill=%27%23050506%27/%3E%3Ccircle cx=%2732%27 cy=%2732%27 r=%2716%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%275%27/%3E%3C/svg%3E">
  <script type="importmap">

    { "imports": {

      "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",

      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"

    } }

  </script>
</head>
<body data-mode="home">
<div id="loader" aria-hidden="true">
  <div class="ld-word"><span>V</span><span>O</span><span>I</span><span>D</span></div>
  <div class="ld-bar"><i id="ldbar"></i></div>
  <div class="ld-pct"><b id="ldpct">0</b>%</div>
</div>

<canvas id="gl" aria-label="The VOID car in 3D"></canvas>
<div id="fade" aria-hidden="true"></div>

<nav id="nav">
  <button class="logo" data-go="home" aria-label="VOID home">VOID</button>
  <span class="credit"><img src="data:image/png;base64,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" alt="" width="14" height="14" style="width:14px;height:14px;border-radius:3px;vertical-align:-3px;margin-right:5px">Made by Legion</span>
  <div class="right">
    <button id="snd" class="pill" aria-pressed="false" title="Music and engine sound">Sound off</button>
    <button id="exit" class="pill" title="Back home (Esc)">&#10005;</button>
  </div>
</nav>

<main id="page">
  <section id="home">
    <div class="home-copy">
      <div class="kicker">Hydra LTE242 &middot; black-and-red hypercar concept</div>
      <h1 class="mega">VOID</h1>
      <p class="lede">It takes the loop. Then it flies.</p>
    </div>
    <div class="choices">
      <button class="choice main" data-go="watch"><b>&#9654;&ensp;Watch</b><span>The 44-second film, with music</span></button>
      <button class="choice" data-go="play"><b>Play</b><span>Free roam in New Legion: skyscrapers, traffic, stunts</span></button>
      <button class="choice" data-go="build"><b>Build</b><span>Paint it your way</span></button>
    </div>
    <a class="more" href="#specs">Specs</a>
  </section>

  <section id="specs">
    <div class="specs-wrap">
      <div class="sec-label">The numbers</div>
      <h2 class="specs-title">Nothing extra.<br>Nothing missing.</h2>
      <div class="specs">
        <div><b>790</b><span>horsepower</span></div>
        <div><b>2.6<small>s</small></b><span>0&ndash;100 km/h</span></div>
        <div><b>335</b><span>km/h top speed</span></div>
        <div><b>1,240<small>kg</small></b><span>dry weight</span></div>
        <div><b>4</b><span>lift thrusters</span></div>
        <div><b>5<small>km</small></b><span>landing scan</span></div>
        <div><b>130<small>m</small></b><span>glide height</span></div>
        <div><b>9<small>m</small></b><span>loop radius</span></div>
      </div>
    </div>
    <footer>
      <div class="foot-logo">VOID</div>
      <p><b>Made by Legion.</b> The Hydra LTE242 is the creator&rsquo;s dream car, if it existed. It&rsquo;s a concept, not a real car for sale. Its shape is inspired by the McLaren 765LT, and this site isn&rsquo;t made by or linked to McLaren. The music is original and made in code. The city is New Legion, a New York-style city made entirely in code (<span id="osmCredit"></span>).</p>
    </footer>
  </section>
</main>

<!-- Watch -->
<div id="watchUI" class="mode">
  <div class="cap" id="wCap"><div class="num" id="wNum"></div><h2 id="wTitle"></h2><p id="wSub"></p></div>
  <div class="telem" id="telem">
    <div><span>Speed</span><b id="tSpd">0</b><i>km/h</i></div>
    <div hidden><b id="tG"></b><b id="tAlt"></b></div>
  </div>
  <div class="dream" id="dream">
    <div class="d0">HYDRA LTE242</div>
    <div class="d1">This is the creator&rsquo;s dream car.</div>
    <div class="d2">If it existed.</div>
    <div class="d3">&mdash; Awsaa</div>
  </div>
  <div class="end" id="wEnd">
    <h2>That&rsquo;s the Hydra LTE242.</h2>
    <div class="end-btns"><button class="pill solid" id="wAgain">&#8634; Watch again</button><button class="pill" data-go="play">Play it</button><button class="pill" data-go="build">Build yours</button></div>
  </div>
  <div class="player">
    <button id="wPlay" class="pbtn" aria-label="Pause">&#10074;&#10074;</button>
    <div class="scrub"><input id="wScrub" type="range" min="0" max="48" step="0.01" value="0" aria-label="Film position"><div class="ticks" id="wTicks"></div></div>
    <span class="wtime" id="wTime">0:00</span>
  </div>
</div>

<!-- Play -->
<div id="playUI" class="mode">
  <div class="fps-hud" id="gFpsHud">– fps</div>
  <div class="hud-tl">
    <div class="g-score"><span>Cash this run</span><b id="gScore">$0</b><em id="gCombo"></em></div>
    <div class="g-bars"><div class="bar hp" id="gHp"><i></i><span>Health</span></div><div class="bar nos" id="gNos"><i></i><span>Nitro</span></div><div class="bar fuel" id="gFuel"><i></i><span>Fuel</span></div></div>
    <div class="g-stars" id="gStars"></div>
  </div>
  <div class="hud-tr">
    <canvas class="g-map" id="gMap" width="180" height="180" aria-label="Minimap (tap for GPS)"></canvas>
    <div class="g-btns"><button class="pill solid" id="gFly">Fly</button><button class="pill" id="gMenuBtn" aria-haspopup="dialog">☰ Menu</button></div>
    <div class="chips" id="gChips"></div><div class="chips"><span id="gCoins">🪙 0/40</span><span id="gCash">$0</span></div>
    <div class="g-players" id="gPlayers"></div>
  </div>
  <div class="g-trophy" id="gTrophy" aria-live="polite"></div>
  <div class="hud-top">
    <div class="g-race" id="gRace" hidden></div>
    <div class="g-job" id="gJob" hidden></div>
    <div class="g-job g-con" id="gCon" hidden></div>
    <div class="g-build" id="gBuild" hidden></div>
    <div class="g-tut" id="gTut" hidden></div>
    <div class="g-gps" id="gGps"></div>
    <div class="g-hint" id="gHint"></div>
    <div class="g-target"><i id="gArrow">&#11014;</i><span id="gTgt"></span></div>
  </div>
  <div class="hud-gauge"><canvas id="gGauge" width="300" height="300" aria-hidden="true"></canvas>
    <div class="g-stats" hidden><b id="gSpd">0</b><b id="gAlt">0</b><em id="gVs">0</em><b id="gG"></b><b id="gMode"></b></div></div>
  <div class="g-count" id="gCount" hidden></div>
  <div class="g-card g-raceres" id="gRaceRes" hidden></div>
  <button class="pill solid g-racego" id="gRaceGo" hidden>Start race</button>
  <button class="g-footbtn" id="gFootBtn" aria-label="Get out or get in">🚶</button>
  <div class="g-card g-panel" id="gGpsPanel" hidden></div>
  <div class="g-feed" id="gFeed"></div>
  <div class="g-lookhint">Click the game to look around with the mouse · Esc opens the menu</div>
  <div class="g-card g-panel" id="gNetPanel" hidden>
    <h3>Play online</h3>
    <p class="small">Drive with real people. Your car, name and position are shared with the players in your room. Voice chat is off until you turn your mic on.</p>
    <label>Your name <input id="gNetName" maxlength="14" placeholder="Driver"></label>
    <div class="row"><button class="pill solid" id="gNetPublic">Join the public city</button><button class="pill" id="gNetCreate">Create a private room</button></div>
    <div class="row"><input id="gNetCode" maxlength="8" placeholder="Room code"><button class="pill" id="gNetJoin">Join room</button></div>
    <div class="row"><button class="pill" id="gMic">🎙 Voice chat</button><button class="pill" id="gNetLeave">Leave</button><button class="pill" id="gNetClose">Close</button></div>
    <div class="emotes" id="gEmotes"></div>
    <p class="small" id="gNetStatus">Offline</p>
  </div>
  <div class="g-menu" id="gMenu" hidden role="dialog" aria-label="Menu">
    <div class="menu-head"><h2>Menu</h2><button class="pill solid" id="gMenuClose">Resume</button></div>
    <div class="stats-row" id="gStatsRow"></div>
    <div class="menu-grid">
      <section><h4>Vehicle</h4><div class="tiles">
        <button class="tile" data-veh="car"><b>🚗</b>Car</button><button class="tile" data-veh="plane"><b>✈️</b>Plane</button><button class="tile" data-veh="heli"><b>🚁</b>Helicopter</button><button class="tile" data-veh="boat"><b>🚤</b>Speedboat</button><button class="tile" data-veh="boat:jetski"><b>🌊</b>Jet ski</button><button class="tile" data-veh="boat:yacht"><b>🛥️</b>Yacht</button><button class="tile" data-veh="boat:tug"><b>⛴️</b>Tugboat</button><button class="tile" data-veh="boat:hover"><b>🛸</b>Hovercraft</button><button class="tile" data-veh="board"><b>🛹</b>Hoverboard</button><button class="tile" id="gGarage"><b>🔧</b>Garage</button><button class="tile" id="gDealer"><b>🏪</b>VOID Motors</button></div></section>
      <section><h4>Go somewhere</h4><div class="tiles">
        <button class="tile" id="gGpsBtn"><b>🧭</b>GPS</button><button class="tile" id="gAuto"><b>🤖</b>Autopilot</button><button class="tile" id="gFuelNav"><b>⛽</b>Nearest fuel</button><button class="tile" id="gTaxi"><b>🚕</b>Taxi job</button><button class="tile" id="gNetBtn"><b>🌐</b>Online</button></div></section>
      <section><h4>World</h4><div class="tiles">
        <button class="tile" id="gTime"><b>🌗</b>Time of day</button><button class="tile" id="gView"><b>🎥</b>Front seat</button><button class="tile" id="gPhoto"><b>📷</b>Photo mode</button><button class="tile" id="gHorn"><b>📯</b>Horn</button><button class="tile" id="gWeather"><b>☀️</b>Weather</button><button class="tile" id="gRadio"><b>🎵</b>Radio</button></div></section>
      <section><h4>Settings</h4>
        <label class="set">Graphics<span class="seg" data-set="q"><button data-v="lite">Lite</button><button data-v="low">Low</button><button data-v="medium">Medium</button><button data-v="high">High</button><button data-v="ultra">Ultra</button></span></label>
        <p class="small gpu" id="gGpu"></p>
        <label class="set">Look speed<input type="range" id="gSens" min="0.4" max="2.5" step="0.1"></label>
        <label class="set">Auto gas<span class="seg" data-set="autogas"><button data-v="off">Off</button><button data-v="on">On</button></span></label>
        <label class="set">Living city (day/night + weather change)<span class="seg" data-set="cycle"><button data-v="off">Off</button><button data-v="on">On</button></span></label>
        <label class="set">Handling<span class="seg" data-set="handling"><button data-v="arcade">Arcade</button><button data-v="realistic">Realistic</button></span></label>
        <label class="set">Screen shake and speed blur<span class="seg" data-set="motion"><button data-v="on">On</button><button data-v="off">Off</button></span></label>
        <label class="set">Hoverboard<span class="seg" data-set="board"><button data-v="ion">Ion</button><button data-v="blaze">Blaze</button><button data-v="toxic">Toxic</button><button data-v="violet">Violet</button><button data-v="gold">Gold</button><button data-v="ghost">Ghost</button></span></label>
        <label class="set">Traffic &amp; crowds<span class="seg" data-set="crowd"><button data-v="few">Few</button><button data-v="normal">Normal</button><button data-v="busy">Busy</button></span></label>
        <label class="set">Show FPS<span class="seg" data-set="fps"><button data-v="off">Off</button><button data-v="on">On</button></span></label>
        <label class="set">Text size<span class="seg" data-set="text"><button data-v="normal">Normal</button><button data-v="large">Large</button></span></label>
        <label class="set">Touch steering<span class="seg" data-set="steer"><button data-v="stick">Joystick</button><button data-v="buttons">Buttons</button></span></label>
        <div class="set save-row">Secret code<span><input id="gCode" maxlength="16" placeholder="type a code" autocomplete="off"><button class="pill" id="gCodeGo">Enter</button></span></div>
        <div class="set save-row">Your progress<span><button class="pill" id="gSaveOut">Back up</button><button class="pill" id="gSaveIn">Restore</button></span></div>
        <p class="small">Progress lives in this browser. Back up copies a code you can paste on another device or browser.</p>
      </section>
      <section class="wide"><h4>Today's challenges</h4><div class="goals" id="gDaily"></div></section>
      <section class="wide"><h4>Contracts</h4><div class="tiles con-tiles" id="gContracts"></div></section>
      <section class="wide"><h4>Routes and ghosts</h4><div class="routes" id="gRoutes"></div></section>
      <section class="wide"><h4>Challenges</h4><div class="goals" id="gGoals"></div></section>
      <section class="wide"><h4>Controls</h4><p class="small"><b>Drive:</b> W A S D or arrows · Space handbrake/drift · on a jump: A/D spin, X (Drift) backflip · Shift nitro · F fly · L land · C camera · R reset · H horn · T time · M GPS · O autopilot · Enter starts a race at a 🏁 marker · B drops a gate in the route builder · Y hoverboard: hold Space and let go to ollie, Space again in the air to double jump; in the air A/D spin, X kickflip, Q heelflip, Shift grab; land on a rail to grind (stunt park, boardwalk, mountain foot). <b>Mountains:</b> take the highway over the bridge and through Brooklyn; trucks from VOID Motors handle the rough ground best. <b>On foot:</b> stop and press E to get out · WASD walk · Shift run · Space jump · E next to any car to drive it (taking traffic cars brings the police). VOID Motors in the park sells 50 cars. <b>Look:</b> click the game, then move the mouse. <b>Phone:</b> joystick on the left, pedals on the right, drag anywhere to look. <b>Fuel:</b> about 10 min driving, 5 min flying; stop at ⛽ to fill up and repair, or drive through a green 🔧.</p></section>
    </div>
    <div class="menu-foot"><button class="pill" id="gExit">Exit to home</button></div>
  </div>
  <div class="pads">
    <div class="stick" id="gStick"><i></i></div>
    <div class="pad-l"><button data-pad="left" aria-label="Left">&#9664;</button><button data-pad="right" aria-label="Right">&#9654;</button></div>
    <div class="pad-r"><button data-pad="nitro" class="nos">Nitro</button><button data-pad="drift" class="ground">Drift</button><button data-pad="brake">Brake</button><button data-pad="gas" class="big">Gas</button><button data-pad="down" class="air">Down</button><button data-pad="up" class="big air">Up</button></div>
  </div>
  <div class="g-card g-welcome" id="gReady">
    <h2>New Legion</h2>
    <p class="sub">Drive, fly, smash, race. Everything else is in the ☰ Menu.</p>
    <div class="tips">
      <div><b>🚗</b><span><kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> drive · <kbd>Space</kbd> drift · <kbd>Shift</kbd> nitro</span></div>
      <div><b>✈️</b><span><kbd>F</kbd> fly · <kbd>Space</kbd>/<kbd>Q</kbd> up/down · <kbd>L</kbd> land</span></div>
      <div><b>🚕</b><span><kbd>J</kbd> taxi jobs · <kbd>Enter</kbd> at a 🏁 to race</span></div>
      <div><b>🪙</b><span>40 hidden coins, 14 challenges, police, online</span></div>
    </div>
    <p class="small touch-only">On a phone: joystick left, pedals right, drag anywhere to look.</p>
    <button class="pill solid big-go" id="gGo">Start driving</button>
    <div class="small" id="gBest"></div>
  </div>
  <div class="g-card" id="gOver" hidden>
    <h2 id="gTitle"></h2>
    <p id="gMsg"></p>
    <div class="g-res" id="gStats"></div>
    <div class="small" id="gOverBest"></div>
    <div class="end-btns"><button class="pill solid" id="gRetry">&#8634; Try again</button><button class="pill" data-go="watch">Watch the film</button></div>
  </div>
</div>

<!-- Build -->
<div id="buildUI" class="mode">
  <div class="drag-hint">Drag to turn it</div>
  <aside class="cfg" id="cfg">
    <div class="cfg-head"><h2>Your garage</h2><button class="pill" id="rev">Start engine</button><button class="pill solid" id="gGarageClose">Drive</button></div>
    <div id="cfgBody"></div>
    <div class="cfg-foot">
      <div class="sum" id="sum"></div>
      <div class="cfg-btns"><button class="pill" id="reset">Black &amp; red</button><button class="pill solid" id="share">Copy my build</button></div>
    </div>
  </aside>
</div>

<div id="toast" role="status"></div>
<noscript><p style="position:fixed;inset:auto 0 0;padding:16px;background:#111;color:#fff;text-align:center">VOID needs JavaScript for the 3D car.</p></noscript>
<script src="/static/hub.js" data-app="void" data-credit="none" defer></script>
<script type="module" src="/static/main.js?v=1793449451"></script>
</body>
</html>