Version 0.2.1

components/animations/Portal.vue

@@ -7,6 +7,8 @@ const fqdn = config.url.split('//')[1]
 
 const resources: string[] = [sky, particles]
 
+const pages = storeToRefs(usePageStore())
+
 const props = defineProps({
   layout: {
     default: '#ender-app',
@@ -65,7 +67,7 @@ class Canvas {
   compatible(
     obj: HTMLCanvasElement | HTMLElement | Element,
   ): obj is HTMLCanvasElement {
-    return obj.tagName === 'CANVAS'
+    return obj.tagName.toLowerCase() === 'canvas'
   }
 
   query(): HTMLCanvasElement {
@@ -252,7 +254,7 @@ class Portal {
     this.animate = animate
     this.randomize = randomize
 
-    // Set default speed.
+    // Set the default speed.
     this.speed = speed
     this.initialSpeed = this.speed
     this.dv = 20
@@ -561,6 +563,9 @@ class Portal {
     // Run the scene.
     this.scene()
 
+    // TODO: Make it into a composable? The toggle will not work. Hardcoded.
+    if (!pages.animate.value) this.pause()
+
     // Request the next animation frame if animation is enabled.
     if (this.animate) requestAnimationFrame(this.render.bind(this))
   }