From 4b17971701d2ae4a0216b4043a8ec12c2b673060 Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:47:28 +0300
Subject: [PATCH 01/21] fix(asciify): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Asciify/Asciify.svelte | 17 ++++++++++---
 src/lib/Asciify/Asciify.vue    | 46 ++++++++++++++++++++++------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Asciify/Asciify.svelte b/src/lib/Asciify/Asciify.svelte
index 431500f..226c787 100644
--- a/src/lib/Asciify/Asciify.svelte
+++ b/src/lib/Asciify/Asciify.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createAsciify(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createAsciify(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Asciify/Asciify.vue b/src/lib/Asciify/Asciify.vue
index ea5253d..eced6ed 100644
--- a/src/lib/Asciify/Asciify.vue
+++ b/src/lib/Asciify/Asciify.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createAsciify,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: AsciifyInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createAsciify(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createAsciify(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createAsciify(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 9a5e6d636de4eb7e0ebe9439877d164eb2ba1700 Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:48:03 +0300
Subject: [PATCH 02/21] fix(bend): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Bend/Bend.svelte | 17 ++++++++++++---
 src/lib/Bend/Bend.vue    | 46 ++++++++++++++++++++++++++--------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Bend/Bend.svelte b/src/lib/Bend/Bend.svelte
index cdf3d15..35026ad 100644
--- a/src/lib/Bend/Bend.svelte
+++ b/src/lib/Bend/Bend.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createBend(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createBend(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Bend/Bend.vue b/src/lib/Bend/Bend.vue
index 9eb31ab..05d434e 100644
--- a/src/lib/Bend/Bend.vue
+++ b/src/lib/Bend/Bend.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createBend,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: BendInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createBend(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createBend(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createBend(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From d3ac33b61b054eb0c2551f47fcafe46f13391afa Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:48:29 +0300
Subject: [PATCH 03/21] fix(blaze): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Blaze/Blaze.svelte | 17 +++++++++++---
 src/lib/Blaze/Blaze.vue    | 46 +++++++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Blaze/Blaze.svelte b/src/lib/Blaze/Blaze.svelte
index d428713..cb2f13c 100644
--- a/src/lib/Blaze/Blaze.svelte
+++ b/src/lib/Blaze/Blaze.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createBlaze(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createBlaze(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Blaze/Blaze.vue b/src/lib/Blaze/Blaze.vue
index 9440d1a..bc93806 100644
--- a/src/lib/Blaze/Blaze.vue
+++ b/src/lib/Blaze/Blaze.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createBlaze,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: BlazeInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createBlaze(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createBlaze(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createBlaze(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 9c3e019aacbecac1e56b8643dbedbeaced9d8126 Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:48:58 +0300
Subject: [PATCH 04/21] fix(bubble): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Bubble/Bubble.svelte | 17 ++++++++++---
 src/lib/Bubble/Bubble.vue    | 46 +++++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Bubble/Bubble.svelte b/src/lib/Bubble/Bubble.svelte
index e3876fe..40b01e6 100644
--- a/src/lib/Bubble/Bubble.svelte
+++ b/src/lib/Bubble/Bubble.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createBubble(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createBubble(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Bubble/Bubble.vue b/src/lib/Bubble/Bubble.vue
index 906b697..05cf63f 100644
--- a/src/lib/Bubble/Bubble.vue
+++ b/src/lib/Bubble/Bubble.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createBubble,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: BubbleInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createBubble(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createBubble(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createBubble(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 7b6cd7abc90add8965204ee1ba91a9897100b407 Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:49:22 +0300
Subject: [PATCH 05/21] fix(cloth): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Cloth/Cloth.svelte | 17 +++++++++++---
 src/lib/Cloth/Cloth.vue    | 46 +++++++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Cloth/Cloth.svelte b/src/lib/Cloth/Cloth.svelte
index 61bf74f..34b3594 100644
--- a/src/lib/Cloth/Cloth.svelte
+++ b/src/lib/Cloth/Cloth.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createCloth(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createCloth(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Cloth/Cloth.vue b/src/lib/Cloth/Cloth.vue
index 33cf889..6b920f0 100644
--- a/src/lib/Cloth/Cloth.vue
+++ b/src/lib/Cloth/Cloth.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createCloth,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: ClothInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createCloth(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createCloth(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createCloth(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 26c52c1607c8d7528353b4dd3b05d72a61633b39 Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:50:10 +0300
Subject: [PATCH 06/21] fix(clouds): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Clouds/Clouds.svelte | 17 ++++++++++---
 src/lib/Clouds/Clouds.vue    | 46 +++++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Clouds/Clouds.svelte b/src/lib/Clouds/Clouds.svelte
index c4f18e5..bb720f5 100644
--- a/src/lib/Clouds/Clouds.svelte
+++ b/src/lib/Clouds/Clouds.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createClouds(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createClouds(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Clouds/Clouds.vue b/src/lib/Clouds/Clouds.vue
index 93b4cca..23f3682 100644
--- a/src/lib/Clouds/Clouds.vue
+++ b/src/lib/Clouds/Clouds.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createClouds,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: CloudsInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createClouds(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createClouds(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createClouds(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 7dff1595b2c12ca858ba971f0ff0168850593344 Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:51:04 +0300
Subject: [PATCH 07/21] fix(droplets): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Droplets/Droplets.svelte | 17 +++++++++---
 src/lib/Droplets/Droplets.vue    | 46 +++++++++++++++++++++-----------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Droplets/Droplets.svelte b/src/lib/Droplets/Droplets.svelte
index 51059e3..b6fccb6 100644
--- a/src/lib/Droplets/Droplets.svelte
+++ b/src/lib/Droplets/Droplets.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createDroplets(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createDroplets(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Droplets/Droplets.vue b/src/lib/Droplets/Droplets.vue
index 9eda84c..1d27273 100644
--- a/src/lib/Droplets/Droplets.vue
+++ b/src/lib/Droplets/Droplets.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createDroplets,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: DropletsInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createDroplets(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createDroplets(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createDroplets(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 39a79d1f2cbf1ef234fab1a11214701c60c2ccdd Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:51:44 +0300
Subject: [PATCH 08/21] fix(frost): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Frost/Frost.svelte | 17 +++++++++++---
 src/lib/Frost/Frost.vue    | 46 +++++++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Frost/Frost.svelte b/src/lib/Frost/Frost.svelte
index 536b221..374c02b 100644
--- a/src/lib/Frost/Frost.svelte
+++ b/src/lib/Frost/Frost.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createFrost(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createFrost(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Frost/Frost.vue b/src/lib/Frost/Frost.vue
index ec0261d..f204243 100644
--- a/src/lib/Frost/Frost.vue
+++ b/src/lib/Frost/Frost.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createFrost,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: FrostInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createFrost(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createFrost(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createFrost(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 1f693f145fe1988d66275fd4a238f53f404b54fa Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:52:04 +0300
Subject: [PATCH 09/21] fix(glass): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Glass/Glass.svelte | 17 +++++++++++---
 src/lib/Glass/Glass.vue    | 46 +++++++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Glass/Glass.svelte b/src/lib/Glass/Glass.svelte
index 8ba11e3..2b53e95 100644
--- a/src/lib/Glass/Glass.svelte
+++ b/src/lib/Glass/Glass.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createGlass(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createGlass(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Glass/Glass.vue b/src/lib/Glass/Glass.vue
index 1d6e3a5..f8588da 100644
--- a/src/lib/Glass/Glass.vue
+++ b/src/lib/Glass/Glass.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createGlass,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: GlassInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createGlass(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createGlass(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createGlass(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From e655d4d4ea1e0dc942c79b088188a2e7fc559f3e Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:52:43 +0300
Subject: [PATCH 10/21] fix(glitch): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Glitch/Glitch.svelte | 17 ++++++++++---
 src/lib/Glitch/Glitch.vue    | 46 +++++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Glitch/Glitch.svelte b/src/lib/Glitch/Glitch.svelte
index cbc2ad2..bbd63c7 100644
--- a/src/lib/Glitch/Glitch.svelte
+++ b/src/lib/Glitch/Glitch.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createGlitch(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createGlitch(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Glitch/Glitch.vue b/src/lib/Glitch/Glitch.vue
index 2a105f4..ec0817d 100644
--- a/src/lib/Glitch/Glitch.vue
+++ b/src/lib/Glitch/Glitch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createGlitch,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: GlitchInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createGlitch(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createGlitch(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createGlitch(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 3094fdbc2251e9f83bfd2be785c09e37d1b5e7ca Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:53:47 +0300
Subject: [PATCH 11/21] fix(grid): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Grid/Grid.svelte | 17 ++++++++++++---
 src/lib/Grid/Grid.vue    | 46 ++++++++++++++++++++++++++--------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Grid/Grid.svelte b/src/lib/Grid/Grid.svelte
index 25e9120..92cde31 100644
--- a/src/lib/Grid/Grid.svelte
+++ b/src/lib/Grid/Grid.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createGrid(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createGrid(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Grid/Grid.vue b/src/lib/Grid/Grid.vue
index fad8ad9..e42adbd 100644
--- a/src/lib/Grid/Grid.vue
+++ b/src/lib/Grid/Grid.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createGrid,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: GridInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createGrid(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createGrid(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createGrid(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 2aad33d490fac63fac0e8670cf7dc6e6e35da110 Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:54:15 +0300
Subject: [PATCH 12/21] fix(hex-float): re-initialize WebGL fallback engine
 when native html-in-canvas fails

---
 src/lib/HexFloat/HexFloat.svelte | 17 +++++++++---
 src/lib/HexFloat/HexFloat.vue    | 46 +++++++++++++++++++++-----------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/HexFloat/HexFloat.svelte b/src/lib/HexFloat/HexFloat.svelte
index 8c4c28e..e6c82b6 100644
--- a/src/lib/HexFloat/HexFloat.svelte
+++ b/src/lib/HexFloat/HexFloat.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createHexFloat(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createHexFloat(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/HexFloat/HexFloat.vue b/src/lib/HexFloat/HexFloat.vue
index 42dbc56..f63db32 100644
--- a/src/lib/HexFloat/HexFloat.vue
+++ b/src/lib/HexFloat/HexFloat.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createHexFloat,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: HexFloatInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createHexFloat(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createHexFloat(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createHexFloat(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 0df656c631c30de230fdc6b7b80e8efd9b93afbd Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:54:46 +0300
Subject: [PATCH 13/21] fix(laser): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Laser/Laser.svelte | 17 +++++++++++---
 src/lib/Laser/Laser.vue    | 46 +++++++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Laser/Laser.svelte b/src/lib/Laser/Laser.svelte
index f0b3bce..455e22e 100644
--- a/src/lib/Laser/Laser.svelte
+++ b/src/lib/Laser/Laser.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createLaser(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createLaser(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Laser/Laser.vue b/src/lib/Laser/Laser.vue
index 13717b3..e165c53 100644
--- a/src/lib/Laser/Laser.vue
+++ b/src/lib/Laser/Laser.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createLaser,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: LaserInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createLaser(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createLaser(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createLaser(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 231236779dd64b50a21291e34d108c7be2791b03 Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:55:05 +0300
Subject: [PATCH 14/21] fix(magnify): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Magnify/Magnify.svelte | 17 ++++++++++---
 src/lib/Magnify/Magnify.vue    | 46 ++++++++++++++++++++++------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Magnify/Magnify.svelte b/src/lib/Magnify/Magnify.svelte
index d0b8ad1..68474ca 100644
--- a/src/lib/Magnify/Magnify.svelte
+++ b/src/lib/Magnify/Magnify.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createMagnify(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createMagnify(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Magnify/Magnify.vue b/src/lib/Magnify/Magnify.vue
index 7af7386..245b12d 100644
--- a/src/lib/Magnify/Magnify.vue
+++ b/src/lib/Magnify/Magnify.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createMagnify,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: MagnifyInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createMagnify(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createMagnify(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createMagnify(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 45d01934e21e3228fdfc4b0b64a87bea943a51f4 Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:55:27 +0300
Subject: [PATCH 15/21] fix(particle-reveal): re-initialize WebGL fallback
 engine when native html-in-canvas fails

---
 src/lib/ParticleReveal/ParticleReveal.svelte | 17 ++++++--
 src/lib/ParticleReveal/ParticleReveal.vue    | 46 +++++++++++++-------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/ParticleReveal/ParticleReveal.svelte b/src/lib/ParticleReveal/ParticleReveal.svelte
index 922f899..ecd5a8b 100644
--- a/src/lib/ParticleReveal/ParticleReveal.svelte
+++ b/src/lib/ParticleReveal/ParticleReveal.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createParticleReveal(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createParticleReveal(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/ParticleReveal/ParticleReveal.vue b/src/lib/ParticleReveal/ParticleReveal.vue
index 8362bb6..c5d83a9 100644
--- a/src/lib/ParticleReveal/ParticleReveal.vue
+++ b/src/lib/ParticleReveal/ParticleReveal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createParticleReveal,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: ParticleRevealInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createParticleReveal(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createParticleReveal(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createParticleReveal(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 86ba5116e0dac99aa51d42951169eba22214de0b Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:56:54 +0300
Subject: [PATCH 16/21] fix(particle-scroll): re-initialize WebGL fallback
 engine when native html-in-canvas fails

---
 src/lib/ParticleScroll/ParticleScroll.svelte | 17 ++++++--
 src/lib/ParticleScroll/ParticleScroll.vue    | 46 +++++++++++++-------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/ParticleScroll/ParticleScroll.svelte b/src/lib/ParticleScroll/ParticleScroll.svelte
index 7e68499..3ec0dda 100644
--- a/src/lib/ParticleScroll/ParticleScroll.svelte
+++ b/src/lib/ParticleScroll/ParticleScroll.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createParticleScroll(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createParticleScroll(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/ParticleScroll/ParticleScroll.vue b/src/lib/ParticleScroll/ParticleScroll.vue
index 41354c3..ae5d223 100644
--- a/src/lib/ParticleScroll/ParticleScroll.vue
+++ b/src/lib/ParticleScroll/ParticleScroll.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createParticleScroll,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: ParticleScrollInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createParticleScroll(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createParticleScroll(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createParticleScroll(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 7ffb8db71506a4d30e5bfcd5d2852169621b1fbf Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:57:17 +0300
Subject: [PATCH 17/21] fix(peel): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Peel/Peel.svelte | 17 +++++++++++---
 src/lib/Peel/Peel.vue    | 49 ++++++++++++++++++++++++++--------------
 2 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/lib/Peel/Peel.svelte b/src/lib/Peel/Peel.svelte
index e67090d..654c118 100644
--- a/src/lib/Peel/Peel.svelte
+++ b/src/lib/Peel/Peel.svelte
@@ -35,14 +35,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createPeel(
         { source: sourceEl, content: contentEl, output: outputEl, under: underEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createPeel(
+          { source: sourceEl, content: contentEl, output: outputEl, under: underEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Peel/Peel.vue b/src/lib/Peel/Peel.vue
index 6f1c52e..d25e40e 100644
--- a/src/lib/Peel/Peel.vue
+++ b/src/lib/Peel/Peel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createPeel,
@@ -17,28 +17,43 @@ const underEl = ref<HTMLDivElement | null>(null);
 const native = ref(false);
 
 let instance: PeelInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createPeel(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-          under: underEl.value ?? undefined,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createPeel(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+        under: underEl.value ?? undefined,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createPeel(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+            under: underEl.value ?? undefined,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 9508d5fff4890b9a8e0fb7bf3982022b00656446 Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:57:35 +0300
Subject: [PATCH 18/21] fix(retro-dither): re-initialize WebGL fallback engine
 when native html-in-canvas fails

---
 src/lib/RetroDither/RetroDither.svelte | 17 ++++++++--
 src/lib/RetroDither/RetroDither.vue    | 46 +++++++++++++++++---------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/RetroDither/RetroDither.svelte b/src/lib/RetroDither/RetroDither.svelte
index 88c6c72..e3ee976 100644
--- a/src/lib/RetroDither/RetroDither.svelte
+++ b/src/lib/RetroDither/RetroDither.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createRetroDither(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createRetroDither(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/RetroDither/RetroDither.vue b/src/lib/RetroDither/RetroDither.vue
index 0a9755e..055e499 100644
--- a/src/lib/RetroDither/RetroDither.vue
+++ b/src/lib/RetroDither/RetroDither.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createRetroDither,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: RetroDitherInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createRetroDither(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createRetroDither(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createRetroDither(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 2ebdf7d61b0d7a29e82fd620fddbf27a05bed24b Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:57:51 +0300
Subject: [PATCH 19/21] fix(ripple): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Ripple/Ripple.svelte | 17 ++++++++++---
 src/lib/Ripple/Ripple.vue    | 46 +++++++++++++++++++++++-------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Ripple/Ripple.svelte b/src/lib/Ripple/Ripple.svelte
index 70caca0..f35d3b5 100644
--- a/src/lib/Ripple/Ripple.svelte
+++ b/src/lib/Ripple/Ripple.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createRipple(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createRipple(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Ripple/Ripple.vue b/src/lib/Ripple/Ripple.vue
index 096ad57..0bf781d 100644
--- a/src/lib/Ripple/Ripple.vue
+++ b/src/lib/Ripple/Ripple.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createRipple,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: RippleInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createRipple(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createRipple(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createRipple(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 60e26669d690503821280daff52e352a2268ec9c Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:58:10 +0300
Subject: [PATCH 20/21] fix(shatter): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/Shatter/Shatter.svelte | 17 ++++++++++---
 src/lib/Shatter/Shatter.vue    | 46 ++++++++++++++++++++++------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/Shatter/Shatter.svelte b/src/lib/Shatter/Shatter.svelte
index aa1fca6..60d15d1 100644
--- a/src/lib/Shatter/Shatter.svelte
+++ b/src/lib/Shatter/Shatter.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createShatter(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createShatter(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/Shatter/Shatter.vue b/src/lib/Shatter/Shatter.vue
index e3b6dc8..6740e48 100644
--- a/src/lib/Shatter/Shatter.vue
+++ b/src/lib/Shatter/Shatter.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createShatter,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: ShatterInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createShatter(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createShatter(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createShatter(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });

From 157ad5db94233e26484476545e1633a7533a9281 Mon Sep 17 00:00:00 2001
From: Lulu <87658293+luluwux@users.noreply.github.com>
Date: Sun, 26 Jul 2026 21:58:35 +0300
Subject: [PATCH 21/21] fix(vhs): re-initialize WebGL fallback engine when
 native html-in-canvas fails

---
 src/lib/VHS/VHS.svelte | 17 +++++++++++++---
 src/lib/VHS/VHS.vue    | 46 +++++++++++++++++++++++++++---------------
 2 files changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/lib/VHS/VHS.svelte b/src/lib/VHS/VHS.svelte
index 69ad4ec..146705b 100644
--- a/src/lib/VHS/VHS.svelte
+++ b/src/lib/VHS/VHS.svelte
@@ -33,14 +33,25 @@
   onMount(() => {
     native = supportsHtmlInCanvas();
     let disposed = false;
-    tick().then(() => {
+    (async () => {
+      await tick();
       if (disposed) return;
+      if (!sourceEl || !contentEl || !outputEl) return;
       instance = createVHS(
         { source: sourceEl, content: contentEl, output: outputEl },
         options,
       );
-      if (native && !instance) native = false;
-    });
+      if (native && !instance) {
+        native = false;
+        await tick();
+        if (disposed) return;
+        if (!sourceEl || !contentEl || !outputEl) return;
+        instance = createVHS(
+          { source: sourceEl, content: contentEl, output: outputEl },
+          options,
+        );
+      }
+    })();
     return () => {
       disposed = true;
       instance?.destroy();
diff --git a/src/lib/VHS/VHS.vue b/src/lib/VHS/VHS.vue
index 2cde827..53b2240 100644
--- a/src/lib/VHS/VHS.vue
+++ b/src/lib/VHS/VHS.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import {
   createVHS,
@@ -16,27 +16,41 @@ const outputEl = ref<HTMLCanvasElement | null>(null);
 const native = ref(false);
 
 let instance: VHSInstance | null = null;
-let raf = 0;
+let disposed = false;
 
-onMounted(() => {
+onMounted(async () => {
   native.value = supportsHtmlInCanvas();
-  raf = requestAnimationFrame(() => {
-    if (sourceEl.value && contentEl.value && outputEl.value) {
-      instance = createVHS(
-        {
-          source: sourceEl.value,
-          content: contentEl.value,
-          output: outputEl.value,
-        },
-        props,
-      );
-      if (native.value && !instance) native.value = false;
+  await nextTick();
+  if (disposed) return;
+  if (sourceEl.value && contentEl.value && outputEl.value) {
+    instance = createVHS(
+      {
+        source: sourceEl.value,
+        content: contentEl.value,
+        output: outputEl.value,
+      },
+      props,
+    );
+    if (native.value && !instance) {
+      native.value = false;
+      await nextTick();
+      if (disposed) return;
+      if (sourceEl.value && contentEl.value && outputEl.value) {
+        instance = createVHS(
+          {
+            source: sourceEl.value,
+            content: contentEl.value,
+            output: outputEl.value,
+          },
+          props,
+        );
+      }
     }
-  });
+  }
 });
 
 onBeforeUnmount(() => {
-  cancelAnimationFrame(raf);
+  disposed = true;
   instance?.destroy();
   instance = null;
 });