moth11.net
frontend for xcvr appview
idk
+3
-18
src/lib/components/CursorEffect.svelte
+3
-18
src/lib/components/CursorEffect.svelte
···
3
import { browser } from "$app/environment";
4
import { Polyline, Renderer, Transform, Vec3, Color } from "ogl";
5
interface Props {
6
-
enabled: boolean;
7
colors?: Array<string>;
8
}
9
10
-
let { enabled, colors = ["#e18f39", "#c5c042", "#387f4d", "#1d4633"] } =
11
-
$props();
12
13
let canvas: undefined | HTMLCanvasElement = $state();
14
const thickness: [number, number] = [14, 35];
···
74
premultipliedAlpha: true,
75
canvas,
76
});
77
-
if (!browser || !enabled) return;
78
const gl = renderer.gl;
79
gl.clearColor(0, 0, 0, 0);
80
gl.enable(gl.BLEND);
···
124
);
125
}
126
function update() {
127
-
if (!enabled) {
128
-
animationId = null;
129
-
return;
130
-
}
131
animationId = requestAnimationFrame(update);
132
lines.forEach((line) => {
133
for (let i = line.points.length - 1; i >= 0; i--) {
···
158
animationId = null;
159
}
160
}
161
-
$effect(() => {
162
-
if (enabled) {
163
-
startAnimation();
164
-
} else {
165
-
stopAnimation();
166
-
}
167
-
});
168
onMount(() => {
169
if (!browser) return;
170
initializeCursorEffect();
···
179
});
180
</script>
181
182
-
{#if enabled}
183
-
<canvas bind:this={canvas} id="cursor-canvas"></canvas>
184
-
{/if}
185
186
<style>
187
#cursor-canvas {
···
3
import { browser } from "$app/environment";
4
import { Polyline, Renderer, Transform, Vec3, Color } from "ogl";
5
interface Props {
6
colors?: Array<string>;
7
}
8
9
+
let { colors = ["#e18f39", "#c5c042", "#387f4d", "#1d4633"] } = $props();
10
11
let canvas: undefined | HTMLCanvasElement = $state();
12
const thickness: [number, number] = [14, 35];
···
72
premultipliedAlpha: true,
73
canvas,
74
});
75
+
if (!browser) return;
76
const gl = renderer.gl;
77
gl.clearColor(0, 0, 0, 0);
78
gl.enable(gl.BLEND);
···
122
);
123
}
124
function update() {
125
animationId = requestAnimationFrame(update);
126
lines.forEach((line) => {
127
for (let i = line.points.length - 1; i >= 0; i--) {
···
152
animationId = null;
153
}
154
}
155
onMount(() => {
156
if (!browser) return;
157
initializeCursorEffect();
···
166
});
167
</script>
168
169
+
<canvas bind:this={canvas} id="cursor-canvas"></canvas>
170
171
<style>
172
#cursor-canvas {
+3
-1
src/routes/+layout.svelte
+3
-1
src/routes/+layout.svelte
+5
-7
src/routes/settings/+page.svelte
+5
-7
src/routes/settings/+page.svelte
···
34
: defaultCursor;
35
let cursor = $state(initialCursor === "t");
36
$effect(() => {
37
-
if (cursor !== undefined) {
38
-
window.localStorage.setItem("cursor", cursor ? "t" : "f");
39
-
if (cursor) {
40
-
cursorContext.setCursorTrue();
41
-
} else {
42
-
cursorContext.setCursorFalse();
43
-
}
44
}
45
});
46
</script>