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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });
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;
 });