refactor(StarsShader): mount only once & minor fixes

Author: rushiiMachine

src/assets/shaders/stars.fragment.glsl

@@ -40,7 +40,7 @@ vec3 Unity_Blackbody_float(float Temperature) {
 }
 
 void main() {
-    const float stars_threshold = 8.0; // modifies the number of stars that are visible
+    const float stars_threshold = 10.0; // modifies the number of stars that are visible
     const float stars_exposure = 500.0; // modifies the overall strength of the stars
 
     // Normalized pixel coordinates (from 0 to 1)

src/components/misc/ShaderContainer.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 /** biome-ignore-all lint/style/noNonNullAssertion: ignore */
 
+import { onMount } from "svelte";
+
 interface Props {
 	fragmentShader: string;
 	followReducedAnimation?: boolean;
@@ -15,7 +17,8 @@ let {
 
 let canvas: HTMLCanvasElement;
 
-$effect(() => {
+onMount(() => {
+	let cancel = false;
 	let gl: WebGLRenderingContext;
 	let u_resolution: WebGLUniformLocation;
 	let u_time: WebGLUniformLocation;
@@ -91,13 +94,18 @@ $effect(() => {
 		init();
 		canvas.setAttribute("style", "opacity: unset");
 		frame = requestAnimationFrame(function loop(time) {
+			if (cancel) return;
 			frame = requestAnimationFrame(loop);
 
 			gl.uniform2f(u_resolution, canvas.width, canvas.height);
 			gl.uniform1f(u_time, time / 1000.0);
 			gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 		});
 	});
+
+	return () => {
+		cancel = true;
+	};
 });
 </script>
 

src/pages/about.astro

@@ -21,7 +21,7 @@ const { Content } = await render(aboutPost);
     <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
         <div class="card-base relative w-full z-10">
             <DarkThemeContainer client:load>
-                <ShaderContainer client:only fragmentShader={starsShader} class="w-full h-full absolute -z-[50]"/>
+                <ShaderContainer client:only fragmentShader={starsShader} class="w-full h-full absolute"/>
             </DarkThemeContainer>
             <Markdown class="mt-2 px-9 py-6">
                 <Content />