min
/
minrip
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

more?

This commit is contained in:
minish 2025-09-10 04:26:14 -04:00
parent e0d2791458
commit be94db33e2
Signed by: min
SSH Key Fingerprint: SHA256:mf+pUTmK92Y57BuCjlkBdd82LqztTfDCQIUp0fCKABc
6 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
TimesNewPixel.ttf Normal file
View File

Binary file not shown.

9
index.html
View File

@ -21,10 +21,15 @@
<body>
<canvas id="bg"></canvas>
<main>
<h1>Title</h1>
<img class="shadow" src="/templogo.png" style="image-rendering: pixelated;" width="500"></img>
<center>
<h2 class="shadow">Test for internet websites</h2>
</center>
</main>
<footer>
<p>page footer</p>
<div>
<p class="shadow">2025 (c) minish ^.^</p>
</div>
</footer>
</body>
</html>

2
js/main.js
View File

@ -6,7 +6,7 @@ var gl = canvas.getContext("webgl", {
});
function resizeCanvas() {
const scl = (p) => Math.trunc(p / 4);
const scl = (p) => Math.trunc(p / 2);
var width = scl(gl.canvas.clientWidth);
var height = scl(gl.canvas.clientHeight);

18
shader/bg.frag
View File

@ -61,9 +61,19 @@ void main() {
float dist = distance(herescaled, center);
float distf = smoothstep(0.0, shortside, dist);
float second = floor(u_time * 1.1);
float noise = snoise(vec2(herescaled.x * herescaled.y, second));
float final = distf - noise * 0.8;
// at lower clock values, we make vignette gradient denser
// (at kinda slow rate for a breathing effect)
float slowtime = u_time / 2.0;
float timing = sin(slowtime) + 1.0;
float vig = distf + mix(-0.05, 0.0, timing);
gl_FragColor = mix(lighter, darker, final);
// randomize noise pattern every second ish
float fasttime = u_time * 1.1;
float second = floor(fasttime);
float noise = snoise(vec2(herescaled.x * herescaled.y, second));
// blend noise and gradient
float final = (1.0 - vig) - noise * 0.9;
gl_FragColor = mix(darker, lighter, final);
}

13
style.css
View File

@ -3,6 +3,11 @@
--fg1: #ffffff;
}
@font-face {
font-family: TimesNewPixel;
src: url("/TimesNewPixel.ttf");
}
* {
margin: 0px;
padding: 0px;
@ -15,6 +20,13 @@ body {
background: var(--bg);
color: var(--fg1);
font-family: TimesNewPixel;
}
.shadow {
filter: drop-shadow(1px 1px 0 var(--bg)) drop-shadow(-1px 1px 0 var(--bg))
drop-shadow(1px -1px 0 var(--bg)) drop-shadow(-1px -1px 0 var(--bg));
}
#bg {
@ -42,4 +54,5 @@ footer {
bottom: 0;
left: 0;
width: 100vw;
padding: 4px;
}

BIN
templogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB