Add effectful cleanup

Author: escherlies

src/App.tsx

@@ -1,14 +1,12 @@
-import { main } from "./lava/app"
+import { startLavaAnimation } from "./lava/app"
 import { createEffect } from 'solid-js';
 
 function App() {
-  createEffect(() => {
-    main()
-  })
+  createEffect(() => startLavaAnimation())
 
   return (
     <>
-      {/* Background */}
+      {/* Background. Mounting point for lava animation */}
       <canvas id="background" class="fixed inset-0 w-screen h-screen" />
 
       {/* Content */}

src/lava/app.js

@@ -3,7 +3,15 @@ import * as TWGL from 'twgl.js';
 import vertexShader from './glsl/vertex.glsl';
 import fragmentShader from './glsl/fragment.glsl';
 
-export function main() {
+/**
+ * Initializes and starts a WebGL-based lava animation in the background canvas.
+ * The animation uses spherical coordinates to position the camera and renders
+ * a full-screen quad with custom shaders.
+ * 
+ * @returns {Function} A cleanup function that cancels the animation frame when called
+ * @throws {Error} If WebGL context cannot be obtained or shader compilation fails
+ */
+export function startLavaAnimation() {
   // Calculate camera position
   // based on THREE.Vector3.setFromSphericalCoords(radius, phi, theta)
   const DEG_TO_RAD = Math.PI / 180;
@@ -57,4 +65,7 @@ export function main() {
 
     frameId = requestAnimationFrame(render);
   }
+
+  // Return cleanup function
+  return () => cancelAnimationFrame(frameId);
 }