-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
89 lines (77 loc) · 4.39 KB
/
Copy pathindex.html
File metadata and controls
89 lines (77 loc) · 4.39 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cosmorph</title>
<meta name="description" content="A procedural cosmic background engine. Soothing, beautiful, deep-space scenes that gradually drift and evolve.">
<meta name="theme-color" content="#000000">
<meta property="og:type" content="website">
<meta property="og:url" content="https://cosmorph.app/">
<meta property="og:title" content="Cosmorph">
<meta property="og:description" content="A procedural cosmic background engine. Soothing, beautiful deep-space scenes that gradually drift and evolve.">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="/assets/favicon.ico" sizes="32x32">
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
<link rel="preload" href="/assets/fonts/Offside-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/Outfit-Variable.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/site/site.css">
</head>
<body>
<a class="skip-link" href="#about">Skip to content</a>
<header class="hero">
<canvas class="hero__sky" id="sky" aria-hidden="true"></canvas>
<div class="hero__veil is-dark" id="veil" aria-hidden="true"></div>
<div class="hero__body">
<h1 class="wordmark">Cosmorph</h1>
<p class="hero__line">A procedural cosmic background engine. Soothing, beautiful, deep-space scenes that gradually drift and evolve.</p>
<nav class="actions" aria-label="Primary">
<button class="btn" id="reroll" type="button">Reroll Cosmos</button>
<a class="btn" href="/firmament/">Open Firmament</a>
<a class="btn" href="https://github.com/XYAgainAgain/Cosmorph">
<svg class="btn__mark" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"/>
</svg>
GitHub
</a>
</nav>
</div>
<a class="hero__scroll" href="#about" aria-label="Scroll to details">
<svg viewBox="0 0 12 20" width="12" height="20" aria-hidden="true" focusable="false">
<path fill="none" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" d="M6 1v16m0 0 4.5-4.5M6 17l-4.5-4.5"/>
</svg>
</a>
</header>
<main id="about" class="about">
<div class="about__grid">
<section class="note">
<h2 class="note__title">Space Math</h2>
<p>One integer generates an entire sky. The same seed renders the same scene everywhere, so you can share your celestial creations with others and revel in the majesty of space together.</p>
</section>
<section class="note">
<h2 class="note__title">Slow & Steady</h2>
<p>Nebulae billow, expand, and contract naturally, shadows sweep across volumetric space dust, and stars glitter everywhere. The <b>cos</b>mos <b>morph</b> (that's the name, see?) slowly, but quick enough that you'll live to see the outcome.</p>
</section>
<section class="note">
<h2 class="note__title">Lovely on OLED</h2>
<p>Everything is smooth and vibrant, no matter how void-black or H-alpha pink your pixels are. Looks best on OLED panels, though, for sure. The larger the screen, the more starscape you'll see.</p>
</section>
</div>
</main>
<footer class="foot">
<p class="foot__status">In development. Windows, Linux, & Android planned. Might do macOS later.</p>
<p class="foot__by">Sprung fully-formed from <a href="https://tkb.band/">Sam Atwood</a>'s brow.</p>
</footer>
<script type="importmap">
{
"imports": {
"three": "/assets/vendor/three/three.webgpu.min.js",
"three/webgpu": "/assets/vendor/three/three.webgpu.min.js",
"three/tsl": "/assets/vendor/three/three.tsl.min.js"
}
}
</script>
<script src="/site/sky.js" type="module"></script>
</body>
</html>