-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
121 lines (105 loc) · 5.95 KB
/
Copy pathindex.html
File metadata and controls
121 lines (105 loc) · 5.95 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
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
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<title>AETHER — procedural VFX forge</title>
<meta name="description" content="A real-time VFX simulator where every effect is pure math. Fireballs, frost novas, embers — no textures, no models, no assets.">
<meta property="og:title" content="AETHER">
<meta property="og:description" content="Procedural game VFX, built from equations. Zero assets.">
<meta name="theme-color" content="#04050a">
<style>
:root{ --ink:#e9ecf5; --dim:#7d8496; --edge:rgba(255,255,255,.10); --glass:rgba(10,12,20,.42); }
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; background:#04050a; color:var(--ink); overflow:hidden;
font:400 13px/1.45 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
-webkit-font-smoothing:antialiased; overscroll-behavior:none; touch-action:none;
}
canvas{display:block; position:fixed; inset:0}
#ui{position:fixed; inset:0; pointer-events:none; z-index:10; transition:opacity .5s ease;
padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#ui.hidden{opacity:0}
#ui *{pointer-events:auto}
.brand{position:absolute; top:22px; left:24px; user-select:none}
.brand h1{margin:0; font-size:24px; letter-spacing:.40em; font-weight:600; text-indent:.40em;
background:linear-gradient(92deg,#fff 0%,#ffc98a 45%,#ff8f5a 75%,#9ad4ff 100%);
-webkit-background-clip:text; background-clip:text; color:transparent}
.brand p{margin:6px 0 0; color:var(--dim); font-size:11px; letter-spacing:.16em; text-transform:uppercase}
.stats{position:absolute; top:24px; right:24px; text-align:right; color:var(--dim);
font-size:11px; letter-spacing:.1em; user-select:none; line-height:1.75}
.stats b{color:var(--ink); font-weight:500}
.bar{position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
display:flex; align-items:center; gap:5px; padding:6px; border-radius:999px;
background:var(--glass); border:1px solid var(--edge);
backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
max-width:calc(100vw - 24px); overflow-x:auto; scrollbar-width:none}
.bar::-webkit-scrollbar{display:none}
.dock{display:flex; gap:4px}
.sep{flex:none; width:1px; height:20px; background:var(--edge); margin:0 3px}
.bar button{all:unset; cursor:pointer; white-space:nowrap; flex:none;
padding:8px 14px; border-radius:999px; font-size:11px; letter-spacing:.14em;
text-transform:uppercase; color:var(--dim); transition:color .25s, background .25s}
.bar button:hover{color:var(--ink); background:rgba(255,255,255,.06)}
.bar button.on{color:#05070d; background:linear-gradient(100deg,#ffc98a,#ff9a6a); font-weight:600}
.bar button.icon{padding:0; width:32px; height:32px; border-radius:50%; display:grid; place-items:center}
.bar .icon svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6;
stroke-linecap:round; stroke-linejoin:round}
.hint{position:absolute; left:50%; bottom:82px; transform:translateX(-50%);
color:var(--dim); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
white-space:nowrap; transition:opacity .8s ease; user-select:none; text-align:center}
.hint span{color:var(--ink)}
.hint.gone{opacity:0}
#loader{position:fixed; inset:0; z-index:50; display:grid; place-items:center;
background:#04050a; transition:opacity .9s ease}
#loader.gone{opacity:0; pointer-events:none}
#loader div{color:var(--dim); font-size:11px; letter-spacing:.5em; text-transform:uppercase;
animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:.9}}
#fail{position:fixed; inset:0; z-index:60; display:none; place-items:center; text-align:center;
padding:32px; background:#04050a; color:var(--dim); font-size:13px; line-height:1.9}
@media (max-width:720px){
.brand{top:18px; left:18px}
.brand h1{font-size:18px; letter-spacing:.32em; text-indent:.32em}
.brand p{font-size:9px}
.stats{top:20px; right:18px; font-size:9px}
.bar{bottom:18px; padding:5px; gap:3px}
.bar button{padding:7px 11px; font-size:9.5px; letter-spacing:.1em}
.bar button.icon{width:28px; height:28px}
.hint{bottom:70px; font-size:9px; letter-spacing:.1em}
}
</style>
<div id="loader"><div>compiling</div></div>
<div id="fail">this needs WebGL2.<br>try a desktop browser or update yours.</div>
<div id="ui">
<div class="brand">
<h1>AETHER</h1>
<p>procedural vfx forge</p>
</div>
<div class="stats">
<div><b id="ename">—</b></div>
<div><b id="layers">—</b> layers · <b id="pcount">—</b> particles</div>
<div><b id="fps">—</b> fps</div>
</div>
<div class="hint" id="hint">
<span>space</span> to replay · drag to orbit · <span>[ ]</span> speed · <span>p</span> pause · <span>g</span> glow
</div>
<nav class="bar">
<div class="dock" id="dock"></div>
<span class="sep"></span>
<button class="icon" id="btnReplay" title="Replay (Space)">
<svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
</button>
<button class="icon" id="btnGlow" title="Glow level (G)">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M5 5l1.8 1.8M17.2 17.2 19 19M19 5l-1.8 1.8M6.8 17.2 5 19"/></svg>
</button>
<button class="icon" id="btnShot" title="Save image (S)">
<svg viewBox="0 0 24 24"><path d="M4 8h3l2-3h6l2 3h3v11H4z"/><circle cx="12" cy="13" r="3.4"/></svg>
</button>
</nav>
</div>
<script type="importmap">
{"imports":{
"three":"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
"three/addons/":"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
}}
</script>
<script type="module" src="./src/main.js"></script>