moth11.net
frontend for xcvr appview
might fix up some of the styling for trails
+7
-3
src/app.html
+7
-3
src/app.html
···
128
128
{
129
129
const renderer = new Renderer({ dpr: 2 });
130
130
const gl = renderer.gl;
131
+
gl.canvas.id = 'cursor-canvas'
131
132
document.body.appendChild(gl.canvas);
132
-
gl.clearColor(0.9, 0.9, 0.9, 1);
133
+
gl.clearColor(0, 0, 0, 0);
134
+
gl.enable(gl.BLEND);
135
+
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
136
+
133
137
134
138
const scene = new Transform();
135
139
···
160
164
}
161
165
162
166
// We're going to make a number of different coloured lines for fun.
163
-
["#e18f39", "#c5c042", "#387f4d", "#1d4633", "#000000"].forEach(
167
+
["#e18f39", "#c5c042", "#387f4d", "#1d4633"].forEach(
164
168
(color, i) => {
165
169
// Store a few values for each lines' randomised spring movement
166
170
const line = {
···
180
184
vertex,
181
185
uniforms: {
182
186
uColor: { value: new Color(color) },
183
-
uThickness: { value: random(20, 50) },
187
+
uThickness: { value: random(14, 35) },
184
188
},
185
189
});
186
190
+10
static/main.css
+10
static/main.css
···
52
52
color: var(--fg);
53
53
background: var(--bg);
54
54
margin: 0;
55
+
position: relative;
55
56
}
56
57
57
58
.block-link {
···
99
100
#content:not(.desktop) .desktop {
100
101
display: none;
101
102
}
103
+
#cursor-canvas {
104
+
position: fixed;
105
+
top: 0;
106
+
left: 0;
107
+
width: 100vw;
108
+
height: 100vw;
109
+
pointer-events: none;
110
+
z-index: 1;
111
+
}