void / index.html
Death242's picture
Static site
b1787b9 verified
Raw History Blame Contribute Delete
24.2 kB
<!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,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAIAAADYYG7QAAATn0lEQVR42lVZeZRdZZGv+r7vrm/r11u6k06HrGQBAsgSWWTHGGRE4IiAyJJRBNGRyTjujHpAERVwRAUFJCigBiJmdFgmQASyQWKAQBLI0kmn05309vptd/uWmj/ue0l85/Tp0+f1/W7dqrr1WwpbOqZ0TpoiLIvIIDBkCAgAiAgAkP4BgACEgIAIQND4oBAiDEPHsQERCBCRiNKLEZEQGCIBICBjzBBh8zsCQARsXmUAGOcyjvo+2MbgyAcBgYCAAIjIEFAaypHviYiIABAAGWdjY+Mfvejc2bNmxFGCiESN5yAiAwRp7ET/dIc0aCIyRATAGCFDYzAK0/9MAyIgwvTm1DyBkCg9DuFwEGnegDjnoyOjp5960s033aC1ASL8p+QBAoIxgCwN0RiDh/ONDBgHZCaOTG3CRBPScvSchei4ZEgcPoIgTSQcqRIAASEAsDQ5QNjIwcjw8JlnnPa1Zf8WhGEURUcSiZCWxMQxy2agHoDrpmEi4wSE2oCMSCtyHNU2SfXMjVoXwLyTuyeVwjuWIWeNgAgbt26efHSl0iiRGg+KtWr5pBOPv+4z13iua4zhnBMQMAYMgQDIyCSh629yFn0o//LL5aefAdsBmRiVAEeTb1HHHC97F8pJ83WhN4k9YHryJzrhgWd0PQLGRSM3zWQTAWMs7SMARMYAgJoNYpQK49i2+CVLltRqdUD0PI8LDgyoXoVYatcxSgW9M9qOmbb38k/NWbnSen1tOFGh3mNk9wyaeZLumif9LhULimJTrlt2pXhpF48mwjVrIePDiBZpYfBwOMiIDDRTQsiQCKQkLmS9ajw/PDQEnhNFcRwnnDPLFgikQMhbboW4gm/+I9n0RvntzT58fvLP7w379tT7++X8c+Dia9S0E0igKQVYrjBDOiK7gMULuqDLoz++RMPDkM8DNXuoUeb0vUZGCGg0qoTC2LgZ3jE52b8Xz7mwcNUV7quvlR/+hSFjyHDOkfE4jipjJT37PHtuO1+/wZTGrekzYiFqv19pv7utPDoR73vKWr1CTJ3L5yyyTvsY9sxKJqJMDlou7NAZISLQL69Gy0pfCtHsXiIgQA4AqGJQkbJc1XEMTV1ojjvPbbOqd1zb9fHLDn7/u5kvfzUzfwHFIUCLbduC87BeC2t1+7Ft2PcYDG9Wk6dM/vZ39v360cUHn/7qT055eWPX5vfC9e9Uxra/IvduEqddqCUWWyB3bnviccNQ7Nsfb33XyuSMjBFANLKDiICgQg2gC726+yTddbIuTsfWFuotcNMXlccO/m5574/uHlu7SfbtdbJZhuA6NheW1kQUwYbvYKfL7ry/ZWon9O1Z8NZLD9+8wClNLPyoWe+wtRsid8bxzrJHarmZ3Wy8eFZ72bdZLHmOmTWvQK3OOrMgoTmHiMgYlURxbm40/9bg2GVx52WmcxY7sc26uMs9NcuwaucLpWd+VxmrVR//janXGOcIYNm2bVuci1whL0q75YfOlBtfPXjbbazYVpHyJ6tGcUf04hPhJ380VPbb3P/8bVScPcuvdJzROuK4IMkIYQVar1kDjmO0TvtYpC+RIVMtl/CYc7k/D2f6/oWznNl+cnA8WP1M/Pwq3LyOqcRpKZqwBhbXQECIyCwhLEu4nud6fjI+CoK5V3wKzzoveH3NtkPy9o+zteRc/3QJps/O3f5g2Z823ysVTyzuybhWKdCCeEcGNr8nd7xv5/JkdAo7AgC0VlqaREq7HMCptrv0eLluffm+J9X6V3F0kCN6l14mlIqee86ynRSAuLC44EJwIQS3LTlRynzmBnHhxYNf+kLOd/du2f6tj+Vm56zLHyph7wx/2a/Lbvdsv+LOzm0Xrts3NPbD77Xfc4+wQf3fixAnUGBA6aBJA5JSyVhrQ+CyfItVKo9/4VoqjXptnbytw7R0+L95hIcS589MZAKAjDHfcx3bZowRYlitJvlC9403H/zi0kL/rqpVWLLAPbETPvHoOE6b43/loZrTNa9QF93ZbTrr9R8aufFySiTP5+2JKFy/XuSyZHQTxUEAgNFaS6m1BilJaRarXFe34YJ1dLIkLu/dze+6l6vIRImw7PRK33c910nhRIZhhKhGht1KWXZMm5uJz5+V3P63cZoy0735gSq1Tc/VedHdGWb9eDRcdh3t2o7zT9EM9IZNNDDA29qM1oRwpGRExqSIapQKk6QqeZyw404Sty7LyRDv+mb54f92HAcZIwJEYJxlM77r2MYY0IbIaJkoRLC9PMQndepfvF6XPcd5N9wbQdukljCynf4RxzMH5V1LxYEhmHe1ot1GQ/LCC5hiPh3BKtYgCEQAQMZQPdZVE5VG8ZzF6n+ePvTW2+KCxWJSL+udZZJIa0NEDFnG93PZjNFaSklESAjEjFZtLr24rVZun2tdfX+k2jq7CbgYGrTFyKC847O4a6suzmT5OSJbEP3DZtOb6PukFTRw9EhADexAY6CuoaKVnxl79Gf2kiv8k08tPbuCT+oWuTwYA4TGkDbadd2Mn5FKKaUZMgJSgRSc7zlYKRdmiCV3xlW32KWNhLH9llcdoXs/hwN7nEI2qo4jJCLbAmvfYOUJ5jgNekRAxhzmQyl8GCANtdhUtFVoM7vfrb6xkV5dTbu32Wedax+3AJMEgKU0jXMhLCsM4yROhCUYWqYikupYUpzGPvJtNQGZyVpVo/EPjF0fZo9+Merb+73rO4+fKquh4haAlPLvL3AhMB3IaTR0eDAiAjIiMjqCWoghMdsRzEJAZByQ6UoFogQFZ4lhgGRIaw1EQRCGYYScWVzIF56I8zPhtG+ZKrd6HT0eBNtDK9iPT95W37XzhzcVl36aj9eN7XgsU+TjB2DXFrAcMBqxwWvTKomU+yAgkCYVYRhSoJmbZYgoJRIZMjpKjFFAYEIFgJxzpWQiE2MMRLFBYdWGk/f34Alfpbol5hVorK4Pap6p0rPfLQ0M/OD6ws2LdbnflANtOS7L5ASSlc1RosEYYoBN2nx0yRBAgwkhik3EyS0YnTjTFjBJDJmu1XWiySgVS2CMCx7FcRBGURTXg0ArqcDG3muhRmJyBkZrenfIYJhe+nZl8MDdV+duO4tVn1WlA3q8poTtMcHZ5B578SUmCg0QGDJkqEnXxVGs0BhZRQVsohZ8sNVZepcxdv2FP3MvyyfNMAPvaWMkOFoqIqpUa5wxwbnWWmsdB7Ffi7Ab1OCwqXKrEMKb99RHR352ZebGE/jPf1ljiOfNKYxXVK69YMA4n7ycQ0RBgJ5ntAYi4HR0D6URkZZlzuxw1VfZOVdacxYFP/pXdagPP36LXZgSPf+UveRGmrlQVctS69JEpVKtxUmstAEwSkmwOY0coqGy4MP0j7uj0vDjV7Vd0+t+4eH6lzfUdkbJnsE4iMHy28TktpbLF+P+fkAGpikqTEOqiMPiC5nQ8mB920/FeRd6c8+JH7jRUpE+70Yx54zogVtVtsO79mtcSsYEEZUqNUtwAGCMgTHIuKlUiBe5N5xsfRTD8hOXtrSDPvOx6p5YZPJZZpuNfbHWCF6Lc2yXk7drffvQEoeFSsrHAIEBACJDBEt4Znw9nnwG71xQ/+XnhJLq+IvZGVeaJ7+pqiV2+Vd0phXimFkCGQvDqBZE9XpYqda01giGwGNeTfY9llGV+890N++eOH9FeQj87kLGElYsrC0D0vGz0NLJe/IqkPLAAFhWo3XIULORBQACSWa5nLvZU262ps6rPbksf/GdeutDOiiJlT+A0hCddhk7ZYkKK7p/0IzVmG9FcRzHUeRYUmqpEiLGrGE48NdOFl5xrPfE+8FLh8TU9jxHlFr7jhioqN1jcaZrOk6dKmZ0RLv2yoMHueOC1mmBqJEiEABakc1mXWd3zCGHBau+5vTcBO2L+NSN/I0/YrY1ynXhxV80zBbjo2rlBkKUMqpUqlnfzSiVKCWEbdnADq6wSfXk+J/3m1HTemyPo4kZownQc8zWCYiDqvuhRXxerzXZj3+/2QQB93wwJi0XY6hTzUMqVHavNnFt/X009JbSHmKHHOwXvWfZLe1xdcKcciUUp2MY0MqNGAPatla6HgRhHEVxEscxIBecmSQOEr3pYDQSoYemUo+q1Wq5UhmfmAijBBkny+ennWvNbGMC5MaN3LKACFJFjdSQPggCuZeMbXVaT/BnXBru+LMM91E0CKNF3bsQ8pMkb+UnX0VRhb32Bu3p55MnmQlgjEup6vXQsZxqrXbm2WefvujDnusiAmPcsoRj245jW5YFQLZtbd32/p+WP8ZPPhuPP86ZWlB7RtQ77zA/A2nrNEVgWjSRDt5o+8PczjBIkCUq2u/Up+t9O8KxMXbRHZDtwLffpLe22y2FZOxlFYxYmVwUx1GUGKPDMOrs6snnsrmMn8v6Gd/3fT/ju5mMn/F9z3Nzuexnl94S1oPiFTdgTwsVneDx58z4GGttM0o2piChAXOYD5HjZlwvB2C0sS2dxNUtXscZ8cafyM65zjFnwc5dtPEdu9BeLb82DdYGrl2NkyhOytXazOlTPddxHIczVFpFccwYApBUcblSNUZ3dnSsemT5X//wh9aL/sVbclGSKDlaM8+u4K5rtGoqQjziT6STWlgWY1xrZUwiLF+Gg/HIXxIz4Zx+DxwagFdf9myvHGyaqdc9+emOq/5SHR8ztuPUg2jdm2/ZlpVSfc91PM/L+J7ne57r2pYo5HLv79z9wH33ux2d+Tu+p32Le5b6/eO0eyfvnERaNwgQIpE5bEwJAEDOERgiIjLGheN60cga55y7mdOu1/7FMTARruuOXlt9ZUubY0IJQjCjpDZaSRNHseVYjm0RaSCjtYyiOHRsz3NIq6eeeiqcGCt+5Vumq7Wy84ATVNmK5TyfB62blgIaMAiIDYQFbOmYUmhpBUSjpFbKEKigpCedZV94v9662jo0WI7ebq+ufvOaaWsPxCt2xOvqfLxcF4KnnhNoRdUq+hnhusYYaDpoQliu6yaGh6GMbSGjOJNxC56dsSxuO01vBxBZWjTOhFJy6EC/OMrWYYwxLRMJtn3c58y+HdbIWE2+X6y+/PclHcv/MfSNdx3PEplowjVGBwoRudGs2F685ga5ZVP5vXctP5M6JYjcdUQ94TPaoafTCqrSscTAhBlLGFq2MfpwSljTszNkUpNDNF2GtJ5CBQf5zOuYdnH3hmr4Xlvw0vOXTHnw/fjnuX/vmfQs8cS54LOoEuScAHVQx7MvkmNDuTMuYPf/MDk0xB0HAGzBR2tqdr7+9DKnp9sBmT10kF36QMyMjWQMpT4YAYIxpkF/jDZkAIg1bRgCQBVVTG6u6L0M+96ulNfnx/93+enFH281Pw6WTuLdSS7Hvv+beseUoNgVtk+OOnuCYpcsdoZrXw01Wu0dHJFbtu/a4wGd0Jas/Hqmp9PRQ2xiED79y+qBCvcslmoMpCO2XZOcNQCtIYOIUGsl45jPvYmP12rj69rjDT8+tevOt8ZWj7V3duys7Hy65ae/rf/u/uRvK0hGzPIIKAkr+KdjW//jv8wrz+kd74lsjoEZGE/O75GPfjlXbBOqT0nDP7O8vHXY6W61lCEgaHq1KU1NeRliU5dxN5O3bRuAJfVh03GeXTi7tvuxNrnu9vntj/SFaw9FxXgg8SrZ7zwUPXUvba0Wb3nCz9Vp4oAodFgtbTyo6hdX8QP7nUJBGRqeCG+YG/96acbNePSBVgm/7o/lVw+IrtaM1EesqJRCH3buCAARjdFBvZZaemBkTbKi3bG4vuvRXLDmkmPaH9wd9pej7o9cgvMXmRkLomcfNGv77QU3VXcOZU74km/lw40rOXPd9i7OmcVYOZK2in52NrthcVuAlrs1qcRw3Yul1w+xKe0ZpQnwyBBsoEWDAiHDIxOSu5m8ZdlxMMG6r9ETW63S8ws7WteP69Eo8Tp77LOvqG9Z63VNqy+/U2U6OWVZeVySwBMuzc6cI0o7oVombh+qhfNE8PhZfPFHimXp5/bEfePmyudLm8dFd1tOUVPsAByeNw0rEVOfFJChMSao17ibbWEmoNxpyBwaXdWeKw4mmDDLBlMP49yi83lbuzqwT+9+S4UDcXWncKfygCVGqWPPdOd8mMsxM9x3UzH+1cls6oLiRJm17AvWDNHVr5QGErurmFOGmuZ2mg4kopQCNaqX4jyBMSYM6tz1fBQt6E7hlddcPx8BQ8YYGUVg6qXqB+9Sos36VYwBtzKkqlFlO2M5q8r0+P5k8uTawk98w+z4+tShcPYUGggz++r37Yq+9GbZ2H5rztdNU7lZLASAxmIh/Q2UriuIiNKAHC/LrZwl99uOzTjnjKXGOwFxy7Wjqhj6wPJ95ByBGLMRkrC0RckJOyzwwbFaa/7S7tHjeL/fHw8NBJ/fVv9Vf9zWUvBd2wA2AJOw8XMkMUe589ig+UQmDAIByG1WF7aLyJqLBWSMAwByZJ7HGCetEVMwVIAeMpFUtlSigbz8qPqrg9M+sNTI8jHrzoHwEFm97QViQgMhEQISAYBppIIO8x9srEEQG6q+OQwEInDLRcbAUHMPRMBQMIHI0lmBjKVSKQUYRMZ4u4prtcEnZX7n28pcXa0+U3fb87luzzGN9QQiHnG/GwslaLR2+tjUsDnwKLEK2NIxJZ8vMMbo6LVNUz02lwoNDm6M1lobrbVSxpDRysi6Ei44mY6Mxy27sZ85bHs36kF01GkNRg/Q6O7mJkxrNT428v/J+2Z6rV1J3AAAAABJRU5ErkJggg==" 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>