Show the new launcher and menus on the website and in the README
The README banner is redrawn in the new design (docs/media/banner.html), and the launcher and menu screenshots (README and website) are the restyled ones. The website's launcher section gains a Launcher tab: its screenshots no longer show the old background, whose licence was never confirmed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Ludovic Marie
@@ -47,8 +47,8 @@ Horizon is downloaded only through **the Horizon launcher**: get it from [playho
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="50%"><img src="docs/media/launcher-play.webp" alt="The launcher's Play page: v2026.10.13.1 ready to play, its summary, Client and Server, the Play button and prepared resources"></td>
|
||||
<td width="50%"><img src="docs/media/launcher-patch-notes.webp" alt="The launcher's Patch notes page, showing the notes of Horizon 2026.10.13.1"></td>
|
||||
<td width="50%"><img src="docs/media/launcher-play.webp" alt="The launcher's Play page: v2026.10.14.1 ready to play, its summary, Client and Server, the version picker and Play, the resources and the Minecraft folder as a numbered list"></td>
|
||||
<td width="50%"><img src="docs/media/launcher-patch-notes.webp" alt="The launcher's Patch notes page, showing the notes of Horizon 2026.10.14.1"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
@@ -62,7 +62,7 @@ Captured in the Rust client itself, with vanilla assets and no mods or shaders.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td colspan="2"><img src="docs/media/menu-title.webp" alt="Horizon's title screen: a sidebar, the Horizon title, Singleplayer and Multiplayer buttons and the last world played, over a blurred frozen landscape"></td>
|
||||
<td colspan="2"><img src="docs/media/menu-title.webp" alt="Horizon's title screen: the mark and the pages on the left, the Horizon title, Singleplayer and Multiplayer, and the last world played, over a veiled snowy landscape"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%"><img src="docs/media/menu-worlds.webp" alt="The Singleplayer page: three worlds with their dates and game modes, and Create world and Play buttons"></td>
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<!doctype html>
|
||||
<!-- The README banner. From the repository root: npx -y playwright screenshot --viewport-size=1600,480 "file://$PWD/docs/media/banner.html" banner.png, then convert it to WebP (e.g. ffmpeg -i banner.png -c:v libwebp -quality 88 docs/media/banner.webp). -->
|
||||
<html><head><meta charset="utf-8"><style>
|
||||
@font-face { font-family: "Instrument Serif"; src: url("../../website/public/fonts/InstrumentSerif-Regular.woff2"); }
|
||||
@font-face { font-family: "Geist"; src: url("../../website/public/fonts/Geist-Regular.woff2"); }
|
||||
html, body { margin: 0; width: 1600px; height: 480px; overflow: hidden; background: #111113; }
|
||||
.card { position: absolute; inset: 0; overflow: hidden; background: #111113; color: #e8e8ea; font-family: "Geist"; }
|
||||
.bg { position: absolute; inset: 0; background:
|
||||
linear-gradient(90deg, #111113 0%, rgba(17,17,19,.92) 30%, rgba(17,17,19,.35) 62%, rgba(17,17,19,.15) 100%),
|
||||
linear-gradient(180deg, rgba(17,17,19,0) 55%, rgba(17,17,19,.85) 100%),
|
||||
linear-gradient(180deg, rgba(62,40,120,.30), rgba(62,40,120,0) 60%), radial-gradient(ellipse 60% 90% at 18% 110%, rgba(124,92,214,.42), rgba(124,92,214,0) 70%),
|
||||
url("../../website/public/media/hero.webp") 60% 38% / 1600px auto no-repeat; }
|
||||
.glow { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(139,108,232,0), #8b6ce8 25%, rgba(139,108,232,0) 70%); }
|
||||
main { position: absolute; left: 88px; top: 86px; }
|
||||
.eyebrow { margin: 0 0 6px; font-size: 24px; color: rgba(232,232,234,.62); letter-spacing: .01em; }
|
||||
.eyebrow b { color: #a993f5; font-weight: 400; }
|
||||
h1 { margin: 0; font: 400 188px/0.95 "Instrument Serif"; letter-spacing: -0.035em; color: #f5f5f6; }
|
||||
.line { margin: 22px 0 0; font-size: 28px; line-height: 1.4; color: rgba(232,232,234,.86); max-width: 720px; }
|
||||
</style></head><body><div class="card"><div class="bg"></div><div class="glow"></div>
|
||||
<main><p class="eyebrow">Minecraft: Java Edition 26.3 <b>·</b> rewritten in Rust</p><h1>Horizon</h1>
|
||||
<p class="line">Checked against vanilla by 281 differential harnesses.</p></main></div></body></html>
|
||||
<!-- README banner (docs/media/banner.webp), 1600x480, in the design of docs/design-system.md.
|
||||
Rendered with Playwright from website/ (see docs/media/brand/README.md). -->
|
||||
<meta charset="utf-8"><style>
|
||||
@font-face{font-family:Geist;src:url(../../website/public/fonts/Geist-Regular.woff2);font-weight:400}
|
||||
@font-face{font-family:Geist;src:url(../../website/public/fonts/Geist-Medium.woff2);font-weight:500}
|
||||
@font-face{font-family:"Geist Mono";src:url(../../website/public/fonts/GeistMono-Regular.woff2)}
|
||||
html,body{margin:0;width:1600px;height:480px;overflow:hidden;background:#0d0e13;color:#ecedf3;font-family:Geist}
|
||||
main{position:relative;height:100%;padding:56px 72px;box-sizing:border-box}
|
||||
.top{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:500}
|
||||
.top img{width:30px}
|
||||
.top span{margin-left:auto;font:15px "Geist Mono";color:#8b8f9c;letter-spacing:.04em}
|
||||
h1{margin:56px 0 0;font-weight:500;font-size:64px;line-height:1.05;letter-spacing:-.025em}
|
||||
p{margin:20px 0 0;color:#8b8f9c;font-size:22px;line-height:1.5;max-width:52ch}
|
||||
.word{position:absolute;right:56px;bottom:-70px;font-weight:500;font-size:330px;letter-spacing:-.04em;line-height:.8;color:#181a22}
|
||||
</style><main>
|
||||
<div class="word" aria-hidden="true">horizon</div>
|
||||
<div class="top"><img src="brand/icon.svg" alt="">Horizon<span>MINECRAFT: JAVA EDITION 26.3 · RUST</span></div>
|
||||
<h1>The game you know, rebuilt in Rust.</h1>
|
||||
<p>The 26.3 client and its game logic, checked against vanilla by 281 differential harnesses.</p>
|
||||
</main>
|
||||
|
||||
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 325 KiB After Width: | Height: | Size: 222 KiB |
|
Before Width: | Height: | Size: 474 KiB After Width: | Height: | Size: 198 KiB |
|
Before Width: | Height: | Size: 377 KiB After Width: | Height: | Size: 381 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 350 KiB After Width: | Height: | Size: 185 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 988 KiB After Width: | Height: | Size: 222 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 32 KiB |
@@ -52,6 +52,7 @@ and 800 pixels wide by `scripts/assets.mjs`.
|
||||
| `menu-worlds*.webp` | `docs/media/menu-worlds.png` | Horizon's own world list |
|
||||
| `menu-options*.webp` | `docs/media/menu-options.png` | Horizon's own options screen |
|
||||
| `menu-pause*.webp` | `docs/media/menu-pause.png` | Horizon's own pause screen |
|
||||
| `launcher*.webp` | `docs/media/launcher-play.png` | The Horizon launcher's Play page (no background image) |
|
||||
| `settings*.webp` | `docs/media/settings-simple.png` | Horizon's own Video settings, Simple view |
|
||||
| `hero*.webp`, `sunset*.webp`, `village*.webp`, `survival*.webp`, `nether*.webp`, `night*.webp`, `underwater*.webp` | `docs/media/*.jpg` | In-game views; none shows a Mojang logo or splash text |
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 9.5 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 22 KiB |
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 30 KiB |
@@ -31,6 +31,7 @@ export const images = [
|
||||
["docs/media/menu-options.png", "menu-options"],
|
||||
["docs/media/menu-pause.png", "menu-pause"],
|
||||
["docs/media/settings-simple.png", "settings"],
|
||||
["docs/media/launcher-play.png", "launcher"],
|
||||
];
|
||||
|
||||
await mkdir(join(pub, "fonts"), { recursive: true });
|
||||
|
||||
@@ -175,18 +175,20 @@
|
||||
<div class="screens reveal-media">
|
||||
<div class="tabs" role="tablist" aria-label="Horizon's menus">
|
||||
<span class="tab-pill" aria-hidden="true"></span>
|
||||
<button type="button" role="tab" id="tab-title" aria-controls="screen-title" aria-selected="true">Title</button>
|
||||
<button type="button" role="tab" id="tab-launcher" aria-controls="screen-launcher" aria-selected="true">Launcher</button>
|
||||
<button type="button" role="tab" id="tab-title" aria-controls="screen-title" aria-selected="false" tabindex="-1">Title</button>
|
||||
<button type="button" role="tab" id="tab-worlds" aria-controls="screen-worlds" aria-selected="false" tabindex="-1">Worlds</button>
|
||||
<button type="button" role="tab" id="tab-settings" aria-controls="screen-settings" aria-selected="false" tabindex="-1">Settings</button>
|
||||
<button type="button" role="tab" id="tab-pause" aria-controls="screen-pause" aria-selected="false" tabindex="-1">Pause</button>
|
||||
</div>
|
||||
<div class="screen">
|
||||
<div class="screen-panel is-active" role="tabpanel" id="screen-title" aria-labelledby="tab-title"><img loading="lazy" decoding="async" src="/media/menu-title-800.webp" srcset="/media/menu-title-800.webp 800w, /media/menu-title.webp 1600w" sizes="(min-width: 1000px) 720px, 92vw" width="1600" height="1000" alt="Horizon's title screen: a sidebar, the Horizon title, Singleplayer and Multiplayer buttons and the last world played, over a blurred frozen landscape"></div>
|
||||
<div class="screen-panel" role="tabpanel" id="screen-worlds" aria-labelledby="tab-worlds"><img loading="lazy" decoding="async" src="/media/menu-worlds-800.webp" srcset="/media/menu-worlds-800.webp 800w, /media/menu-worlds.webp 1600w" sizes="(min-width: 1000px) 720px, 92vw" width="1600" height="1000" alt="The Singleplayer page: three worlds with their dates and game modes, and Create world and Play buttons"></div>
|
||||
<div class="screen-panel" role="tabpanel" id="screen-settings" aria-labelledby="tab-settings"><img loading="lazy" decoding="async" src="/media/settings-800.webp" srcset="/media/settings-800.webp 800w, /media/settings.webp 1600w" sizes="(min-width: 1000px) 720px, 92vw" width="1600" height="1000" alt="The Video settings in their Simple view: a preset, render distance, field of view, framerate, VSync and GUI scale, each with what it costs"></div>
|
||||
<div class="screen-panel" role="tabpanel" id="screen-pause" aria-labelledby="tab-pause"><img loading="lazy" decoding="async" src="/media/menu-pause-800.webp" srcset="/media/menu-pause-800.webp 800w, /media/menu-pause.webp 1600w" sizes="(min-width: 1000px) 720px, 92vw" width="1600" height="1000" alt="The pause screen of the world Glacier Pass, with Back to game, Open to LAN and Save and quit"></div>
|
||||
<div class="screen-panel is-active" role="tabpanel" id="screen-launcher" aria-labelledby="tab-launcher"><img loading="lazy" decoding="async" src="/media/launcher-800.webp" srcset="/media/launcher-800.webp 800w, /media/launcher.webp 1280w" sizes="(min-width: 1000px) 720px, 92vw" width="1280" height="800" alt="The launcher's Play page: the version, Client and Server, the version picker and Play, the prepared resources and the Minecraft folder as a numbered list"></div>
|
||||
<div class="screen-panel" role="tabpanel" id="screen-title" aria-labelledby="tab-title"><img loading="lazy" decoding="async" src="/media/menu-title-800.webp" srcset="/media/menu-title-800.webp 800w, /media/menu-title.webp 1280w" sizes="(min-width: 1000px) 720px, 92vw" width="1280" height="800" alt="Horizon's title screen: the mark and the pages on the left, the Horizon title, Singleplayer and Multiplayer, the last world played, over a veiled snowy landscape"></div>
|
||||
<div class="screen-panel" role="tabpanel" id="screen-worlds" aria-labelledby="tab-worlds"><img loading="lazy" decoding="async" src="/media/menu-worlds-800.webp" srcset="/media/menu-worlds-800.webp 800w, /media/menu-worlds.webp 1280w" sizes="(min-width: 1000px) 720px, 92vw" width="1280" height="800" alt="The Singleplayer page: the worlds as a numbered list with their dates and game modes, and Create world and Play"></div>
|
||||
<div class="screen-panel" role="tabpanel" id="screen-settings" aria-labelledby="tab-settings"><img loading="lazy" decoding="async" src="/media/settings-800.webp" srcset="/media/settings-800.webp 800w, /media/settings.webp 1280w" sizes="(min-width: 1000px) 720px, 92vw" width="1280" height="800" alt="The Video settings in their Simple view: a preset, render distance, field of view, framerate, VSync and GUI scale, each with what it costs"></div>
|
||||
<div class="screen-panel" role="tabpanel" id="screen-pause" aria-labelledby="tab-pause"><img loading="lazy" decoding="async" src="/media/menu-pause-800.webp" srcset="/media/menu-pause-800.webp 800w, /media/menu-pause.webp 1280w" sizes="(min-width: 1000px) 720px, 92vw" width="1280" height="800" alt="The pause screen of a world, with Back to game, Open to LAN and Save and quit"></div>
|
||||
</div>
|
||||
<p class="screen-caption">Horizon's own menus, in the game. The launcher opens them, or vanilla's.</p>
|
||||
<p class="screen-caption">The launcher, and Horizon's own menus in the game. The launcher opens them, or vanilla's.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||